@desynova-digital/components 9.3.4 → 9.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/atoms/avatar/index.js +1 -2
  2. package/atoms/badge/index.js +1 -2
  3. package/atoms/button/button.js +1 -2
  4. package/atoms/card/index.js +1 -2
  5. package/atoms/cardStack/index.js +1 -2
  6. package/atoms/cardV2/cardV2.js +1 -2
  7. package/atoms/cardV2/content.js +1 -2
  8. package/atoms/cardV2/contentV2.js +1 -2
  9. package/atoms/cardV2/thumbnail.js +1 -2
  10. package/atoms/cardV2/thumbnailV2.js +54 -55
  11. package/atoms/cardV2/timeline.js +1 -2
  12. package/atoms/customSelect/customSelect.js +1 -2
  13. package/atoms/datePicker/datePicker.js +11 -12
  14. package/atoms/dateTime/dateTime.js +1 -1
  15. package/atoms/draftInputText/draftInputText.js +4 -5
  16. package/atoms/dropdown/dropdown.js +1 -2
  17. package/atoms/dropdownList/dropdownList.js +1 -2
  18. package/atoms/graphs/circleDonut/circleDonut.js +1 -2
  19. package/atoms/graphs/circleGraph/circleGraph.js +1 -2
  20. package/atoms/graphs/circleNested/circleNested.js +1 -2
  21. package/atoms/graphs/pieChart/pieChart.js +1 -2
  22. package/atoms/graphs/verticalBarGraph/verticalBarGraph.js +1 -2
  23. package/atoms/icon/index.js +1 -2
  24. package/atoms/inputText/inputText.js +1 -2
  25. package/atoms/loader/ShimmerComponent/Shimmer.js +1 -2
  26. package/atoms/loader/index.js +1 -2
  27. package/atoms/pageSearchCard/pageSearchCard.js +4 -5
  28. package/atoms/popup/popup.js +1 -2
  29. package/atoms/radio/index.js +1 -2
  30. package/atoms/sideBar/sidebar.js +1 -2
  31. package/atoms/tag/index.js +1 -2
  32. package/atoms/thematicBreak/index.js +1 -2
  33. package/atoms/timeCodeInput/timeCodeInput.js +1 -2
  34. package/atoms/timeCodeInput/timeCodeMSInput.js +1 -2
  35. package/atoms/timeCodeInput/timeCodeMainInput.js +1 -2
  36. package/atoms/timeCodeInput/timeCodeStandardInput.js +1 -2
  37. package/atoms/timer/timer.js +1 -2
  38. package/atoms/toast/toast.js +1 -2
  39. package/atoms/videoCard/index.js +1 -2
  40. package/components.js +1 -2
  41. package/molecules/filter/filter.js +7 -5
  42. package/molecules/graphDetailCard/graphDetailCard.js +1 -2
  43. package/molecules/pageHeader/index.js +1 -2
  44. package/molecules/richTextInput/RichTextInput.js +1 -2
  45. package/molecules/richTextInputV2/RichTextInputV2.js +1 -2
  46. package/molecules/table/table.js +9 -10
  47. package/molecules/videoPlayer/videoPlayer.js +6 -6
  48. package/package.json +2 -2
@@ -20,7 +20,7 @@ var _icon = _interopRequireDefault(require("../../atoms/icon"));
20
20
  var _image = _interopRequireDefault(require("../../atoms/image"));
21
21
  var _thematicBreak = _interopRequireDefault(require("../../atoms/thematicBreak"));
22
22
  var _tabs = _interopRequireDefault(require("../../molecules/tabs"));
23
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
23
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
24
24
  function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
25
25
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
26
26
  var PlayerContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n height: 100%;\n"])));
