neuphlo-editor 2.2.0 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -1196,10 +1196,11 @@
1196
1196
 
1197
1197
  .nph-video-input__field {
1198
1198
  flex: 1;
1199
- padding: 8px 12px;
1199
+ padding: 10px 14px;
1200
1200
  font-size: 14px;
1201
+ line-height: 1.4;
1201
1202
  border: 1px solid var(--border, #e5e7eb);
1202
- border-radius: 6px;
1203
+ border-radius: 8px;
1203
1204
  outline: none;
1204
1205
  background: transparent;
1205
1206
  color: inherit;
@@ -1211,11 +1212,12 @@
1211
1212
  }
1212
1213
 
1213
1214
  .nph-video-input__button {
1214
- padding: 8px 16px;
1215
+ padding: 10px 20px;
1215
1216
  font-size: 14px;
1216
1217
  font-weight: 500;
1218
+ line-height: 1.4;
1217
1219
  border: 1px solid var(--border, #e5e7eb);
1218
- border-radius: 6px;
1220
+ border-radius: 8px;
1219
1221
  background: var(--primary, #111827);
1220
1222
  color: var(--primary-foreground, #fff);
1221
1223
  cursor: pointer;
@@ -1227,6 +1229,66 @@
1227
1229
  cursor: not-allowed;
1228
1230
  }
1229
1231
 
1232
+ /* Video Placeholder */
1233
+ .nph-video-placeholder {
1234
+ display: flex;
1235
+ flex-direction: column;
1236
+ align-items: center;
1237
+ justify-content: center;
1238
+ aspect-ratio: 16 / 9;
1239
+ border-radius: 12px;
1240
+ border: 2px dashed var(--border, #e5e7eb);
1241
+ background: var(--muted, rgba(0, 0, 0, 0.02));
1242
+ cursor: pointer;
1243
+ transition: border-color 0.2s ease, background 0.2s ease;
1244
+ gap: 12px;
1245
+ }
1246
+
1247
+ .nph-video-placeholder:hover {
1248
+ border-color: var(--muted-foreground, #9ca3af);
1249
+ background: var(--muted, rgba(0, 0, 0, 0.04));
1250
+ }
1251
+
1252
+ .nph-video-placeholder__icon {
1253
+ display: flex;
1254
+ align-items: center;
1255
+ justify-content: center;
1256
+ width: 56px;
1257
+ height: 56px;
1258
+ border-radius: 12px;
1259
+ background: var(--muted, rgba(0, 0, 0, 0.06));
1260
+ color: var(--muted-foreground, #6b7280);
1261
+ }
1262
+
1263
+ .nph-video-placeholder__text {
1264
+ display: flex;
1265
+ flex-direction: column;
1266
+ align-items: center;
1267
+ gap: 2px;
1268
+ }
1269
+
1270
+ .nph-video-placeholder__title {
1271
+ display: block;
1272
+ font-size: 14px;
1273
+ font-weight: 600;
1274
+ color: var(--foreground, #111827);
1275
+ }
1276
+
1277
+ .nph-video-placeholder__subtitle {
1278
+ display: block;
1279
+ font-size: 13px;
1280
+ color: var(--muted-foreground, #6b7280);
1281
+ }
1282
+
1283
+ .nph-video-placeholder__input {
1284
+ display: flex;
1285
+ align-items: center;
1286
+ gap: 8px;
1287
+ width: 100%;
1288
+ max-width: 420px;
1289
+ margin-top: 4px;
1290
+ }
1291
+
1230
1292
  /* Video Block Dark Mode */
1231
1293
  @media (prefers-color-scheme: dark) {
1232
1294
  .nph-video-block {
@@ -1272,6 +1334,29 @@
1272
1334
  border-color: var(--border, #374151);
1273
1335
  }
1274
1336
 
1337
+ .dark .nph-video-placeholder {
1338
+ border-color: var(--border, #374151);
1339
+ background: var(--muted, rgba(255, 255, 255, 0.03));
1340
+ }
1341
+
1342
+ .dark .nph-video-placeholder:hover {
1343
+ border-color: var(--muted-foreground, #6b7280);
1344
+ background: var(--muted, rgba(255, 255, 255, 0.05));
1345
+ }
1346
+
1347
+ .dark .nph-video-placeholder__icon {
1348
+ background: var(--muted, rgba(255, 255, 255, 0.06));
1349
+ color: var(--muted-foreground, #9ca3af);
1350
+ }
1351
+
1352
+ .dark .nph-video-placeholder__title {
1353
+ color: var(--foreground, #f9fafb);
1354
+ }
1355
+
1356
+ .dark .nph-video-placeholder__subtitle {
1357
+ color: var(--muted-foreground, #9ca3af);
1358
+ }
1359
+
1275
1360
  /* Drag Handle */
1276
1361
  .nph-drag-handle {
1277
1362
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neuphlo-editor",
3
- "version": "2.2.0",
3
+ "version": "2.3.1",
4
4
  "private": false,
5
5
  "description": "A lightweight React wrapper around Tiptap with sensible defaults and image upload support.",
6
6
  "type": "module",