2022-02-25 10:48:18 +00:00
|
|
|
export const SDK_CSS = `
|
|
|
|
:root {
|
|
|
|
--b-100: #F2F3F7;
|
|
|
|
}
|
|
|
|
|
|
|
|
.woot-widget-holder {
|
|
|
|
box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
|
2019-11-12 04:16:30 +00:00
|
|
|
opacity: 1;
|
2021-08-14 03:10:29 +00:00
|
|
|
will-change: transform, opacity;
|
|
|
|
transform: translateY(0);
|
2020-08-09 10:37:32 +00:00
|
|
|
overflow: hidden !important;
|
|
|
|
position: fixed !important;
|
2021-08-14 03:10:29 +00:00
|
|
|
transition: opacity 0.2s linear, transform 0.25s linear;
|
2020-08-09 10:37:32 +00:00
|
|
|
z-index: 2147483000 !important;
|
|
|
|
}
|
|
|
|
|
2022-02-25 10:48:18 +00:00
|
|
|
.woot-widget-holder.woot-widget-holder--flat {
|
|
|
|
box-shadow: none;
|
|
|
|
border-radius: 0;
|
|
|
|
border: 1px solid var(--b-100);
|
|
|
|
}
|
|
|
|
|
2020-08-09 10:37:32 +00:00
|
|
|
.woot-widget-holder iframe {
|
|
|
|
border: 0;
|
|
|
|
height: 100% !important;
|
|
|
|
width: 100% !important;
|
2021-08-07 06:26:15 +00:00
|
|
|
max-height: 100vh !important;
|
2019-10-29 07:20:54 +00:00
|
|
|
}
|
|
|
|
|
2020-07-07 18:34:44 +00:00
|
|
|
.woot-widget-holder.has-unread-view {
|
|
|
|
border-radius: 0 !important;
|
2022-03-16 09:15:57 +00:00
|
|
|
min-height: 80px !important;
|
2022-01-12 20:27:16 +00:00
|
|
|
height: auto;
|
2020-07-07 18:34:44 +00:00
|
|
|
bottom: 94px;
|
2020-08-09 10:37:32 +00:00
|
|
|
box-shadow: none !important;
|
2022-02-25 10:48:18 +00:00
|
|
|
border: 0;
|
2020-01-13 06:40:40 +00:00
|
|
|
}
|
2019-10-29 07:20:54 +00:00
|
|
|
|
|
|
|
.woot-widget-bubble {
|
|
|
|
background: #1f93ff;
|
2022-02-25 10:48:18 +00:00
|
|
|
border-radius: 100px;
|
2021-09-02 06:43:53 +00:00
|
|
|
border-width: 0px;
|
2019-10-29 07:20:54 +00:00
|
|
|
bottom: 20px;
|
2020-08-09 10:37:32 +00:00
|
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
|
|
|
|
cursor: pointer;
|
2022-02-25 10:48:18 +00:00
|
|
|
height: 64px;
|
|
|
|
padding: 0px;
|
2020-08-09 10:37:32 +00:00
|
|
|
position: fixed;
|
2020-10-30 06:36:51 +00:00
|
|
|
user-select: none;
|
2022-02-25 10:48:18 +00:00
|
|
|
width: 64px;
|
|
|
|
z-index: 2147483000 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.woot-widget-bubble.woot-widget-bubble--flat {
|
|
|
|
border-radius: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.woot-widget-holder.woot-widget-holder--flat {
|
|
|
|
bottom: 90px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.woot-widget-bubble.woot-widget-bubble--flat {
|
|
|
|
height: 56px;
|
|
|
|
width: 56px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.woot-widget-bubble.woot-widget-bubble--flat img {
|
|
|
|
margin: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.woot-widget-bubble.woot-widget-bubble--flat.woot--close::before,
|
|
|
|
.woot-widget-bubble.woot-widget-bubble--flat.woot--close::after {
|
|
|
|
left: 28px;
|
|
|
|
top: 16px;
|
2020-08-09 10:37:32 +00:00
|
|
|
}
|
|
|
|
|
2021-11-25 14:55:14 +00:00
|
|
|
.woot-widget-bubble.unread-notification::after {
|
|
|
|
content: '';
|
|
|
|
position: absolute;
|
|
|
|
width: 12px;
|
|
|
|
height: 12px;
|
|
|
|
background: #ff4040;
|
|
|
|
border-radius: 100%;
|
|
|
|
top: 0px;
|
|
|
|
right: 0px;
|
|
|
|
border: 2px solid #ffffff;
|
|
|
|
transition: background 0.2s ease;
|
|
|
|
}
|
|
|
|
|
2020-08-09 10:37:32 +00:00
|
|
|
.woot-widget-bubble.woot-widget--expanded {
|
|
|
|
bottom: 24px;
|
|
|
|
display: flex;
|
|
|
|
height: 48px !important;
|
|
|
|
width: auto !important;
|
2021-09-02 06:43:53 +00:00
|
|
|
align-items: center;
|
2020-08-09 10:37:32 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.woot-widget-bubble.woot-widget--expanded div {
|
|
|
|
align-items: center;
|
|
|
|
color: #fff;
|
|
|
|
display: flex;
|
|
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif;
|
|
|
|
font-size: 16px;
|
|
|
|
font-weight: 500;
|
|
|
|
justify-content: center;
|
|
|
|
padding-right: 20px;
|
|
|
|
width: auto !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.woot-widget-bubble.woot-widget--expanded img {
|
|
|
|
height: 20px;
|
|
|
|
margin: 14px 8px 14px 16px;
|
|
|
|
width: 20px;
|
2019-10-29 07:20:54 +00:00
|
|
|
}
|
|
|
|
|
2020-04-25 17:48:00 +00:00
|
|
|
.woot-widget-bubble.woot-elements--left {
|
|
|
|
left: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.woot-widget-bubble.woot-elements--right {
|
|
|
|
right: 20px;
|
|
|
|
}
|
|
|
|
|
2019-11-19 18:31:16 +00:00
|
|
|
.woot-widget-bubble:hover {
|
2019-10-29 07:20:54 +00:00
|
|
|
background: #1f93ff;
|
2020-01-13 06:40:40 +00:00
|
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
|
2019-10-29 07:20:54 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.woot-widget-bubble img {
|
2021-08-13 14:46:33 +00:00
|
|
|
all: revert;
|
2019-10-29 07:20:54 +00:00
|
|
|
height: 24px;
|
|
|
|
margin: 20px;
|
2020-08-09 10:37:32 +00:00
|
|
|
width: 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media only screen and (min-width: 667px) {
|
|
|
|
.woot-widget-holder.woot-elements--left {
|
|
|
|
left: 20px;
|
|
|
|
}
|
|
|
|
.woot-widget-holder.woot-elements--right {
|
|
|
|
right: 20px;
|
|
|
|
}
|
2019-10-29 07:20:54 +00:00
|
|
|
}
|
|
|
|
|
2020-01-13 06:40:40 +00:00
|
|
|
.woot--close:hover {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2020-04-25 17:48:00 +00:00
|
|
|
|
2020-08-09 10:37:32 +00:00
|
|
|
.woot--close::before, .woot--close::after {
|
|
|
|
background-color: #fff;
|
2020-01-13 06:40:40 +00:00
|
|
|
content: ' ';
|
2021-09-15 14:45:06 +00:00
|
|
|
display: inline;
|
2020-01-17 08:06:05 +00:00
|
|
|
height: 24px;
|
2020-08-09 10:37:32 +00:00
|
|
|
left: 32px;
|
|
|
|
position: absolute;
|
|
|
|
top: 20px;
|
2020-01-13 06:40:40 +00:00
|
|
|
width: 2px;
|
|
|
|
}
|
2020-04-25 17:48:00 +00:00
|
|
|
|
2020-08-09 10:37:32 +00:00
|
|
|
.woot--close::before {
|
2020-01-13 06:40:40 +00:00
|
|
|
transform: rotate(45deg);
|
|
|
|
}
|
2020-04-25 17:48:00 +00:00
|
|
|
|
2020-08-09 10:37:32 +00:00
|
|
|
.woot--close::after {
|
2020-01-13 06:40:40 +00:00
|
|
|
transform: rotate(-45deg);
|
2019-10-29 07:20:54 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.woot--hide {
|
2021-08-27 07:40:21 +00:00
|
|
|
bottom: -100vh !important;
|
2021-08-14 03:10:29 +00:00
|
|
|
transform: translateY(40px);
|
2021-08-07 06:26:15 +00:00
|
|
|
top: unset !important;
|
2020-08-09 10:37:32 +00:00
|
|
|
opacity: 0;
|
2019-11-12 04:16:30 +00:00
|
|
|
visibility: hidden !important;
|
2020-01-13 06:40:40 +00:00
|
|
|
z-index: -1 !important;
|
2019-10-29 07:20:54 +00:00
|
|
|
}
|
2019-11-12 04:16:30 +00:00
|
|
|
|
2020-11-23 05:19:28 +00:00
|
|
|
.woot-widget--without-bubble {
|
|
|
|
bottom: 20px !important;
|
|
|
|
}
|
|
|
|
|
2019-11-19 18:31:16 +00:00
|
|
|
@media only screen and (max-width: 667px) {
|
|
|
|
.woot-widget-holder {
|
|
|
|
height: 100%;
|
2020-08-09 10:37:32 +00:00
|
|
|
right: 0;
|
|
|
|
top: 0;
|
2019-11-19 18:31:16 +00:00
|
|
|
width: 100%;
|
2020-08-09 10:37:32 +00:00
|
|
|
}
|
2021-08-07 06:26:15 +00:00
|
|
|
|
|
|
|
.woot-widget-holder iframe {
|
|
|
|
min-height: 100% !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.woot-widget-holder.has-unread-view {
|
|
|
|
height: auto;
|
|
|
|
right: 0;
|
|
|
|
width: auto;
|
|
|
|
bottom: 0;
|
|
|
|
top: auto;
|
|
|
|
max-height: 100vh;
|
|
|
|
padding: 0 8px;
|
|
|
|
}
|
2021-09-15 14:45:06 +00:00
|
|
|
|
2021-08-07 06:26:15 +00:00
|
|
|
.woot-widget-holder.has-unread-view iframe {
|
|
|
|
min-height: unset !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.woot-widget-holder.has-unread-view.woot-elements--left {
|
|
|
|
left: 0;
|
|
|
|
}
|
2021-09-15 14:45:06 +00:00
|
|
|
|
2019-11-19 18:31:16 +00:00
|
|
|
.woot-widget-bubble.woot--close {
|
2020-08-09 10:37:32 +00:00
|
|
|
bottom: 60px;
|
|
|
|
opacity: 0;
|
2020-01-17 08:06:05 +00:00
|
|
|
visibility: hidden !important;
|
|
|
|
z-index: -1 !important;
|
2021-08-07 06:26:15 +00:00
|
|
|
}
|
2019-11-19 18:31:16 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@media only screen and (min-width: 667px) {
|
|
|
|
.woot-widget-holder {
|
2022-02-25 10:48:18 +00:00
|
|
|
border-radius: 16px;
|
2019-11-19 18:31:16 +00:00
|
|
|
bottom: 104px;
|
|
|
|
height: calc(85% - 64px - 20px);
|
2020-01-13 06:40:40 +00:00
|
|
|
max-height: 590px !important;
|
2020-08-09 10:37:32 +00:00
|
|
|
min-height: 250px !important;
|
|
|
|
width: 400px !important;
|
|
|
|
}
|
2019-11-19 18:31:16 +00:00
|
|
|
}
|
2022-05-06 14:00:48 +00:00
|
|
|
|
|
|
|
.woot-hidden {
|
|
|
|
display: none !important;
|
|
|
|
}
|
2019-10-30 05:13:11 +00:00
|
|
|
`;
|