@@ -32,11 +32,11 @@ var BigPlayButton = (0, _styledComponents["default"])(_button["default"])(_templ
32
32
  var SDPlayerBorder = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n opacity: 0.3;\n border: solid 1px #ffffff;\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%,-50%);\n -ms-transform: translate(-50%,-50%);\n -o-transform: translate(-50%,-50%);\n -moz-transform: translate(-50%,-50%);\n transform: translate(-50%,-50%);\n position: absolute;\n padding-left: 75%;\n height: 100%;\n"])));
33
33
  var PlayerControlBlock = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n height: 60px;\n position: relative;\n"])));
34
34
  var SeekBar = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n height: 4px;\n position: relative;\n cursor: pointer;\n .seekbar-bg {\n background: rgba(0,0,0,0.3);\n width: 100%;\n height: 100%;\n }\n .play-progress {\n position: absolute;\n width: 0px;\n height: 100%;\n left: 0;\n top: 0;\n background: #00cec6;\n &:after {\n content: '';\n width: 12px;\n height: 12px;\n position: absolute;\n background: #00cec6;\n border-radius: 100%;\n right: -6px;\n top: -5px;\n box-shadow: 0 0 14px 1px #00cec6;\n }\n }\n"])));
35
- var PlayerControls = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n height: calc(100% - 4px);\n background: #000000;\n display: flex;\n justify-content: space-between;\n padding: 0 10px;\n align-items: center;\n .controls-left, .controls-right {\n display: flex;\n align-items: center;\n ", " {\n background: transparent;\n border: none;\n margin: 0 10px;\n }\n }\n .controls-left{\n .video-time-display {\n display: flex;\n align-items: center;\n font-family: SFUIText-Regular;\n font-size: 12px;\n letter-spacing: -0.6px;\n .video-time {\n margin: 0 2px;\n &.video-end-time, &.video-time-seperator {\n color: #888888;\n }\n &.video-current-time {\n color: #ffffff;\n min-width: 64px;\n }\n }\n }\n }\n"])), _button["default"].Element);
36
- var CommentBox = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n background-color: #333333;\n align-items: center;\n justify-content: space-between;\n ", " {\n height: 100%;\n color: #ccc;\n padding: 15px 10px 15px 20px;\n border-bottom: none;\n }\n ", " {\n margin: 0;\n background: #333333;\n border: none;\n ", " {\n svg {\n path {\n fill: #00cec6;\n }\n }\n }\n }\n"])), _inputText["default"].Element, _button["default"].Element, _icon["default"].Element);
37
- var Carousal = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n height: 91px;\n background: #000000;\n"])));
38
- var VideoDetailsWrapper = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n width: 36.33%;\n .tab-block {\n height: 100%;\n .tab-container {\n padding: 20px;\n text-align: left;\n .info-block {\n width: 33.33%;\n display: inline-block;\n padding-bottom: 25px;\n &:last-child{\n width: 100%;\n }\n .info-header {\n font-family: SFUIText-Regular;\n font-size: 10px;\n color: #666666;\n color: #cccccc;\n margin-bottom: 20px;\n }\n .info-value {\n font-family: SFUIText-Regular;\n font-size: 14px;\n color: #333333;\n color: #ffffff;\n }\n }\n &.scenes-tab {\n hr {\n border-color: #eeeeee;\n border-color: #4e5c6c;\n }\n .scenes-synopsis {\n .info-header {\n font-family: SFUIText-Regular;\n font-size: 12px;\n color: #333333;\n color: #cccccc;\n text-transform: uppercase;\n margin-bottom: 10px;\n }\n .synopsis {\n font-family: SFUIText-Regular;\n font-size: 12px;\n line-height: 1.33;\n color: #666666;\n color: #ffffff;\n margin-bottom: 10px;\n }\n }\n .scenes-wrapper {\n .scene-container{\n &:last-child {\n hr {\n display: none;\n }\n }\n .scene-block {\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n cursor: pointer;\n &:hover{\n .scene-image {\n ", " {\n display: inline-block;\n }\n }\n }\n .scene-image {\n width: 70px;\n height: 70px;\n border-radius: 100%;\n overflow: hidden;\n position: relative;\n ", " {\n display: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n }\n }\n .scene-details {\n margin-left: 15px;\n .scene-name {\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #333333;\n color: #ffffff;\n margin-bottom: 5px;\n }\n .scene-time {\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #888888;\n color: #aaaaaa;\n margin-bottom: 5px;\n }\n .scene-tags-block {\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n .scene-tags {\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: 1.17;\n letter-spacing: normal;\n color: #c7c5c5;\n color: #999999;\n margin-right: 5px;\n }\n }\n }\n }\n }\n }\n }\n &.comments-tab {\n padding: 0;\n position: relative;\n width: 100%;\n height: 100%;\n .comments-section {\n padding: 10px 0;\n height: calc(100% - 73px);\n overflow: auto;\n top: 0;\n position: absolute;\n left: 0;\n width: 100%;\n .comments-details {\n padding: 10px 20px 10px 20px;\n .comments-count {\n font-size: 14px;\n font-weight: normal;\n font-family: SFUIText-Regular;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #333333;\n color: #cccccc;\n }\n }\n .comments-container {\n .comment-wrapper {\n padding: 20px;\n cursor: pointer;\n &:hover {\n background: #f5f5f5;\n background: #304153;\n }\n .comment-block, .reply-block {\n .comment-header {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin-bottom: 10px;\n position: relative;\n z-index: 2;\n img {\n width: 30px;\n height: 30px;\n border-radius: 100%;\n left: auto;\n top: auto;\n transform: none;\n }\n .user-name {\n padding: 0px 20px 0px 10px;\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #333333;\n color: #ffffff;\n }\n .video-time {\n opacity: 0.8;\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #626260;\n color: #cccccc;\n text-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);\n }\n .comment-time {\n opacity: 0.2;\n opacity: 1;\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #000000;\n color: #aaaaaa;\n margin-left: 20px;\n }\n }\n .comment-body {\n p {\n font-family: SFUIText-Regular;\n font-size: 13px;\n font-weight: 300;\n font-style: normal;\n font-stretch: normal;\n line-height: 1.38;\n letter-spacing: normal;\n color: #333333;\n color: #ffffff;\n }\n }\n }\n .reply-wrapper {\n .reply-block {\n padding-left: 20px;\n padding-top: 15px;\n position: relative;\n &:after {\n content: '';\n position: absolute;\n width: 1px;\n height: 100%;\n background: #cccccc;\n background: #4e5c6c;\n top: 15px;\n z-index: 0;\n left: 35px;\n }\n &:last-child {\n &:after {\n display: none;\n }\n }\n .comment-body {\n padding-left: 40px;\n }\n }\n }\n }\n }\n }\n .approval-block {\n height: 73px;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n padding: 0 10px;\n background: #121d29;\n background: #ffffff;\n position: absolute;\n width: 100%;\n bottom: 0;\n ", " {\n font-size: 12px;\n margin: 0 10px;\n }\n }\n }\n &.tags-tab {\n .tag-header {\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #cccccc;\n }\n .characters-list {\n margin: 10px 0;\n .actor-tag {\n width: 70px;\n height: 70px;\n border-radius: 100%;\n background: #121d29;\n display: inline-block;\n vertical-align: middle;\n margin: 10px;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 1px solid transparent;\n &.actor-selected, &:hover {\n border: 1px solid #00cec6;\n .actor-name-wrapper {\n display: block;\n }\n }\n ", " {\n positon: absolute;\n }\n .actor-name-wrapper {\n display: none;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(0,0,0,0.8);\n .actor-name {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n width: 60px;\n text-align: center;\n font-family: SFUIText-Medium;\n font-size: 10px;\n letter-spacing: 0px;\n color: #ffffff;\n word-break: break-word;\n }\n }\n }\n }\n }\n }\n }\n"])), _icon["default"].Element, _icon["default"].Element, _button["default"].Element, _image["default"].Element);
39
- var MarkerBlock = _styledComponents["default"].div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n width: 100%;\n height: 10px;\n left:0;\n bottom: 15px;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n .scene-marker {\n background: #00cec6;\n position: relative;\n height: 100%;\n display: inline-block;\n vertical-align: top;\n }\n"])));
35
+ var PlayerControls = _styledComponents["default"].div(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2["default"])(["\n height: calc(100% - 4px);\n background: #000000;\n display: flex;\n justify-content: space-between;\n padding: 0 10px;\n align-items: center;\n .controls-left, .controls-right {\n display: flex;\n align-items: center;\n ", " {\n background: transparent;\n border: none;\n margin: 0 10px;\n }\n }\n .controls-left{\n .video-time-display {\n display: flex;\n align-items: center;\n font-family: SFUIText-Regular;\n font-size: 12px;\n letter-spacing: -0.6px;\n .video-time {\n margin: 0 2px;\n &.video-end-time, &.video-time-seperator {\n color: #888888;\n }\n &.video-current-time {\n color: #ffffff;\n min-width: 64px;\n }\n }\n }\n }\n"])), _button["default"].Element);
36
+ var CommentBox = _styledComponents["default"].div(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n background-color: #333333;\n align-items: center;\n justify-content: space-between;\n ", " {\n height: 100%;\n color: #ccc;\n padding: 15px 10px 15px 20px;\n border-bottom: none;\n }\n ", " {\n margin: 0;\n background: #333333;\n border: none;\n ", " {\n svg {\n path {\n fill: #00cec6;\n }\n }\n }\n }\n"])), _inputText["default"].Element, _button["default"].Element, _icon["default"].Element);
37
+ var Carousal = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n height: 91px;\n background: #000000;\n"])));
38
+ var VideoDetailsWrapper = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n width: 36.33%;\n .tab-block {\n height: 100%;\n .tab-container {\n padding: 20px;\n text-align: left;\n .info-block {\n width: 33.33%;\n display: inline-block;\n padding-bottom: 25px;\n &:last-child{\n width: 100%;\n }\n .info-header {\n font-family: SFUIText-Regular;\n font-size: 10px;\n color: #666666;\n color: #cccccc;\n margin-bottom: 20px;\n }\n .info-value {\n font-family: SFUIText-Regular;\n font-size: 14px;\n color: #333333;\n color: #ffffff;\n }\n }\n &.scenes-tab {\n hr {\n border-color: #eeeeee;\n border-color: #4e5c6c;\n }\n .scenes-synopsis {\n .info-header {\n font-family: SFUIText-Regular;\n font-size: 12px;\n color: #333333;\n color: #cccccc;\n text-transform: uppercase;\n margin-bottom: 10px;\n }\n .synopsis {\n font-family: SFUIText-Regular;\n font-size: 12px;\n line-height: 1.33;\n color: #666666;\n color: #ffffff;\n margin-bottom: 10px;\n }\n }\n .scenes-wrapper {\n .scene-container{\n &:last-child {\n hr {\n display: none;\n }\n }\n .scene-block {\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n cursor: pointer;\n &:hover{\n .scene-image {\n ", " {\n display: inline-block;\n }\n }\n }\n .scene-image {\n width: 70px;\n height: 70px;\n border-radius: 100%;\n overflow: hidden;\n position: relative;\n ", " {\n display: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n }\n }\n .scene-details {\n margin-left: 15px;\n .scene-name {\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #333333;\n color: #ffffff;\n margin-bottom: 5px;\n }\n .scene-time {\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #888888;\n color: #aaaaaa;\n margin-bottom: 5px;\n }\n .scene-tags-block {\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n .scene-tags {\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: 1.17;\n letter-spacing: normal;\n color: #c7c5c5;\n color: #999999;\n margin-right: 5px;\n }\n }\n }\n }\n }\n }\n }\n &.comments-tab {\n padding: 0;\n position: relative;\n width: 100%;\n height: 100%;\n .comments-section {\n padding: 10px 0;\n height: calc(100% - 73px);\n overflow: auto;\n top: 0;\n position: absolute;\n left: 0;\n width: 100%;\n .comments-details {\n padding: 10px 20px 10px 20px;\n .comments-count {\n font-size: 14px;\n font-weight: normal;\n font-family: SFUIText-Regular;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #333333;\n color: #cccccc;\n }\n }\n .comments-container {\n .comment-wrapper {\n padding: 20px;\n cursor: pointer;\n &:hover {\n background: #f5f5f5;\n background: #304153;\n }\n .comment-block, .reply-block {\n .comment-header {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin-bottom: 10px;\n position: relative;\n z-index: 2;\n img {\n width: 30px;\n height: 30px;\n border-radius: 100%;\n left: auto;\n top: auto;\n transform: none;\n }\n .user-name {\n padding: 0px 20px 0px 10px;\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #333333;\n color: #ffffff;\n }\n .video-time {\n opacity: 0.8;\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #626260;\n color: #cccccc;\n text-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);\n }\n .comment-time {\n opacity: 0.2;\n opacity: 1;\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #000000;\n color: #aaaaaa;\n margin-left: 20px;\n }\n }\n .comment-body {\n p {\n font-family: SFUIText-Regular;\n font-size: 13px;\n font-weight: 300;\n font-style: normal;\n font-stretch: normal;\n line-height: 1.38;\n letter-spacing: normal;\n color: #333333;\n color: #ffffff;\n }\n }\n }\n .reply-wrapper {\n .reply-block {\n padding-left: 20px;\n padding-top: 15px;\n position: relative;\n &:after {\n content: '';\n position: absolute;\n width: 1px;\n height: 100%;\n background: #cccccc;\n background: #4e5c6c;\n top: 15px;\n z-index: 0;\n left: 35px;\n }\n &:last-child {\n &:after {\n display: none;\n }\n }\n .comment-body {\n padding-left: 40px;\n }\n }\n }\n }\n }\n }\n .approval-block {\n height: 73px;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n padding: 0 10px;\n background: #121d29;\n background: #ffffff;\n position: absolute;\n width: 100%;\n bottom: 0;\n ", " {\n font-size: 12px;\n margin: 0 10px;\n }\n }\n }\n &.tags-tab {\n .tag-header {\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #cccccc;\n }\n .characters-list {\n margin: 10px 0;\n .actor-tag {\n width: 70px;\n height: 70px;\n border-radius: 100%;\n background: #121d29;\n display: inline-block;\n vertical-align: middle;\n margin: 10px;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 1px solid transparent;\n &.actor-selected, &:hover {\n border: 1px solid #00cec6;\n .actor-name-wrapper {\n display: block;\n }\n }\n ", " {\n positon: absolute;\n }\n .actor-name-wrapper {\n display: none;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(0,0,0,0.8);\n .actor-name {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n width: 60px;\n text-align: center;\n font-family: SFUIText-Medium;\n font-size: 10px;\n letter-spacing: 0px;\n color: #ffffff;\n word-break: break-word;\n }\n }\n }\n }\n }\n }\n }\n"])), _icon["default"].Element, _icon["default"].Element, _button["default"].Element, _image["default"].Element);
39
+ var MarkerBlock = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n width: 100%;\n height: 10px;\n left:0;\n bottom: 15px;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n .scene-marker {\n background: #00cec6;\n position: relative;\n height: 100%;\n display: inline-block;\n vertical-align: top;\n }\n"])));
40
40
  var Player = /*#__PURE__*/function (_React$Component) {
41
41
  function Player(props) {
42
42
  var _this;
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.3.4",
3
+ "version": "9.3.6",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "9.3.4",
10
+ "@desynova-digital/tokens": "9.3.6",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },