Skip to content

Commit 0473ed4

Browse files
jaygeorgejaygeorge
authored
[6.x] Fix css compilation issues (#12833)
1 parent db29285 commit 0473ed4

6 files changed

Lines changed: 96 additions & 81 deletions

File tree

‎resources/css/app.css‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,14 @@
4040
::backdrop,
4141
::file-selector-button {
4242
border-color: var(--color-gray-300, currentColor);
43-
.dark & {
44-
border-color: var(--color-gray-700, currentColor);
43+
}
44+
.dark {
45+
*,
46+
::after,
47+
::before,
48+
::backdrop,
49+
::file-selector-button {
50+
border-color: var(--color-gray-700, currentColor);
4551
}
4652
}
4753
}

‎resources/css/components/fieldtypes/bard.css‎

Lines changed: 19 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -139,42 +139,6 @@
139139
border-top-right-radius: 0!important;
140140
}
141141
}
142-
143-
/* While the fixed toolbar is "stuck", mask the focus state of the editor to prevent blue focus lines appearing around the side of the toolbar while scrolling */
144-
container-type: scroll-state;
145-
@container scroll-state(stuck: top) {
146-
> * {
147-
position: relative;
148-
&::after {
149-
content: '';
150-
position: absolute;
151-
inset: -4px -8px;
152-
box-shadow:
153-
/* Left Mask */
154-
-1px 0px 0px var(--color-gray-300),
155-
/* Right Mask */
156-
1px 0px 0px var(--color-gray-300),
157-
/* Bottom "Shadow" */
158-
0 4px 5px -3px hsl(0deg 0% 85%)
159-
;
160-
border-inline-width: 2px;
161-
border-inline-color: var(--color-gray-50);
162-
}
163-
:is(.dark) & {
164-
&::after {
165-
box-shadow:
166-
/* Left Mask */
167-
-1px 0px 0px var(--color-gray-700),
168-
/* Right Mask */
169-
1px 0px 0px var(--color-gray-700),
170-
/* Bottom "Shadow" */
171-
0 4px 5px -3px hsl(0deg 0% 10%)
172-
;
173-
border-inline-color: var(--color-gray-850);
174-
}
175-
}
176-
}
177-
}
178142
}
179143

