@lobehub/editor/es/react/ChatInput/style.js

A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { createStaticStyles } from 'antd-style';
export var styles = createStaticStyles(function (_ref) {
  var css = _ref.css,
    cssVar = _ref.cssVar;
  return {
    bodyEditor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    z-index: 0;\n    flex: 1;\n  "]))),
    containerDark: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: ", ";\n\n    background-color: ", ";\n    box-shadow: 0 4px 4px color-mix(in srgb, #000 40%, transparent);\n  "])), cssVar.colorFillSecondary, cssVar.borderRadiusLG, cssVar.colorBgElevated),
    containerLight: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: ", ";\n\n    background-color: ", ";\n    box-shadow: 0 4px 4px color-mix(in srgb, #000 4%, transparent);\n  "])), cssVar.colorFill, cssVar.borderRadiusLG, cssVar.colorBgElevated),
    editor: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    cursor: text;\n\n    overflow: hidden auto;\n    flex: 1;\n\n    width: 100%;\n    padding-block: 8px 0;\n    padding-inline: 12px;\n  "]))),
    footer: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    z-index: 1;\n    width: 100%;\n  "]))),
    header: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    z-index: 1;\n    width: 100%;\n  "]))),
    resizableContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-self: flex-end;\n\n    width: 100%;\n\n    &:hover .resize-handle {\n      opacity: 1;\n    }\n  "]))),
    resizeHandle: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    position: absolute;\n    inset-block-start: -4px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: 100%;\n    height: 8px;\n\n    opacity: 0;\n\n    transition: opacity 0.2s ease-in-out;\n\n    &::before {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      width: 32px;\n      height: 4px;\n      border-radius: 4px;\n\n      background-color: ", ";\n      box-shadow: 0 1px 2px color-mix(in srgb, ", " 12.5%, transparent);\n    }\n\n    &:hover {\n      opacity: 1 !important;\n\n      &::before {\n        background-color: ", ";\n        box-shadow: 0 2px 4px color-mix(in srgb, ", " 25%, transparent);\n      }\n    }\n\n    &:active {\n      &::before {\n        background-color: ", ";\n      }\n    }\n  "])), cssVar.colorPrimary, cssVar.colorTextSecondary, cssVar.colorPrimaryHover, cssVar.colorTextSecondary, cssVar.colorPrimaryActive),
    root: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    position: relative;\n  "])))
  };
});