nuxtseo-layer-devtools 0.1.2 → 0.1.3
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/assets/css/global.css +10 -26
- package/components/DevtoolsLayout.vue +14 -31
- package/package.json +1 -1
package/assets/css/global.css
CHANGED
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
--color-surface: var(--color-neutral-950);
|
|
43
43
|
--color-surface-elevated: var(--color-neutral-900);
|
|
44
44
|
--color-surface-sunken: oklch(7% 0.004 260);
|
|
45
|
-
--color-border:
|
|
46
|
-
--color-border-subtle: oklch(
|
|
45
|
+
--color-border: oklch(25% 0.012 260);
|
|
46
|
+
--color-border-subtle: oklch(20% 0.01 260);
|
|
47
47
|
--color-text: var(--color-neutral-100);
|
|
48
48
|
--color-text-muted: var(--color-neutral-400);
|
|
49
49
|
--color-text-subtle: var(--color-neutral-500);
|
|
@@ -507,42 +507,26 @@ html.dark {
|
|
|
507
507
|
}
|
|
508
508
|
|
|
509
509
|
/* Preview source toggle */
|
|
510
|
-
.devtools-
|
|
511
|
-
display: flex;
|
|
512
|
-
gap: 1px;
|
|
513
|
-
background: var(--color-border);
|
|
514
|
-
border-radius: 6px;
|
|
515
|
-
overflow: hidden;
|
|
516
|
-
}
|
|
517
|
-
|
|
518
|
-
.devtools-preview-btn {
|
|
519
|
-
display: flex;
|
|
510
|
+
.devtools-mode-btn {
|
|
511
|
+
display: inline-flex;
|
|
520
512
|
align-items: center;
|
|
521
513
|
gap: 0.25rem;
|
|
522
|
-
padding: 0.
|
|
514
|
+
padding: 0.2rem 0.5rem;
|
|
523
515
|
font-size: 0.6875rem;
|
|
524
516
|
font-weight: 500;
|
|
525
517
|
color: var(--color-text-muted);
|
|
526
518
|
background: var(--color-surface-sunken);
|
|
527
|
-
border:
|
|
519
|
+
border: 1px solid var(--color-border);
|
|
520
|
+
border-radius: 6px;
|
|
528
521
|
cursor: pointer;
|
|
529
|
-
transition: color 150ms, background 150ms;
|
|
522
|
+
transition: color 150ms, background 150ms, border-color 150ms;
|
|
530
523
|
white-space: nowrap;
|
|
531
524
|
}
|
|
532
525
|
|
|
533
|
-
.devtools-
|
|
526
|
+
.devtools-mode-btn:hover {
|
|
534
527
|
color: var(--color-text);
|
|
535
528
|
background: var(--color-surface-elevated);
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
.devtools-preview-btn.active {
|
|
539
|
-
color: var(--color-text);
|
|
540
|
-
background: var(--color-surface-elevated);
|
|
541
|
-
box-shadow: 0 1px 2px oklch(0% 0 0 / 0.06);
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
.dark .devtools-preview-btn.active {
|
|
545
|
-
box-shadow: 0 1px 2px oklch(0% 0 0 / 0.2);
|
|
529
|
+
border-color: var(--color-border-hover, var(--color-border));
|
|
546
530
|
}
|
|
547
531
|
|
|
548
532
|
/* Production URL badge */
|
|
@@ -92,8 +92,21 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
|
|
|
92
92
|
v-if="version"
|
|
93
93
|
class="font-mono text-[10px] sm:text-xs hidden sm:inline-flex"
|
|
94
94
|
>
|
|
95
|
-
{{ version }}
|
|
95
|
+
v{{ version }}
|
|
96
96
|
</UBadge>
|
|
97
|
+
<UDropdownMenu
|
|
98
|
+
v-if="hasProductionUrl"
|
|
99
|
+
:items="[
|
|
100
|
+
{ label: 'Local', icon: 'carbon:laptop', onSelect: () => previewSource = 'local' },
|
|
101
|
+
{ label: `Production (${productionHostname})`, icon: 'carbon:cloud', onSelect: () => previewSource = 'production' },
|
|
102
|
+
]"
|
|
103
|
+
>
|
|
104
|
+
<button type="button" class="devtools-mode-btn">
|
|
105
|
+
<UIcon :name="isProductionMode ? 'carbon:cloud' : 'carbon:laptop'" class="w-3.5 h-3.5" />
|
|
106
|
+
<span class="hidden sm:inline">{{ isProductionMode ? 'Production' : 'Local' }}</span>
|
|
107
|
+
<UIcon name="carbon:chevron-down" class="w-3 h-3 opacity-50" />
|
|
108
|
+
</button>
|
|
109
|
+
</UDropdownMenu>
|
|
97
110
|
</div>
|
|
98
111
|
</div>
|
|
99
112
|
|
|
@@ -150,36 +163,6 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
|
|
|
150
163
|
</template>
|
|
151
164
|
</div>
|
|
152
165
|
|
|
153
|
-
<!-- Preview source toggle -->
|
|
154
|
-
<div v-if="hasProductionUrl" class="devtools-preview-toggle">
|
|
155
|
-
<button
|
|
156
|
-
type="button"
|
|
157
|
-
class="devtools-preview-btn"
|
|
158
|
-
:class="{ active: previewSource === 'local' }"
|
|
159
|
-
@click="previewSource = 'local'"
|
|
160
|
-
>
|
|
161
|
-
<UIcon name="carbon:laptop" class="w-3.5 h-3.5" aria-hidden="true" />
|
|
162
|
-
<span class="hidden sm:inline">Local</span>
|
|
163
|
-
</button>
|
|
164
|
-
<button
|
|
165
|
-
type="button"
|
|
166
|
-
class="devtools-preview-btn"
|
|
167
|
-
:class="{ active: previewSource === 'production' }"
|
|
168
|
-
@click="previewSource = 'production'"
|
|
169
|
-
>
|
|
170
|
-
<UIcon name="carbon:cloud" class="w-3.5 h-3.5" aria-hidden="true" />
|
|
171
|
-
<span class="hidden sm:inline">Production</span>
|
|
172
|
-
</button>
|
|
173
|
-
</div>
|
|
174
|
-
|
|
175
|
-
<!-- Production URL indicator -->
|
|
176
|
-
<UTooltip v-if="isProductionMode" :text="productionUrl">
|
|
177
|
-
<span class="devtools-production-badge">
|
|
178
|
-
<span class="devtools-production-dot" />
|
|
179
|
-
<span class="hidden sm:inline text-xs">{{ productionHostname }}</span>
|
|
180
|
-
</span>
|
|
181
|
-
</UTooltip>
|
|
182
|
-
|
|
183
166
|
<!-- Actions -->
|
|
184
167
|
<div class="flex items-center gap-1">
|
|
185
168
|
<slot name="actions" />
|