@atlaskit/editor-core/dist/cjs/ui/EditorContentContainer/styles/telepointerStyles.js

A package contains Atlassian editor core functionality

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.telepointerStyle = exports.telepointerColorAndCommonStyle = void 0;
var _react = require("@emotion/react");
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
/* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles */
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */

var pulseIn = (0, _react.keyframes)({
  '0%, 100%': {
    transform: 'scaleX(0)',
    opacity: 0
  },
  '10%': {
    transform: 'scaleX(1.4)',
    opacity: 1
  },
  '15%, 85%': {
    transform: 'scaleX(1)',
    opacity: 1
  }
});
var pulseOut = (0, _react.keyframes)({
  '0%, 90%, 100%': {
    transform: 'scaleX(1)',
    opacity: 1
  },
  '10%, 80%': {
    transform: 'scaleX(0)',
    opacity: 0
  }
});
var pulseInDuringTr = (0, _react.keyframes)({
  '0%, 95%': {
    transform: 'scaleX(1)',
    opacity: 1
  },
  '100%': {
    transform: 'scaleX(0)',
    opacity: 0
  }
});
var pulseOutDuringTr = (0, _react.keyframes)({
  '100%': {
    transform: 'scaleX(1)',
    opacity: 1
  },
  '0%, 90%': {
    transform: 'scaleX(0)',
    opacity: 0
  }
});
var telepointerColorAndCommonStyle = exports.telepointerColorAndCommonStyle = (0, _react.css)({
  '.ProseMirror .telepointer': {
    position: 'relative',
    transition: 'opacity 200ms',
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
    '&.telepointer-selection:not(.inlineNodeView)': {
      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
      lineHeight: 1.2,
      pointerEvents: 'none',
      userSelect: 'none'
    },
    '&.telepointer-dim': {
      opacity: 0.2
    },
    '&.color-0': {
      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-red-bolder, #C9372C)"
    },
    '&.color-1': {
      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-bolder, #1868DB)"
    },
    '&.color-2': {
      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-green-bolder, #1F845A)"
    },
    '&.color-3': {
      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-bolder, #946F00)"
    },
    '&.color-4': {
      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-bolder, #964AC0)"
    },
    '&.color-5': {
      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-bolder, #AE4787)"
    },
    '&.color-6': {
      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-bolder, #227D9B)"
    },
    '&.color-7': {
      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-bolder, #BD5B00)"
    },
    '&.color-8': {
      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-lime-bolder, #5B7F24)"
    },
    '&.color-9': {
      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-gray-bolder, #6B6E76)"
    },
    '&.color-10': {
      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-subtle, #669DF1)"
    },
    '&.color-11': {
      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-red-subtle, #F87168)"
    },
    '&.color-12': {
      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-subtle, #FCA700)"
    },
    '&.color-13': {
      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-subtle, #EED12B)"
    },
    '&.color-14': {
      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-green-subtle, #4BCE97)"
    },
    '&.color-15': {
      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-subtle, #6CC3E0)"
    },
    '&.color-16': {
      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-subtle, #C97CF4)"
    },
    '&.color-17': {
      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
      '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-subtle, #E774BB)"
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
    'html:not([data-color-mode=dark]) &': {
      '--telepointer-participant-background-first-stop': '-850000%',
      '--telepointer-participant-background-second-stop': '150000%'
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
    'html[data-color-mode=dark] &': {
      '--telepointer-participant-background-first-stop': '-800000%',
      '--telepointer-participant-background-second-stop': '200000%'
    },
    '&[class*="color-"]': {
      background: 'linear-gradient(to bottom, var(--telepointer-participant-bg-color) var(--telepointer-participant-background-first-stop), transparent var(--telepointer-participant-background-second-stop))',
      '&::after': {
        backgroundColor: 'var(--telepointer-participant-bg-color)',
        color: 'var(--telepointer-participant-text-color)',
        borderColor: 'var(--telepointer-participant-bg-color)'
      }
    }
  }
});
var telepointerStyle = exports.telepointerStyle = (0, _react.css)({
  '.ProseMirror .telepointer': {
    '&.telepointer-selection-badge': {
      '.telepointer-initial, .telepointer-fullname': {
        position: 'absolute',
        display: 'block',
        userSelect: 'none',
        whiteSpace: 'pre',
        top: -14,
        left: 0,
        font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
        paddingLeft: "var(--ds-space-050, 4px)",
        paddingRight: "var(--ds-space-050, 4px)",
        borderRadius: "0 ".concat("var(--ds-radius-xsmall, 2px)", " ", "var(--ds-radius-xsmall, 2px)", " 0")
      },
      '.telepointer-initial': {
        opacity: 1,
        transition: 'opacity 0.15s ease-out'
      },
      '.telepointer-fullname': {
        opacity: 0,
        transform: 'scaleX(0)',
        transformOrigin: 'top left',
        transition: 'transform 0.15s ease-out, opacity 0.15s ease-out'
      }
    },
    '&.telepointer-pulse-animate': {
      '.telepointer-initial': {
        animation: "".concat(pulseOut, " 2.5s ease-in-out")
      },
      '.telepointer-fullname': {
        animation: "".concat(pulseIn, " 2.5s ease-in-out")
      }
    },
    '&.telepointer-pulse-during-tr': {
      '.telepointer-initial': {
        animation: "".concat(pulseOutDuringTr, " 7500ms ease-in-out")
      },
      '.telepointer-fullname': {
        animation: "".concat(pulseInDuringTr, " 7500ms ease-in-out")
      }
    },
    '&:hover': {
      '.telepointer-initial': {
        opacity: 0,
        transitionDelay: '150ms'
      },
      '.telepointer-fullname': {
        transform: 'scaleX(1)',
        opacity: 1,
        zIndex: 1
      }
    }
  }
});