180144
/* Only top-level Bard fields should have a sticky header */
@@ -501,10 +465,13 @@
501465
.selectedCell {
502466
@apply relative;
503467

504-
&:after {
505-
@apply pointer-events-none absolute inset-0 bg-gray-400 opacity-25 dark:bg-gray-600;
468+
&::after {
469+
@apply pointer-events-none absolute inset-0 bg-gray-400 opacity-25;
506470
content: '';
507471
}
472+
:is(.dark) &::after {
473+
@apply bg-gray-600;
474+
}
508475
}
509476

510477
a {
@@ -537,9 +504,12 @@
537504
========================================================================== */
538505
@layer ui {
539506
.bard-fieldtype .ProseMirror > p.is-editor-empty:first-child::before {
540-
@apply text-gray-600 dark:text-gray-400 float-start h-0 pointer-events-none;
507+
@apply text-gray-600 float-start h-0 pointer-events-none;
541508
content: attr(data-placeholder);
542509
}
510+
.dark .bard-fieldtype .ProseMirror > p.is-editor-empty:first-child::before {
511+
@apply text-gray-400;
512+
}
543513
}
544514

545515
/* Link toolbar
@@ -582,3 +552,13 @@
582552
}
583553
}
584554
}
555+
556+
557+
558+
559+
560+
561+
562+
563+
564+

‎resources/css/components/focal-point.css‎

Lines changed: 9 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,7 @@
1010
.focal-point-toolbox {
1111
position: absolute;
1212
top: 20px;
13-
left: 20px;
14-
[dir='rtl'] & {
15-
left: auto;
16-
right: 20px;
17-
}
13+
inset-inline-start: 20px;
1814
z-index: var(--z-index-above);
1915
width: 380px;
2016
overflow-y: auto;
@@ -54,25 +50,17 @@
5450
background: white;
5551
border-radius: 50%;
5652
top: 50%;
57-
left: 50%;
58-
[dir='rtl'] & {
59-
left: auto;
60-
right: 50%;
61-
}
62-
margin: -4px 0 0 -4px;
63-
[dir='rtl'] & {
64-
margin: -4px -4px 0 0;
65-
}
53+
inset-inline-start: 50%;
54+
margin-block-start: -4px;
55+
margin-inline-start: -4px;
6656
box-shadow: 0 0 4px rgba(0, 0, 0, 0.75);
6757
}
6858
}
6959

7060
.focal-point .frame {
7161
position: absolute;
72-
margin: -5px 0 0 -5px;
73-
[dir='rtl'] & {
74-
margin: -5px -5px 0 0;
75-
}
62+
margin-block-start: -5px;
63+
margin-inline-start: -5px;
7664
border: 10px solid #394045;
7765
box-sizing: content-box;
7866
overflow: hidden;
@@ -89,31 +77,19 @@
8977
.frame-1,
9078
.frame-4,
9179
.frame-7 {
92-
left: 0;
93-
[dir='rtl'] & {
94-
left: auto;
95-
right: 0;
96-
}
80+
inset-inline-start: 0;
9781
width: 66.6666667%;
9882
}
9983
.frame-2,
10084
.frame-5,
10185
.frame-8 {
102-
left: 66.6666667%;
103-
[dir='rtl'] & {
104-
left: auto;
105-
right: 66.6666667%;
106-
}
86+
inset-inline-start: 66.6666667%;
10787
width: 22.2222222%;
10888
}
10989
.frame-3,
11090
.frame-6,
11191
.frame-9 {
112-
left: 88.8888889%;
113-
[dir='rtl'] & {
114-
left: auto;
115-
right: 88.8888889%;
116-
}
92+
inset-inline-start: 88.8888889%;
11793
width: 11.1111111%;
11894
}
11995
.frame-1,

‎resources/css/components/wizard.css‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,26 @@
55
@apply relative mx-auto flex-1 text-center text-xs cursor-pointer border-0 bg-transparent p-0;
66
}
77

8-
.step:not(:first-child):before {
9-
@apply absolute h-1 w-1/2 bg-gray-300 dark:bg-gray-700 start-0 top-[18px];
8+
.step:not(:first-child)::before {
9+
@apply absolute h-1 w-1/2 bg-gray-300 start-0 top-[18px];
1010
content: '';
1111
}
1212

13-
.step:not(:last-child):after {
14-
@apply absolute h-1 w-1/2 bg-gray-300 dark:bg-gray-700 start-[50%] top-[18px];
13+
.dark .step:not(:first-child)::before {
14+
@apply bg-gray-700;
15+
}
16+
17+
.step:not(:last-child)::after {
18+
@apply absolute h-1 w-1/2 bg-gray-300 start-[50%] top-[18px];
1519
content: '';
1620
}
1721

18-
.step.complete:before,
19-
.step.complete:after {
22+
.dark .step:not(:last-child)::after {
23+
@apply bg-gray-700;
24+
}
25+
26+
.step.complete::before,
27+
.step.complete::after {
2028
@apply bg-gray-900;
2129
}
2230

‎resources/css/core/utilities.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -263,12 +263,13 @@
263263
&::after {
264264
--height: 1px;
265265
--line-color: hsl(0deg 0% 95%);
266+
--border-slice: 0;
266267
content: '';
267268
pointer-events: none;
268269
position: absolute;
269270
inset: 0;
270271
height: var(--height);
271-
border-image: conic-gradient(var(--line-color) 0 0) fill 0//0 100vw;
272+
border-image: conic-gradient(var(--line-color) 0 0) fill var(--border-slice) / var(--border-slice) / 100vw;
272273
top: calc(50% - var(--height));
273274
}
274275
.dark &::after {

‎resources/js/components/fieldtypes/bard/BardFieldtype.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -942,3 +942,47 @@ export default {
942942
},
943943
};
944944
</script>
945+
946+
<style>
947+
@layer ui {
948+
/* This container query is inline because it breaks Vite's CSS compilation. Possibly because of the container query syntax and nesting */
949+
.bard-fixed-toolbar {
950+
/* While the fixed toolbar is "stuck", mask the focus state of the editor to prevent blue focus lines appearing around the side of the toolbar while scrolling */
951+
container-type: scroll-state;
952+
@container scroll-state(stuck: top) {
953+
> * {
954+
position: relative;
955+
&::after {
956+
content: '';
957+
position: absolute;
958+
inset: -4px -8px;
959+
box-shadow:
960+
/* Left Mask */
961+
-1px 0px 0px var(--color-gray-300),
962+
/* Right Mask */
963+
1px 0px 0px var(--color-gray-300),
964+
/* Bottom "Shadow" */
965+
0 4px 5px -3px hsl(0deg 0% 85%)
966+
;
967+
border-inline-width: 2px;
968+
border-inline-color: var(--color-gray-50);
969+
}
970+
:is(.dark) & {
971+
&::after {
972+
box-shadow:
973+
/* Left Mask */
974+
-1px 0px 0px var(--color-gray-700),
975+
/* Right Mask */
976+
1px 0px 0px var(--color-gray-700),
977+
/* Bottom "Shadow" */
978+
0 4px 5px -3px hsl(0deg 0% 10%)
979+
;
980+
border-inline-color: var(--color-gray-850);
981+
}
982+
}
983+
}
984+
}
985+
}
986+
}
987+
</style>
988+

0 commit comments

Comments
 (0)