From dd2cb514dec6244926b97fa65c26c3530709bd24 Mon Sep 17 00:00:00 2001 From: "xujingli.xjl" Date: Tue, 12 Nov 2024 11:43:44 +0800 Subject: [PATCH] fix: change chatbot background & message style --- .../src/chat-view/components/input/icon.tsx | 5 - .../chat-view/components/message/index.less | 12 +- .../src/chat-view/components/text/index.less | 3 + .../magent-chat/src/chat-view/index.less | 9 +- .../magent-chat/src/chat-view/view.tsx | 2 +- web-packages/magent-flow/src/tailwind.out.css | 730 ++++-------------- 6 files changed, 163 insertions(+), 598 deletions(-) diff --git a/web-packages/magent-chat/src/chat-view/components/input/icon.tsx b/web-packages/magent-chat/src/chat-view/components/input/icon.tsx index 0778c36b..abf43628 100644 --- a/web-packages/magent-chat/src/chat-view/components/input/icon.tsx +++ b/web-packages/magent-chat/src/chat-view/components/input/icon.tsx @@ -9,7 +9,6 @@ export const SendIcon: React.FC = () => ( xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" > - 发送-实色备份 2 ( xmlnsXlink="http://www.w3.org/1999/xlink" transform="translate(0, 3)" > - Icon/01-Line/1-example ( xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" > - 5J音波,音频 ( xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" > - 符号-视频 ( xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" > - folder :first-child { width: 100%; diff --git a/web-packages/magent-chat/src/chat-view/components/text/index.less b/web-packages/magent-chat/src/chat-view/components/text/index.less index f64faf9e..b7c85ccd 100644 --- a/web-packages/magent-chat/src/chat-view/components/text/index.less +++ b/web-packages/magent-chat/src/chat-view/components/text/index.less @@ -7,9 +7,12 @@ // flex: 1 1; overflow: hidden; max-width: 420px; + font-size: 14px; } .text-message-textPop { display: inline-block; padding: 12px 16px; + color: rgba(0, 0, 0, 88%); + word-break: break-word; } diff --git a/web-packages/magent-chat/src/chat-view/index.less b/web-packages/magent-chat/src/chat-view/index.less index 9b4f9b62..f0c6f530 100644 --- a/web-packages/magent-chat/src/chat-view/index.less +++ b/web-packages/magent-chat/src/chat-view/index.less @@ -14,6 +14,9 @@ flex-direction: column; font-size: 12px; box-sizing: border-box; + border-radius: 8px; + background: url('https://mdn.alipayobjects.com/huamei_je4oko/afts/img/A*RGzYTpUgRpcAAAAAAAAAAAAADsZ-AQ/original') + no-repeat center center/cover; &-list { overflow-y: auto; @@ -34,8 +37,8 @@ &-input { width: 100%; position: relative; - background-color: var(--mana-color-bg-container); - padding-top: 4px; + background-color: transparent; + padding-top: 16px; &-mask { height: 48px; @@ -65,7 +68,7 @@ } &-footer { - background-color: var(--mana-color-bg-container); + background-color: transparent; color: rgba(29, 28, 35, 35%); font-weight: 400; line-height: 16px; diff --git a/web-packages/magent-chat/src/chat-view/view.tsx b/web-packages/magent-chat/src/chat-view/view.tsx index 2df4ec2a..66eec901 100644 --- a/web-packages/magent-chat/src/chat-view/view.tsx +++ b/web-packages/magent-chat/src/chat-view/view.tsx @@ -92,7 +92,7 @@ const DefaultInput = () => { const instance = useInject(ViewInstance); return ( <> -
+ {/*
*/}
instance.sendMessage(v)} />
diff --git a/web-packages/magent-flow/src/tailwind.out.css b/web-packages/magent-flow/src/tailwind.out.css index e1b77977..0cdf443c 100644 --- a/web-packages/magent-flow/src/tailwind.out.css +++ b/web-packages/magent-flow/src/tailwind.out.css @@ -51,7 +51,7 @@ --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; - --tw-contain-style: ; + --tw-contain-style: } ::backdrop { @@ -105,1061 +105,615 @@ --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; - --tw-contain-style: ; -} - -/* ! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com */ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ - -html, -:host { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ - -webkit-tap-highlight-color: transparent; - /* 7 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-feature-settings: normal; - /* 2 */ - font-variation-settings: normal; - /* 3 */ - font-size: 1em; - /* 4 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - letter-spacing: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden]:where(:not([hidden="until-found"])) { - display: none; + --tw-contain-style: } .pointer-events-none { - pointer-events: none; + pointer-events: none } .visible { - visibility: visible; + visibility: visible } .static { - position: static; + position: static } .\!absolute { - position: absolute !important; + position: absolute !important } .absolute { - position: absolute; + position: absolute } .relative { - position: relative; + position: relative } .\!bottom-14 { - bottom: 3.5rem !important; + bottom: 3.5rem !important } .\!left-4 { - left: 1rem !important; + left: 1rem !important } .left-0 { - left: 0px; + left: 0px } .top-0 { - top: 0px; + top: 0px } .z-10 { - z-index: 10; + z-index: 10 } .z-\[999999\] { - z-index: 999999; + z-index: 999999 } .z-\[9\] { - z-index: 9; + z-index: 9 } .\!m-0 { - margin: 0px !important; + margin: 0px !important } .m-3 { - margin: 0.75rem; + margin: 0.75rem } .my-1 { margin-top: 0.25rem; - margin-bottom: 0.25rem; + margin-bottom: 0.25rem } .-ml-0\.5 { - margin-left: -0.125rem; + margin-left: -0.125rem } .-mr-0\.5 { - margin-right: -0.125rem; + margin-right: -0.125rem } .mb-2 { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem } .mb-3 { - margin-bottom: 0.75rem; + margin-bottom: 0.75rem } .mb-\[-10px\] { - margin-bottom: -10px; + margin-bottom: -10px } .ml-1 { - margin-left: 0.25rem; + margin-left: 0.25rem } .ml-2 { - margin-left: 0.5rem; + margin-left: 0.5rem } .ml-3 { - margin-left: 0.75rem; + margin-left: 0.75rem } .mr-2 { - margin-right: 0.5rem; + margin-right: 0.5rem } .mt-3 { - margin-top: 0.75rem; + margin-top: 0.75rem } .block { - display: block; + display: block } .inline { - display: inline; + display: inline } .flex { - display: flex; + display: flex } .inline-flex { - display: inline-flex; + display: inline-flex } .hidden { - display: none; + display: none } .\!h-\[14px\] { - height: 14px !important; + height: 14px !important } .\!h-\[72px\] { - height: 72px !important; + height: 72px !important } .h-0 { - height: 0px; + height: 0px } .h-10 { - height: 2.5rem; + height: 2.5rem } .h-3 { - height: 0.75rem; + height: 0.75rem } .h-6 { - height: 1.5rem; + height: 1.5rem } .h-8 { - height: 2rem; + height: 2rem } .h-\[14px\] { - height: 14px; + height: 14px } .h-\[200px\] { - height: 200px; + height: 200px } .h-\[22px\] { - height: 22px; + height: 22px } .h-full { - height: 100%; + height: 100% } .h-px { - height: 1px; + height: 1px } .\!w-\[102px\] { - width: 102px !important; + width: 102px !important } .\!w-\[14px\] { - width: 14px !important; + width: 14px !important } .w-0 { - width: 0px; + width: 0px } .w-3 { - width: 0.75rem; + width: 0.75rem } .w-\[14px\] { - width: 14px; + width: 14px } .w-\[200px\] { - width: 200px; + width: 200px } .w-\[20px\] { - width: 20px; + width: 20px } .w-\[240px\] { - width: 240px; + width: 240px } .w-\[260px\] { - width: 260px; + width: 260px } .w-\[520px\] { - width: 520px; + width: 520px } .w-\[60px\] { - width: 60px; + width: 60px } .w-\[80px\] { - width: 80px; + width: 80px } .w-full { - width: 100%; + width: 100% } .w-screen { - width: 100vw; + width: 100vw } .flex-1 { - flex: 1 1 0%; + flex: 1 1 0% } .grow { - flex-grow: 1; + flex-grow: 1 } .-translate-x-1 { --tw-translate-x: -0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .translate-y-\[calc\(-100\%-3px\)\] { --tw-translate-y: calc(-100% - 3px); - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .cursor-grabbing { - cursor: grabbing; + cursor: grabbing } .cursor-not-allowed { - cursor: not-allowed; + cursor: not-allowed } .cursor-pointer { - cursor: pointer; + cursor: pointer } .select-none { -webkit-user-select: none; -moz-user-select: none; - user-select: none; + user-select: none } .flex-col { - flex-direction: column; + flex-direction: column } .items-center { - align-items: center; + align-items: center } .justify-center { - justify-content: center; + justify-content: center } .justify-between { - justify-content: space-between; + justify-content: space-between } .justify-around { - justify-content: space-around; + justify-content: space-around } .gap-1 { - gap: 0.25rem; + gap: 0.25rem } .gap-2 { - gap: 0.5rem; + gap: 0.5rem } .gap-8 { - gap: 2rem; + gap: 2rem } .overflow-auto { - overflow: auto; + overflow: auto } .overflow-y-auto { - overflow-y: auto; + overflow-y: auto } .overflow-x-hidden { - overflow-x: hidden; + overflow-x: hidden } .truncate { overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; + white-space: nowrap } .\!rounded-lg { - border-radius: 0.5rem !important; + border-radius: 0.5rem !important } .rounded { - border-radius: 0.25rem; + border-radius: 0.25rem } .rounded-\[5px\] { - border-radius: 5px; + border-radius: 5px } .rounded-full { - border-radius: 9999px; + border-radius: 9999px } .rounded-lg { - border-radius: 0.5rem; + border-radius: 0.5rem } .rounded-md { - border-radius: 0.375rem; + border-radius: 0.375rem } .rounded-xl { - border-radius: 0.75rem; + border-radius: 0.75rem } .rounded-t-lg { border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; + border-top-right-radius: 0.5rem } .\!border-\[0\.5px\] { - border-width: 0.5px !important; + border-width: 0.5px !important } .border-2 { - border-width: 2px; + border-width: 2px } .border-\[0\.5px\] { - border-width: 0.5px; + border-width: 0.5px } .border-blue-500 { --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); + border-color: rgb(59 130 246 / var(--tw-border-opacity)) } .border-gray-200 { --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); + border-color: rgb(229 231 235 / var(--tw-border-opacity)) } .border-transparent { - border-color: transparent; + border-color: transparent } .\!bg-gray-50 { --tw-bg-opacity: 1 !important; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important } .bg-blue-100 { --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity)); + background-color: rgb(219 234 254 / var(--tw-bg-opacity)) } .bg-blue-400 { --tw-bg-opacity: 1; - background-color: rgb(96 165 250 / var(--tw-bg-opacity)); + background-color: rgb(96 165 250 / var(--tw-bg-opacity)) } .bg-blue-50 { --tw-bg-opacity: 1; - background-color: rgb(239 246 255 / var(--tw-bg-opacity)); + background-color: rgb(239 246 255 / var(--tw-bg-opacity)) } .bg-gray-100 { --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + background-color: rgb(243 244 246 / var(--tw-bg-opacity)) } .bg-gray-200 { --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); + background-color: rgb(229 231 235 / var(--tw-bg-opacity)) } .bg-gray-50 { --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); + background-color: rgb(249 250 251 / var(--tw-bg-opacity)) } .bg-green-50 { --tw-bg-opacity: 1; - background-color: rgb(240 253 244 / var(--tw-bg-opacity)); + background-color: rgb(240 253 244 / var(--tw-bg-opacity)) } .bg-red-50 { --tw-bg-opacity: 1; - background-color: rgb(254 242 242 / var(--tw-bg-opacity)); + background-color: rgb(254 242 242 / var(--tw-bg-opacity)) } .bg-white { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .bg-yellow-50 { --tw-bg-opacity: 1; - background-color: rgb(254 252 232 / var(--tw-bg-opacity)); + background-color: rgb(254 252 232 / var(--tw-bg-opacity)) } .p-1 { - padding: 0.25rem; + padding: 0.25rem } .p-2 { - padding: 0.5rem; + padding: 0.5rem } .p-3 { - padding: 0.75rem; + padding: 0.75rem } .p-5 { - padding: 1.25rem; + padding: 1.25rem } .px-0\.5 { padding-left: 0.125rem; - padding-right: 0.125rem; + padding-right: 0.125rem } .px-2 { padding-left: 0.5rem; - padding-right: 0.5rem; + padding-right: 0.5rem } .px-3 { padding-left: 0.75rem; - padding-right: 0.75rem; + padding-right: 0.75rem } .pb-1 { - padding-bottom: 0.25rem; + padding-bottom: 0.25rem } .pb-2 { - padding-bottom: 0.5rem; + padding-bottom: 0.5rem } .align-middle { - vertical-align: middle; + vertical-align: middle } .text-\[13px\] { - font-size: 13px; + font-size: 13px } .text-sm { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .text-xs { font-size: 0.75rem; - line-height: 1rem; + line-height: 1rem } .font-medium { - font-weight: 500; + font-weight: 500 } .font-semibold { - font-weight: 600; + font-weight: 600 } .leading-5 { - line-height: 1.25rem; + line-height: 1.25rem } .leading-6 { - line-height: 1.5rem; + line-height: 1.5rem } .text-\[\#155EEF\] { --tw-text-opacity: 1; - color: rgb(21 94 239 / var(--tw-text-opacity)); + color: rgb(21 94 239 / var(--tw-text-opacity)) } .text-\[\#2970FF\] { --tw-text-opacity: 1; - color: rgb(41 112 255 / var(--tw-text-opacity)); + color: rgb(41 112 255 / var(--tw-text-opacity)) } .text-\[\#444CE7\] { --tw-text-opacity: 1; - color: rgb(68 76 231 / var(--tw-text-opacity)); + color: rgb(68 76 231 / var(--tw-text-opacity)) } .text-blue-500 { --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); + color: rgb(59 130 246 / var(--tw-text-opacity)) } .text-gray-300 { --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); + color: rgb(209 213 219 / var(--tw-text-opacity)) } .text-gray-400 { --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); + color: rgb(156 163 175 / var(--tw-text-opacity)) } .text-gray-50 { --tw-text-opacity: 1; - color: rgb(249 250 251 / var(--tw-text-opacity)); + color: rgb(249 250 251 / var(--tw-text-opacity)) } .text-gray-700 { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity)) } .text-gray-800 { --tw-text-opacity: 1; - color: rgb(31 41 55 / var(--tw-text-opacity)); + color: rgb(31 41 55 / var(--tw-text-opacity)) } .text-gray-900 { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } .opacity-30 { - opacity: 0.3; + opacity: 0.3 } .\!shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important; --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important } .shadow-2xl { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .shadow-card { --tw-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.08), 0 3px 8px 3px rgba(0, 0, 0, 0.05);; --tw-shadow-colored: 0 3px 8px 0 var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color), 0 3px 8px 3px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .outline-none { outline: 2px solid transparent; - outline-offset: 2px; + outline-offset: 2px } .filter { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .hover\:bg-gray-50:hover { --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); + background-color: rgb(249 250 251 / var(--tw-bg-opacity)) } .hover\:shadow-2xl:hover { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .hover\:shadow-card-lg:hover { --tw-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);; --tw-shadow-colored: 0 1px 2px -2px var(--tw-shadow-color), 0 3px 6px 0 var(--tw-shadow-color), 0 5px 12px 4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) }