init

site/plugins/embed/src/assets/css/_variables.scss

@@ -0,0 +1,38 @@
+/* Colors
+---------------------------------*/
+
+$color-white: #fff;
+$color-light: #efefef;
+$color-light-grey: #999;
+$color-dark: #16171a;
+$color-dark-grey: #777;
+$color-background: $color-light;
+$color-border: #ccc;
+$color-focus: #4271ae;
+$color-focus-border: $color-focus;
+
+
+/* Pattern
+---------------------------------*/
+
+$pattern: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXR0ZXJuIGlkPSJhIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGZpbGw9InJnYmEoMCwgMCwgMCwgMC4yKSIgZD0iTTAgMGgxMHYxMEgwem0xMCAxMGgxMHYxMEgxMHoiLz48L3BhdHRlcm4+PHJlY3QgZmlsbD0idXJsKCNhKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==";
+
+
+/* Breakpoint
+---------------------------------*/
+
+$breakpoint-medium: 65em;
+
+
+/* Input size
+---------------------------------*/
+
+$field-input-padding: .5rem;
+$field-input-height: 2.25rem;
+$field-input-line-height: 1.25rem;
+
+
+/* Font size
+---------------------------------*/
+
+$font-size-small: 0.875rem;

site/plugins/embed/src/assets/css/styles.scss

@@ -0,0 +1,143 @@
+@import '_variables.scss';
+
+.k-embed-field {
+    .k-input-icon {
+        width: auto;
+        .k-embed-infos {
+            display: flex;
+            align-items: center;
+            line-height: 1;
+            .k-embed-status {
+                margin-right: 3px;
+                &-loading {
+                    display: inline-block;
+                    .loader {
+                        display: inline-block;
+                        overflow: hidden;
+                        height: 1.3em;
+                        margin-top: -0.3em;
+                        line-height: 1.5em;
+                        font-size: 1rem;
+                        vertical-align: text-bottom;
+                        &::after {
+                            content: "⠋\A⠙\A⠹\A⠸\A⠼\A⠴\A⠦\A⠧\A⠇\A⠏";
+                            display: inline-table;
+                            white-space: pre;
+                            text-align: left;
+                            animation: spin10 0.8s steps(10) infinite;
+                        }
+                    }
+                    @keyframes spin10 { to { transform: translateY(-15.0em); } }
+                }
+                &-synced, &-failed {
+                    font-size: 0.8rem;
+                    padding: 2px 5px 2px 6px;
+                    display: inline-block;
+                    border-radius: 3px;
+                }
+                &-synced {
+                    background: var(--color-green-300);
+                    display: flex;
+                    align-items: center;
+                    .checkmark {
+                        position: relative;
+                        width: 20px;
+                        height: 20px;
+                        &:before {
+                            content: "";
+                            position: absolute;
+                            top: 5px;
+                            left: 7px;
+                            width: 9px;
+                            height: 6px;
+                            transform: rotate(-45deg);
+                            background: none;
+                            border: solid black;
+                            border-width: 0 0 1px 1px;
+                        }
+                    }
+                }
+                &-failed {
+                    background: var(--color-red-300);
+                    display: flex;
+                    align-items: center;
+                    .cross {
+                        position: relative;
+                        width: 20px;
+                        height: 20px;
+                        &:before, &:after {
+                            content: "";
+                            position: absolute;
+                            left: 11px;
+                            top: 5px;
+                            height: 10px;
+                            width: 1px;
+                            background-color: black;
+                        }
+                        &:before {
+                            transform: rotate(45deg);
+                        }
+                        &:after {
+                            transform: rotate(-45deg);
+                        }
+                    }
+                }
+            }
+        }
+        &-button {
+            width: 2.5em;
+        }
+    }
+}
+
+.preview {
+    position: relative;
+    margin-bottom: 0.5rem;
+    &-content {
+        padding: 1rem;
+        position: relative;
+        z-index: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        iframe {
+            max-width: 100% !important;
+        }
+        img {
+            width: auto !important;
+            height: 30vh !important;
+        }
+    }
+    &-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        background: $color-light url($pattern);
+        opacity: 0.45;
+    }
+    &[data-provider=youtube],
+    &[data-provider=vimeo] {
+        .preview-content {
+            padding: 0;
+            iframe {
+              width: 100%;
+              aspect-ratio: 16 / 9;
+              height: auto;
+            }
+        }
+    }
+}
+
+.k-embed-field-preview {
+    padding: 0.375rem var(--table-cell-padding);
+    &-inner {
+        overflow: hidden;
+    }
+    .k-embed-icon {
+        --fit: cover;
+        --back: var(--pattern);
+    }
+}