Skip to content

Commit 70fcd54

Browse files
kevinmeijer97kevinmeijer97
authored
Dark mode styling fix (#10)
1 parent 87ebea1 commit 70fcd54

10 files changed

+38
-16
lines changed

‎resources/css/statamic-structured-data.css‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,25 @@
3131
.structured-data-builder pre,
3232
.structured-data-object pre {
3333
@apply font-mono text-sm;
34-
}
34+
}
35+
36+
.structured-data-preview-code {
37+
@apply bg-gray-100 dark:bg-gray-800;
38+
}
39+
40+
.structured-data-schema {
41+
@apply bg-white dark:bg-transparent;
42+
}
43+
44+
.structured-data-schema-field-header {
45+
@apply bg-gray-100 dark:bg-transparent;
46+
}
47+
48+
.structured-data-variables-list {
49+
@apply bg-white dark:bg-transparent;
50+
}
51+
52+
.structured-data-variables-list .variable-item {
53+
@apply hover:bg-gray-100 dark:hover:bg-gray-800;
54+
}
55+

‎resources/dist/build/assets/statamic-structured-data-05ad0e35.css‎ renamed to ‎resources/dist/build/assets/statamic-structured-data-84529790.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/dist/build/assets/statamic-structured-data-f776e0ca.css‎ renamed to ‎resources/dist/build/assets/statamic-structured-data-c8c9d7ed.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/dist/build/assets/statamic-structured-data-6608a688.js‎ renamed to ‎resources/dist/build/assets/statamic-structured-data-e538cc20.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/dist/build/manifest.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
{
22
"resources/css/statamic-structured-data.css": {
3-
"file": "assets/statamic-structured-data-f776e0ca.css",
3+
"file": "assets/statamic-structured-data-c8c9d7ed.css",
44
"isEntry": true,
55
"src": "resources/css/statamic-structured-data.css"
66
},
77
"resources/js/statamic-structured-data.css": {
8-
"file": "assets/statamic-structured-data-05ad0e35.css",
8+
"file": "assets/statamic-structured-data-84529790.css",
99
"src": "resources/js/statamic-structured-data.css"
1010
},
1111
"resources/js/statamic-structured-data.js": {
1212
"css": [
13-
"assets/statamic-structured-data-05ad0e35.css"
13+
"assets/statamic-structured-data-84529790.css"
1414
],
15-
"file": "assets/statamic-structured-data-6608a688.js",
15+
"file": "assets/statamic-structured-data-e538cc20.js",
1616
"isEntry": true,
1717
"src": "resources/js/statamic-structured-data.js"
1818
}

‎resources/js/components/fieldtypes/AvailableVariables.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div :class="['chevron', { 'chevron-up': !variablesCollapsed }]"></div>
77
</div>
88
</div>
9-
<div v-if="!variablesCollapsed" class="py-4 bg-white">
9+
<div v-if="!variablesCollapsed" class="structured-data-variables-list py-4">
1010
<div v-if="!hasVariables" class="text-gray-500 text-sm">
1111
{{ __('No variables available for this collection.') }}
1212
</div>
@@ -26,15 +26,15 @@
2626
<div v-if="showChildren[variable.name]">
2727
<div
2828
v-for="childVariable in variable.children" :key="childVariable.name"
29-
class="variable-item p-1 hover:bg-gray-100 cursor-pointer rounded"
29+
class="variable-item p-1 cursor-pointer rounded"
3030
@click="copyVariable('{{ ' + childVariable.name + ' }}', $event)"
3131
>
3232
<div class="text-sm">{{ childVariable.description }}</div>
3333
<div class="text-xs text-gray-500">{{ childVariable.name }}</div>
3434
</div>
3535
</div>
3636
</div>
37-
<div v-else @click="copyVariable('{{ ' + variable.name + ' }}', $event)" class="cursor-pointer hover:bg-gray-100">
37+
<div v-else @click="copyVariable('{{ ' + variable.name + ' }}', $event)" class="variable-item cursor-pointer">
3838
<div class="text-sm">{{ variable.description }}</div>
3939
<div class="text-xs text-gray-500">{{ variable.name }}</div>
4040
</div>

‎resources/js/components/fieldtypes/StructuredDataBuilder.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="structured-data-builder">
33
<div class="flex-1">
4-
<div v-for="(schema, schemaIndex) in schemas" :key="schemaIndex" class="mb-6 bg-white rounded-lg shadow-sm border">
4+
<div v-for="(schema, schemaIndex) in schemas" :key="schemaIndex" class="structured-data-schema mb-6 rounded-lg shadow-sm border">
55
<div class="px-4 py-2 bg-gray-50 border-b rounded-t-lg flex justify-between items-center">
66
<div class="flex items-center gap-2 cursor-pointer" @click="toggleSchema(schemaIndex)">
77
<div class="chevron" :class="{ 'chevron-up': !isSchemaCollapsed(schemaIndex) }"></div>
@@ -53,7 +53,7 @@
5353

5454
<draggable v-model="schema.fields" @end="onEnd" :key="schemaIndex" handle=".drag-handle">
5555
<div v-for="(field, index) in schema.fields" :key="index" class="mb-2 border rounded bg-gray-50">
56-
<div class="px-2 py-2 bg-gray-100 flex justify-between items-center border-b rounded-t-lg cursor-drag drag-handle">
56+
<div class="structured-data-schema-field-header px-2 py-2 flex justify-between items-center border-b rounded-t-lg cursor-drag drag-handle">
5757
<button v-show="index > 0" @click="moveFieldUp(index, schema)" class="btn btn-secondary">↑ Move Up</button>
5858
<button v-show="index < schema.fields.length - 1" @click="moveFieldDown(index, schema)" class="btn btn-secondary">Move Down ↓</button>
5959
</div>

‎resources/js/components/fieldtypes/StructuredDataObjectBuilder.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="structured-data-builder">
33
<div class="flex-1">
4-
<div v-if="schema" class="mb-6 bg-white rounded-lg shadow-sm border">
4+
<div v-if="schema" class="structured-data-schema mb-6 rounded-lg shadow-sm border">
55
<div class="px-4 py-2 bg-gray-50 border-b rounded-t-lg flex justify-between items-center">
66
<div class="flex items-center gap-2 cursor-pointer">
77
<h3 class="font-bold text-lg">{{ __('Object Data Builder') }}</h3>

‎resources/js/components/fieldtypes/StructuredDataPreview.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
</div>
4040

4141
<div v-show="!template.isCollapsed">
42-
<pre v-if="isPrettyPrint" class="bg-gray-100 p-4 rounded overflow-auto">{{ formatJson(template.structuredData) }}</pre>
43-
<pre v-else class="bg-gray-100 p-4 rounded overflow-auto">{{ JSON.stringify(template.structuredData) }}</pre>
42+
<pre v-if="isPrettyPrint" class="structured-data-preview-code p-4 rounded overflow-auto">{{ formatJson(template.structuredData) }}</pre>
43+
<pre v-else class="structured-data-preview-code p-4 rounded overflow-auto">{{ JSON.stringify(template.structuredData) }}</pre>
4444
</div>
4545
</div>
4646
</div>

‎tailwind.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
module.exports = {
2+
darkMode: 'selector',
23
content: [
34
'./resources/js/components/**/*.vue',
45
]

0 commit comments

Comments
 (0)