feat(theme): ✨ Add chat theme settings
This commit is contained in:
Baptiste Arnaud
13
packages/bot-engine/src/assets/phone.css
Normal file
13
packages/bot-engine/src/assets/phone.css
Normal file
@ -0,0 +1,13 @@
|
||||
.PhoneInputInput {
|
||||
padding: 1rem 0.5rem;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.PhoneInputCountry {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.PhoneInputCountryIcon,
|
||||
.PhoneInputCountryIconImg {
|
||||
border-radius: 3px;
|
||||
}
|
||||
@ -6,38 +6,22 @@
|
||||
--typebot-container-bg-image: none;
|
||||
--typebot-container-bg-color: transparent;
|
||||
--typebot-container-font-family: 'Open Sans';
|
||||
--typebot-chat-view-max-width: 700px;
|
||||
--typebot-chat-view-color: #303235;
|
||||
|
||||
--typebot-button-active-bg-color: #0042da;
|
||||
--typebot-button-active-color: #ffffff;
|
||||
--typebot-button-inactive-bg-color: #edf2f7;
|
||||
--typebot-button-inactive-color: #303235;
|
||||
--typebot-button-border: 1px solid var(--typebot-button-active-bg-color);
|
||||
--typebot-button-shadow: none;
|
||||
--typebot-button-bg-color: #0042da;
|
||||
--typebot-button-color: #ffffff;
|
||||
|
||||
--typebot-host-bubble-bg-color: #f7f8ff;
|
||||
--typebot-host-bubble-color: #303235;
|
||||
--typebot-host-bubble-border: 1px solid var(--typebot-host-bubble-bg-color);
|
||||
--typebot-host-bubble-shadow: none;
|
||||
|
||||
--typebot-guest-bubble-bg-color: #ff8e21;
|
||||
--typebot-guest-bubble-color: #ffffff;
|
||||
--typebot-guest-bubble-border: 1px solid var(--typebot-guest-bubble-bg-color);
|
||||
--typebot-guest-bubble-shadow: none;
|
||||
|
||||
--typebot-input-bg-color: #ffffff;
|
||||
--typebot-input-color: #303235;
|
||||
--typebot-input-border: 1px solid var(--typebot-input-bg-color);
|
||||
--typebot-input-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--typebot-input-placeholder-color: #9095a0;
|
||||
|
||||
--typebot-header-bg-color: #ffffff;
|
||||
--typebot-header-color: #303235;
|
||||
--typebot-header-border: none;
|
||||
--typebot-header-shadow: none;
|
||||
--typebot-header-max-width: 1000px;
|
||||
|
||||
/* Phone input */
|
||||
--PhoneInputCountryFlag-borderColor: transparent;
|
||||
@ -55,12 +39,6 @@
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.StripeElement {
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
/* Transitions */
|
||||
.bubble-enter {
|
||||
opacity: 0;
|
||||
@ -149,159 +127,19 @@ textarea {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.comp-input::-webkit-input-placeholder {
|
||||
/* Chrome/Opera/Safari */
|
||||
.text-input::-webkit-input-placeholder {
|
||||
color: var(--typebot-input-placeholder-color) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.comp-input::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
.text-input::-moz-placeholder {
|
||||
color: var(--typebot-input-placeholder-color) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.comp-input::placeholder {
|
||||
.text-input::placeholder {
|
||||
color: var(--typebot-input-placeholder-color) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.PhoneInput {
|
||||
/* This is done to stretch the contents of this component. */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.PhoneInput > input {
|
||||
color: var(--typebot-input-color);
|
||||
background-color: var(--typebot-input-bg-color);
|
||||
}
|
||||
|
||||
.PhoneInput > input::placeholder {
|
||||
color: var(--typebot-input-placeholder-color) !important;
|
||||
}
|
||||
|
||||
.PhoneInputInput {
|
||||
/* The phone number input stretches to fill all empty space */
|
||||
flex: 1;
|
||||
/* The phone number input should shrink
|
||||
to make room for the extension input */
|
||||
min-width: 0;
|
||||
padding: 1rem 1rem 1rem 0;
|
||||
}
|
||||
|
||||
.PhoneInputInput:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.PhoneInputCountryIcon {
|
||||
width: calc(
|
||||
var(--PhoneInputCountryFlag-height) *
|
||||
var(--PhoneInputCountryFlag-aspectRatio)
|
||||
);
|
||||
height: var(--PhoneInputCountryFlag-height);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.PhoneInputCountryIcon--square {
|
||||
width: var(--PhoneInputCountryFlag-height);
|
||||
}
|
||||
|
||||
.PhoneInputCountryIcon--border {
|
||||
/* Removed `background-color` because when an `<img/>` was still loading
|
||||
it would show a dark gray rectangle. */
|
||||
/* For some reason the `<img/>` is not stretched to 100% width and height
|
||||
and sometime there can be seen white pixels of the background at top and bottom. */
|
||||
background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
|
||||
/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
|
||||
/* For some reason the `<img/>` is not stretched to 100% width and height
|
||||
and sometime there can be seen white pixels of the background at top and bottom,
|
||||
so an additional "inset" border is added. */
|
||||
box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
|
||||
var(--PhoneInputCountryFlag-borderColor),
|
||||
inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
|
||||
var(--PhoneInputCountryFlag-borderColor);
|
||||
}
|
||||
|
||||
.PhoneInputCountryIconImg {
|
||||
/* Fixes weird vertical space above the flag icon. */
|
||||
/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
|
||||
display: block;
|
||||
/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
|
||||
Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.PhoneInputInternationalIconPhone {
|
||||
opacity: var(--PhoneInputInternationalIconPhone-opacity);
|
||||
}
|
||||
|
||||
.PhoneInputInternationalIconGlobe {
|
||||
opacity: var(--PhoneInputInternationalIconGlobe-opacity);
|
||||
}
|
||||
|
||||
/* Styling native country `<select/>`. */
|
||||
|
||||
.PhoneInputCountry {
|
||||
position: relative;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.PhoneInputCountrySelect {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
border: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.PhoneInputCountrySelect[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.PhoneInputCountrySelectArrow {
|
||||
display: block;
|
||||
content: '';
|
||||
width: var(--PhoneInputCountrySelectArrow-width);
|
||||
height: var(--PhoneInputCountrySelectArrow-width);
|
||||
margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
|
||||
border-style: solid;
|
||||
border-color: var(--PhoneInputCountrySelectArrow-color);
|
||||
border-top-width: 0;
|
||||
border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
|
||||
border-left-width: 0;
|
||||
border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
|
||||
transform: var(--PhoneInputCountrySelectArrow-transform);
|
||||
opacity: var(--PhoneInputCountrySelectArrow-opacity);
|
||||
}
|
||||
|
||||
.PhoneInputCountrySelect:focus
|
||||
+ .PhoneInputCountryIcon
|
||||
+ .PhoneInputCountrySelectArrow {
|
||||
opacity: 1;
|
||||
color: var(--PhoneInputCountrySelectArrow-color--focus);
|
||||
}
|
||||
|
||||
.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.PhoneInputCountrySelect:focus
|
||||
+ .PhoneInputCountryIcon
|
||||
.PhoneInputInternationalIconGlobe {
|
||||
opacity: 1;
|
||||
color: var(--PhoneInputCountrySelectArrow-color--focus);
|
||||
}
|
||||
|
||||
.typebot-container {
|
||||
background-image: var(--typebot-container-bg-image);
|
||||
background-color: var(--typebot-container-bg-color);
|
||||
@ -311,28 +149,11 @@ textarea {
|
||||
.custom-header {
|
||||
color: var(--typebot-header-color);
|
||||
background-color: var(--typebot-header-bg-color);
|
||||
border-bottom: var(--typebot-header-border);
|
||||
box-shadow: var(--typebot-header-shadow);
|
||||
}
|
||||
|
||||
.custom-header-content {
|
||||
max-width: var(--typebot-header-max-width);
|
||||
}
|
||||
|
||||
.typebot-chat-view {
|
||||
max-width: var(--typebot-chat-view-max-width);
|
||||
}
|
||||
|
||||
.typebot-button.active {
|
||||
color: var(--typebot-button-active-color);
|
||||
background-color: var(--typebot-button-active-bg-color);
|
||||
}
|
||||
|
||||
.typebot-button {
|
||||
color: var(--typebot-button-inactive-color);
|
||||
background-color: var(--typebot-button-inactive-bg-color);
|
||||
border: var(--typebot-button-border);
|
||||
box-shadow: var(--typebot-button-shadow);
|
||||
color: var(--typebot-button-color);
|
||||
background-color: var(--typebot-button-bg-color);
|
||||
}
|
||||
|
||||
.typebot-host-bubble {
|
||||
@ -342,45 +163,23 @@ textarea {
|
||||
.typebot-host-bubble > .bubble-typing {
|
||||
background-color: var(--typebot-host-bubble-bg-color);
|
||||
border: var(--typebot-host-bubble-border);
|
||||
box-shadow: var(--typebot-host-bubble-shadow);
|
||||
}
|
||||
|
||||
.typebot-guest-bubble {
|
||||
color: var(--typebot-guest-bubble-color);
|
||||
background-color: var(--typebot-guest-bubble-bg-color);
|
||||
border: var(--typebot-guest-bubble-border);
|
||||
box-shadow: var(--typebot-guest-bubble-shadow);
|
||||
}
|
||||
|
||||
.typebot-input {
|
||||
color: var(--typebot-input-color);
|
||||
background-color: var(--typebot-input-bg-color);
|
||||
border: var(--typebot-input-border);
|
||||
box-shadow: var(--typebot-input-shadow);
|
||||
box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.typebot-button > .send-icon {
|
||||
fill: var(--typebot-button-active-color);
|
||||
}
|
||||
|
||||
.text-on-chat {
|
||||
color: var(--typebot-chat-view-color);
|
||||
}
|
||||
|
||||
.star-icon {
|
||||
cursor: pointer;
|
||||
fill: transparent;
|
||||
stroke-width: 30px;
|
||||
stroke: var(--typebot-button-active-bg-color);
|
||||
}
|
||||
|
||||
.star-icon.active {
|
||||
fill: var(--typebot-button-active-bg-color);
|
||||
}
|
||||
|
||||
.scale-labels {
|
||||
font-size: 13px;
|
||||
color: var(--typebot-button-active-bg-color);
|
||||
font-weight: 600;
|
||||
padding-right: 0.5rem;
|
||||
.typebot-chat-view {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user