@zipify/wysiwyg 3.4.1-dev → 3.5.0-ai-prototype

package/dist/wysiwyg.css

@@ -409,6 +409,45 @@
     color: rgb(var(--zw-color-red));
 }
 
+.zw-field[data-v-11f4bb7a] {
+    display: flex;
+    flex-direction: column;
+}
+.zw-field__input[data-v-11f4bb7a] {
+    --border-color: rgb(var(--zw-color-n60));
+    --text-color: rgb(var(--zw-color-n85));
+
+    border: 1px solid var(--border-color);
+    background-color: transparent;
+    color: var(--text-color);
+    font-size: var(--zw-font-size-xxs);
+    outline: none;
+    padding: 6px;
+    line-height: var(--zw-line-height-xxs);
+    transition: 0.1s border ease-out, 0.1s color ease-out;
+    will-change: border, color;
+}
+.zw-field__input[data-v-11f4bb7a]:hover {
+    --border-color: rgb(var(--zw-color-n80));
+    --text-color: rgb(var(--zw-color-n85));
+}
+.zw-field__input[data-v-11f4bb7a]:focus,
+.zw-field__input[data-v-11f4bb7a]:focus-within {
+    --border-color: rgb(var(--zw-color-white));
+    --text-color: rgb(var(--zw-color-white));
+}
+.zw-field__label[data-v-11f4bb7a] {
+    display: inline-block;
+    font-size: var(--zw-font-size-xxs);
+    padding-bottom: var(--zw-offset-xxs);
+    line-height: var(--zw-line-height-xxs);
+}
+.zw-field__label--error[data-v-11f4bb7a] {
+    font-size: var(--zw-font-size-xxs);
+    margin: var(--zw-offset-xxs) 0 0;
+    color: rgb(var(--zw-color-red));
+}
+
 .zw-checkbox[data-v-c9d1da12] {
     display: inline-flex;
     align-items: center;
@@ -594,6 +633,73 @@
     display: flex;
 }
 
+.zw-link-modal-header[data-v-40738e23] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--zw-offset-sm);
+    border-bottom: 2px solid rgb(var(--zw-color-n5));
+}
+.zw-link-modal-header__title[data-v-40738e23] {
+    text-transform: uppercase;
+    font-weight: var(--zw-font-weight-semibold);
+    font-size: var(--zw-font-size-xxs);
+    color: rgb(var(--zw-color-white));
+}
+
+.zw-ai-component__suggestion[data-v-390cf52c] {
+    font-size: 14px;
+    margin-bottom: 8px;
+    padding: 16px 8px;
+    color: #CDD1DC;
+    border-radius: 2px;
+}
+.zw-ai-component-suggestion__request[data-v-390cf52c] {
+    font-size: 12px;
+    color: #666;
+}
+.zw-ai-component-suggestion__button[data-v-390cf52c] {
+    font-size: 14px;
+    padding: 4px 8px;
+    background-color: #A4A4A4;
+    color: #FFF;
+    border-radius: 2px;
+}
+.zw-ai-component-suggestion__button[data-v-390cf52c]:hover {
+    opacity: 0.8;
+    background-color: #3AAA35;
+}
+
+.zw-suggestion-modal[data-v-a21c0bda] {
+    width: 500px;
+}
+.zw-link-modal__body[data-v-a21c0bda] {
+    padding: var(--zw-offset-sm);
+}
+.zw-generated-text__suggestion[data-v-a21c0bda] {
+    font-size: 14px;
+    color: #908E8E;
+}
+.zw-ai-component__send-button[data-v-a21c0bda] {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 16px;
+}
+.zw-ai-component__icon[data-v-a21c0bda] {
+    color: #CDD1DC;
+}
+.zw-ai-component__send-button:hover .zw-ai-component__icon[data-v-a21c0bda] {
+    color: #878DA2;
+    transition: color 0.1s ease-in-out;
+}
+.zw-field__label[data-v-a21c0bda] {
+    display: inline-block;
+    font-size: var(--zw-font-size-xxs);
+    padding-bottom: var(--zw-offset-xxs);
+    line-height: var(--zw-line-height-xxs);
+}
+
 .zw-link-modal-header[data-v-0a0c67c1] {
     display: flex;
     align-items: center;
@@ -639,7 +745,8 @@
     width: 234px;
 }
 
