@syncfusion/ej2-material-theme
Version:
A modern JavaScript UI toolkit that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It is written in TypeScript and has no external dependencies.
398 lines • 13.3 kB
CSS
.e-inline-send::before {
content: "\e816";
}
.e-inline-accept::before {
content: "\e96d";
}
.e-inline-discard::before {
content: "\e7fc";
}
.e-inline-stop::before {
content: "\e9de";
}
.e-inlineaiassist {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
.e-inlineaiassist.e-popup {
-ms-flex-pack: center;
justify-content: center;
border-radius: 8px;
}
.e-inlineaiassist .e-inline-assist-popup {
border-radius: 8px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.e-inlineaiassist .e-inline-assist-content {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.e-inlineaiassist .e-content:has(.e-output-container) {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 auto;
padding: 12px 12px 16px 12px;
border-radius: 8px 8px 0 0;
}
.e-inlineaiassist .e-response-text {
line-height: 22px;
font-size: 14px;
word-wrap: break-word;
}
.e-inlineaiassist .e-toolbar .e-toolbar-items .e-tbar-btn {
cursor: pointer;
}
.e-inlineaiassist .e-toolbar .e-toolbar-items .e-tbar-btn:hover, .e-inlineaiassist .e-toolbar .e-toolbar-items .e-tbar-btn:focus, .e-inlineaiassist .e-toolbar .e-toolbar-items .e-tbar-btn:active {
padding: 0 8px;
}
.e-inlineaiassist .e-footer {
position: relative;
width: 100%;
}
.e-inlineaiassist .e-footer .e-assist-textarea::-webkit-scrollbar-thumb {
border-radius: 10px;
}
.e-inlineaiassist .e-footer .e-assist-textarea::-webkit-scrollbar {
width: 4px;
}
.e-inlineaiassist .e-footer .hide-scrollbar .e-assist-textarea {
scrollbar-width: none;
}
.e-inlineaiassist .e-footer .e-inline-stop {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 14px;
font-size: 14px;
height: 32px;
width: 32px;
padding: 6px;
opacity: 1;
pointer-events: auto;
cursor: pointer;
border-radius: 100px;
}
.e-inlineaiassist .e-footer .e-inline-stop:focus-visible {
outline: 1px solid;
}
.e-inlineaiassist .e-footer.e-footer-expanded.e-toolbar-inline .e-footer-icons-wrapper .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right {
position: absolute;
}
.e-inlineaiassist .e-footer:not(.e-footer-expanded).e-toolbar-inline .e-footer-icons-wrapper {
width: -moz-fit-content;
width: fit-content;
}
.e-inlineaiassist .e-footer:not(.e-footer-expanded).e-toolbar-inline .e-footer-icons-wrapper .e-toolbar-items.e-tbar-pos .e-toolbar-right {
position: unset;
}
.e-inlineaiassist .e-footer:not(.e-footer-expanded).e-toolbar-inline .e-footer-icons-wrapper .e-toolbar-items.e-tbar-pos .e-toolbar-center {
position: absolute;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 0;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar {
width: 100%;
min-height: 28px;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
padding: unset;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-tbar-btn {
min-height: 28px;
min-width: 28px;
max-width: 28px;
cursor: default;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-tbar-btn:focus {
padding: 0;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-tbar-btn:has(.e-inline-stop) {
max-width: 28px;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-tbar-btn:has(.e-inline-stop) .e-btn-icon {
min-width: 28px;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-right .e-toolbar-item:last-child {
margin-right: 0;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item {
min-height: unset;
min-width: unset;
max-height: 28px;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible .e-icons:not(.disabled) {
outline: 1px solid;
padding: 4px;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-icons {
cursor: pointer;
}
.e-inlineaiassist .e-footer .e-assist-textarea {
height: 100%;
width: 100%;
min-height: 40px;
outline: none;
overflow-y: auto;
max-height: 280px;
line-height: 22px;
padding: 9px 12px;
font-size: 14px;
}
.e-inlineaiassist .e-footer .e-assist-textarea[placeholder]:empty::before {
content: attr(placeholder);
cursor: text;
}
.e-inlineaiassist .e-footer .e-assist-textarea.e-response-indicator-active {
cursor: default;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.e-inlineaiassist .e-footer .e-assist-response-indicator {
display: -ms-flexbox;
display: flex;
-ms-flex-align: baseline;
align-items: baseline;
gap: 2px;
}
.e-inlineaiassist .e-footer .e-assist-response-indicator .e-assist-indicator {
border-radius: 9999px;
height: 0.3rem;
width: 0.3rem;
}
.e-inlineaiassist .e-footer .e-assist-response-indicator .e-assist-indicator:nth-child(1) {
animation-delay: 0.3333s;
}
.e-inlineaiassist .e-footer .e-assist-response-indicator .e-assist-indicator:nth-child(2) {
animation-delay: 0.6666s;
}
.e-inlineaiassist .e-footer .e-assist-response-indicator .e-assist-indicator:nth-child(3) {
animation-delay: 0.9999s;
}
.e-inlineaiassist .e-footer .e-assist-response-indicator .e-assist-indicator-text {
font-size: 14px;
}
.e-inlineaiassist .e-footer:not(.e-footer-template) {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 4px;
}
.e-inlineaiassist .e-footer:not(.e-footer-template).e-footer-expanded .e-textarea-icons-wrapper {
display: block;
}
.e-inlineaiassist .e-footer:not(.e-footer-template).e-footer-expanded .e-textarea-icons-wrapper .e-footer-icons-wrapper {
padding: 6px 12px;
-ms-flex-pack: end;
justify-content: end;
}
.e-inlineaiassist .e-footer:not(.e-footer-template).e-footer-expanded .e-textarea-icons-wrapper .e-assist-textarea {
width: 100%;
}
.e-inlineaiassist .e-footer:not(.e-footer-template).e-toolbar-bottom .e-textarea-icons-wrapper {
display: block;
}
.e-inlineaiassist .e-footer:not(.e-footer-template).e-toolbar-bottom .e-textarea-icons-wrapper .e-footer-icons-wrapper {
padding: 6px 12px;
}
.e-inlineaiassist .e-footer:not(.e-footer-template).e-toolbar-bottom .e-textarea-icons-wrapper .e-footer-icons-wrapper .e-toolbar {
width: 100%;
}
.e-inlineaiassist .e-footer:not(.e-footer-template).e-toolbar-bottom .e-textarea-icons-wrapper .e-footer-icons-wrapper .e-toolbar .e-toolbar-left .e-toolbar-item:first-child {
margin-left: unset;
}
.e-inlineaiassist .e-footer:not(.e-footer-template) .e-inline-send {
font-size: 12px;
}
.e-inlineaiassist .e-footer:not(.e-footer-template) .e-inline-send.disabled {
pointer-events: none;
opacity: 0.5;
cursor: not-allowed;
}
.e-inlineaiassist .e-footer:not(.e-footer-template) .e-inline-send.enabled {
pointer-events: auto;
opacity: 1;
cursor: pointer;
}
.e-inlineaiassist .e-footer:not(.e-footer-template) .e-textarea-icons-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
}
.e-inlineaiassist .e-footer .e-hidden-textarea {
display: none;
}
.e-mention-container.e-popup {
border-radius: 4px;
}
.e-mention-container .e-dropdownbase .e-list-item {
margin-bottom: 0;
}
.e-inlineaiassist {
background: #fff;
box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2);
}
.e-inlineaiassist.e-popup {
border: 1px solid #9e9e9e;
}
.e-inlineaiassist .e-response-text {
color: rgba(0, 0, 0, 0.87);
}
.e-inlineaiassist .e-toolbar-item::after {
background-color: transparent;
}
.e-inlineaiassist .e-toolbar,
.e-inlineaiassist .e-toolbar-items,
.e-inlineaiassist .e-toolbar .e-toolbar-items .e-tbar-btn {
background: transparent;
border: none;
box-shadow: none;
}
.e-inlineaiassist .e-footer {
background: #fff;
}
.e-inlineaiassist .e-footer .e-assist-textarea::-webkit-scrollbar-thumb {
background: rgb(153, 153, 153);
}
.e-inlineaiassist .e-footer .e-assist-textarea[placeholder]:empty::before {
color: rgba(0, 0, 0, 0.54);
}
.e-inlineaiassist .e-footer:not(.e-footer-template).e-footer-focused {
border-bottom-color: rgb(97, 97, 97);
}
.e-inlineaiassist .e-footer:not(.e-footer-template) .e-inline-send {
color: rgba(0, 0, 0, 0.54);
}
.e-inlineaiassist .e-footer:not(.e-footer-template) .e-inline-send.disabled {
color: rgba(0, 0, 0, 0.54);
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item {
background: transparent;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
box-shadow: none;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(:focus-visible), .e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item .e-tbar-btn:active {
background: transparent;
box-shadow: none;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(:focus-visible) .e-icons, .e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item .e-tbar-btn:active .e-icons {
color: rgba(0, 0, 0, 0.54);
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(:focus-visible) .e-icons.disabled, .e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item .e-tbar-btn:active .e-icons.disabled {
color: rgba(0, 0, 0, 0.54);
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(:focus-visible) .e-inline-stop, .e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item .e-tbar-btn:active .e-inline-stop {
color: #3f51b5;
}
.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item .e-tbar-btn:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
background: transparent;
}
.e-inlineaiassist .e-footer .e-inline-stop.e-icons {
color: #3f51b5;
background-color: #c5cae9;
}
.e-inlineaiassist .e-content:has(.e-output-container) {
background: #fff;
border-bottom: 1px solid #9e9e9e;
}
.e-inlineaiassist .e-assist-indicator {
background: #f5f5f5;
animation: e-inline-indicator-blink 1s infinite;
}
.e-inlineaiassist .e-assist-indicator-text {
color: rgba(0, 0, 0, 0.54);
}
@keyframes e-inline-indicator-blink {
50% {
background: #3f51b5;
height: 0.2rem;
}
}
.e-inlineaiassist-selected-text {
background: #3f51b5;
color: rgba(0, 0, 0, 0.87);
}
.e-bigger.e-inlineaiassist .e-footer .e-inline-stop,
.e-bigger .e-inlineaiassist .e-footer .e-inline-stop {
height: 36px;
width: 36px;
min-height: 36px;
padding: 11px;
box-sizing: border-box;
line-height: 20px;
font-size: 16px;
}
.e-bigger.e-inlineaiassist .e-footer:not(.e-footer-template) .e-inline-send,
.e-bigger .e-inlineaiassist .e-footer:not(.e-footer-template) .e-inline-send {
font-size: 16px;
}
.e-bigger.e-inlineaiassist .e-footer:not(.e-footer-template).e-toolbar-bottom .e-textarea-icons-wrapper .e-footer-icons-wrapper,
.e-bigger .e-inlineaiassist .e-footer:not(.e-footer-template).e-toolbar-bottom .e-textarea-icons-wrapper .e-footer-icons-wrapper {
padding: 10px 12px;
}
.e-bigger.e-inlineaiassist .e-footer .e-footer-icons-wrapper,
.e-bigger .e-inlineaiassist .e-footer .e-footer-icons-wrapper {
padding: 10px 12px 10px 0;
padding-left: 0;
}
.e-bigger.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar,
.e-bigger .e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar {
min-height: 36px;
}
.e-bigger.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-tbar-btn,
.e-bigger .e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-tbar-btn {
min-height: 36px;
min-width: 36px;
max-width: 36px;
}
.e-bigger.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-tbar-btn:has(.e-inline-stop),
.e-bigger .e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-tbar-btn:has(.e-inline-stop) {
max-width: 36px;
}
.e-bigger.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-tbar-btn:has(.e-inline-stop) .e-btn-icon,
.e-bigger .e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-tbar-btn:has(.e-inline-stop) .e-btn-icon {
min-width: 36px;
}
.e-bigger.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item,
.e-bigger .e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-item {
min-height: unset;
min-width: unset;
max-height: 36px;
}
.e-bigger.e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-right .e-toolbar-item:last-child,
.e-bigger .e-inlineaiassist .e-footer .e-footer-icons-wrapper .e-toolbar .e-toolbar-right .e-toolbar-item:last-child {
margin-right: 0;
}
.e-bigger.e-inlineaiassist .e-footer .e-assist-textarea,
.e-bigger .e-inlineaiassist .e-footer .e-assist-textarea {
min-height: 56px;
line-height: 24px;
padding: 16px 12px;
font-size: 16px;
}