Skip to content

Commit fd6460f

Browse files
tristantbgtristantbg
committed
instagram embed
1 parent eaa140e commit fd6460f

File tree

11 files changed

+604
-331
lines changed

11 files changed

+604
-331
lines changed

‎index.css‎

Lines changed: 179 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,179 @@
1-
@charset "UTF-8";.k-input[data-theme=field][data-type=embed] .k-input-icon{width:auto}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos{display:flex;align-items:center;line-height:1}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status{margin-right:3px}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-loading{display:inline-block}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-loading .loader{display:inline-block;overflow:hidden;height:1.3em;margin-top:-.3em;line-height:1.5em;font-size:1rem;vertical-align:text-bottom}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-loading .loader:after{content:"\280b\a\2819\a\2839\a\2838\a\283c\a\2834\a\2826\a\2827\a\2807\a\280f";display:inline-table;white-space:pre;text-align:left;animation:spin10 .8s steps(10) infinite}@keyframes spin10{to{transform:translateY(-15em)}}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-synced,.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed{font-size:.8rem;padding:3px 5px 3px 6px;display:inline-block;border-radius:3px}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-synced{background:#b9ca88;display:flex;align-items:center}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-synced .checkmark{position:relative;width:20px;height:20px}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-synced .checkmark: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}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed{background:#ffced3;display:flex;align-items:center}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed .cross{position:relative;width:20px;height:20px}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed .cross:before,.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed .cross:after{content:"";position:absolute;left:11px;top:5px;height:10px;width:1px;background-color:#000}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed .cross:before{transform:rotate(45deg)}.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed .cross:after{transform:rotate(-45deg)}.k-input[data-theme=field][data-type=embed] .k-input-icon-button{width:2.5em}.preview{position:relative;margin-bottom:.5rem}.preview-content{padding:1rem;position:relative;z-index:1;display:flex;justify-content:center;align-items:center}.preview-content iframe{max-width:100%!important}.preview-content img{width:auto!important;height:30vh!important}.preview-background{position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background:#efefef url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXR0ZXJuIGlkPSJhIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGZpbGw9InJnYmEoMCwgMCwgMCwgMC4yKSIgZD0iTTAgMGgxMHYxMEgwem0xMCAxMGgxMHYxMEgxMHoiLz48L3BhdHRlcm4+PHJlY3QgZmlsbD0idXJsKCNhKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==);opacity:.45}.preview[data-provider=youtube] .preview-content,.preview[data-provider=vimeo] .preview-content{padding:0}.preview[data-provider=youtube] .preview-content iframe,.preview[data-provider=vimeo] .preview-content iframe{width:100%;aspect-ratio:16/9;height:auto}.k-embed-field-preview-icon{background:#b9ca88;width:18px;height:18px;line-height:18px;border-radius:50%;display:inline-block;font-size:.75em;margin-left:.5em;text-align:center}
1+
@charset "UTF-8";
2+
/* Colors
3+
---------------------------------*/
4+
/* Pattern
5+
---------------------------------*/
6+
/* Breakpoint
7+
---------------------------------*/
8+
/* Input size
9+
---------------------------------*/
10+
/* Font size
11+
---------------------------------*/
12+
.k-input[data-theme=field][data-type=embed] .k-input-icon {
13+
width: auto;
14+
}
15+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos {
16+
display: -webkit-box;
17+
display: -ms-flexbox;
18+
display: flex;
19+
-webkit-box-align: center;
20+
-ms-flex-align: center;
21+
align-items: center;
22+
line-height: 1;
23+
}
24+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status {
25+
margin-right: 3px;
26+
}
27+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-loading {
28+
display: inline-block;
29+
}
30+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-loading .loader {
31+
display: inline-block;
32+
overflow: hidden;
33+
height: 1.3em;
34+
margin-top: -0.3em;
35+
line-height: 1.5em;
36+
font-size: 1rem;
37+
vertical-align: text-bottom;
38+
}
39+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-loading .loader::after {
40+
content: "⠋\a⠙\a⠹\a⠸\a⠼\a⠴\a⠦\a⠧\a⠇\a⠏";
41+
display: inline-table;
42+
white-space: pre;
43+
text-align: left;
44+
-webkit-animation: spin10 0.8s steps(10) infinite;
45+
animation: spin10 0.8s steps(10) infinite;
46+
}
47+
@-webkit-keyframes spin10 {
48+
to {
49+
-webkit-transform: translateY(-15em);
50+
transform: translateY(-15em);
51+
}
52+
}
53+
@keyframes spin10 {
54+
to {
55+
-webkit-transform: translateY(-15em);
56+
transform: translateY(-15em);
57+
}
58+
}
59+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-synced, .k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed {
60+
font-size: 0.8rem;
61+
padding: 3px 5px 3px 6px;
62+
display: inline-block;
63+
border-radius: 3px;
64+
}
65+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-synced {
66+
background: #b9ca88;
67+
display: -webkit-box;
68+
display: -ms-flexbox;
69+
display: flex;
70+
-webkit-box-align: center;
71+
-ms-flex-align: center;
72+
align-items: center;
73+
}
74+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-synced .checkmark {
75+
position: relative;
76+
width: 20px;
77+
height: 20px;
78+
}
79+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-synced .checkmark:before {
80+
content: "";
81+
position: absolute;
82+
top: 5px;
83+
left: 7px;
84+
width: 9px;
85+
height: 6px;
86+
-webkit-transform: rotate(-45deg);
87+
transform: rotate(-45deg);
88+
background: none;
89+
border: solid black;
90+
border-width: 0 0 1px 1px;
91+
}
92+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed {
93+
background: #ffced3;
94+
display: -webkit-box;
95+
display: -ms-flexbox;
96+
display: flex;
97+
-webkit-box-align: center;
98+
-ms-flex-align: center;
99+
align-items: center;
100+
}
101+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed .cross {
102+
position: relative;
103+
width: 20px;
104+
height: 20px;
105+
}
106+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed .cross:before, .k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed .cross:after {
107+
content: "";
108+
position: absolute;
109+
left: 11px;
110+
top: 5px;
111+
height: 10px;
112+
width: 1px;
113+
background-color: black;
114+
}
115+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed .cross:before {
116+
-webkit-transform: rotate(45deg);
117+
transform: rotate(45deg);
118+
}
119+
.k-input[data-theme=field][data-type=embed] .k-input-icon .k-embed-infos .k-embed-status-failed .cross:after {
120+
-webkit-transform: rotate(-45deg);
121+
transform: rotate(-45deg);
122+
}
123+
.k-input[data-theme=field][data-type=embed] .k-input-icon-button {
124+
width: 2.5em;
125+
}
126+
.preview {
127+
position: relative;
128+
margin-bottom: 0.5rem;
129+
}
130+
.preview-content {
131+
padding: 1rem;
132+
position: relative;
133+
z-index: 1;
134+
display: -webkit-box;
135+
display: -ms-flexbox;
136+
display: flex;
137+
-webkit-box-pack: center;
138+
-ms-flex-pack: center;
139+
justify-content: center;
140+
-webkit-box-align: center;
141+
-ms-flex-align: center;
142+
align-items: center;
143+
}
144+
.preview-content iframe {
145+
max-width: 100% !important;
146+
}
147+
.preview-content img {
148+
width: auto !important;
149+
height: 30vh !important;
150+
}
151+
.preview-background {
152+
position: absolute;
153+
top: 0;
154+
left: 0;
155+
z-index: 0;
156+
width: 100%;
157+
height: 100%;
158+
background: #efefef url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXR0ZXJuIGlkPSJhIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGZpbGw9InJnYmEoMCwgMCwgMCwgMC4yKSIgZD0iTTAgMGgxMHYxMEgwem0xMCAxMGgxMHYxMEgxMHoiLz48L3BhdHRlcm4+PHJlY3QgZmlsbD0idXJsKCNhKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==");
159+
opacity: 0.45;
160+
}
161+
.preview[data-provider=youtube] .preview-content, .preview[data-provider=vimeo] .preview-content {
162+
padding: 0;
163+
}
164+
.preview[data-provider=youtube] .preview-content iframe, .preview[data-provider=vimeo] .preview-content iframe {
165+
width: 100%;
166+
aspect-ratio: 16/9;
167+
height: auto;
168+
}
169+
.k-embed-field-preview-icon {
170+
background: #b9ca88;
171+
width: 18px;
172+
height: 18px;
173+
line-height: 18px;
174+
border-radius: 50%;
175+
display: inline-block;
176+
font-size: 0.75em;
177+
margin-left: 0.5em;
178+
text-align: center;
179+
}

0 commit comments

Comments
 (0)