-.zw-toolbar[data-v-3ceb232a] {
+.zw-toolbar[data-v-d18ac382] {
+    border: 1px solid rgba(var(--zw-color-white), 0.2);
     border-radius: 2px;
     background-color: rgb(var(--zw-color-n15));
     color: rgb(var(--zw-color-n70));
@@ -647,8 +754,8 @@
     text-align: left;
     position: absolute;
 }
-.zw-toolbar[data-v-3ceb232a]::before,
-.zw-toolbar[data-v-3ceb232a]::after {
+.zw-toolbar[data-v-d18ac382]::before,
+.zw-toolbar[data-v-d18ac382]::after {
     content: "";
     display: block;
     width: 100%;
@@ -656,23 +763,96 @@
     position: absolute;
     --zw-toolbar-safe-zone: calc(-1 * var(--zw-toolbar-offset-y));
 }
-.zw-toolbar[data-v-3ceb232a]::before {
+.zw-toolbar[data-v-d18ac382]::before {
     top: var(--zw-toolbar-safe-zone);
 }
-.zw-toolbar[data-v-3ceb232a]::after {
+.zw-toolbar[data-v-d18ac382]::after {
     bottom: var(--zw-toolbar-safe-zone);
 }
-.zw-toolbar--enter-active[data-v-3ceb232a],
-.zw-toolbar--leave-active[data-v-3ceb232a] {
+.zw-toolbar--enter-active[data-v-d18ac382],
+.zw-toolbar--leave-active[data-v-d18ac382] {
     transition: opacity 150ms ease-out;
 }
-.zw-toolbar--leave-active[data-v-3ceb232a] {
+.zw-toolbar--leave-active[data-v-d18ac382] {
     transition: opacity 0s ease-in;
 }
-.zw-toolbar--enter[data-v-3ceb232a],
-.zw-toolbar--leave-to[data-v-3ceb232a] {
+.zw-toolbar--enter[data-v-d18ac382],
+.zw-toolbar--leave-to[data-v-d18ac382] {
     opacity: 0;
 }
+
+.zw-ai-component__suggestion[data-v-6fbdb7d6] {
+    font-size: 14px;
+    margin-bottom: 8px;
+    padding: 16px 8px;
+    background-color: #FFF;
+    border: 0.5px solid #CDD1DC;
+    border-radius: 2px;
+}
+.zw-ai-component-suggestion__request[data-v-6fbdb7d6] {
+    font-size: 12px;
+    color: #666;
+}
+.zw-ai-component-suggestion__button[data-v-6fbdb7d6] {
+    font-size: 14px;
+    padding: 2px 4px;
+    background-color: #3AAA35;
+    color: #FFF;
+    border-radius: 2px;
+}
+.zw-ai-component-suggestion__button[data-v-6fbdb7d6]:hover {
+    opacity: 0.8;
+}
+
+.zw-floating-menu__button[data-v-88889ea8] {
+    padding: 2px;
+    background-color: rgba(255, 252, 252, 1);
+    border-radius: 50%;
+    box-shadow: 0 0 0 0 1px #878DA2;
+}
+.zw-link-modal[data-v-88889ea8] {
+    width: 450px;
+    background-color: #FCFCFC;
+    border-radius: 8px;
+    box-shadow: 0 0 0 0.5px #878DA2, 0 0 2px 0.5px rgba(135, 141, 162, 0.5), 0 1px 8px 0.5px rgba(135, 141, 162, 0.1), 0 2px 12px 0.5px rgba(135, 141, 162, 0.1), 0 4px 20 0.5px rgba(135, 141, 162, 0.25);
+}
+.zw-link-modal__body[data-v-88889ea8] {
+    padding: var(--zw-offset-sm);
+}
+.zw-link-form__body[data-v-88889ea8] {
+    overscroll-behavior: contain;
+    overflow: auto;
+    max-height: max(min(calc(1051.21px - calc(calc(3.5px * 16) + 47.9844px) - calc(0.25px * 16)), calc(34.75px * 16)), calc(10px * 16));
+}
+.zw-ai-component__selected-text[data-v-88889ea8] {
+    font-size: 14px;
+    margin-bottom: 8px;
+    padding: 16px 8px;
+    background-color: #FFF;
+    border: 0.5px solid #000;
+    border-radius: 2px;
+}
+.zw-ai-component__input[data-v-88889ea8] {
+    width: 100%;
+    min-height: 40px;
+    border: 1px solid #E9E9E9;
+    border-radius: 5px;
+    padding: 8px;
+    font-size: 14px;
+}
+.zw-ai-component__send-button[data-v-88889ea8] {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 16px;
+}
+.zw-ai-component__icon[data-v-88889ea8] {
+    color: #CDD1DC;
+}
+.zw-ai-component__send-button:hover .zw-ai-component__icon[data-v-88889ea8] {
+    color: #878DA2;
+    transition: color 0.1s ease-in-out;
+}
 .zw-wysiwyg {
     --zw-color-n5: 13, 13, 13;      /* #0D0D0D; */
     --zw-color-n15: 38, 38, 38;     /* #262626; */