@burger-editor/client 4.0.0-alpha.6 → 4.0.0-alpha.8

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/client.css CHANGED
@@ -92,7 +92,7 @@
92
92
  display: block;
93
93
  }
94
94
 
95
- .bge-menu-base.svelte-15fci6 {
95
+ .bge-menu-base.svelte-1i5f2fs {
96
96
  position: absolute;
97
97
  inset-block-start: var(--y);
98
98
  inset-inline-start: var(--x);
@@ -101,9 +101,8 @@
101
101
  pointer-events: none;
102
102
  }
103
103
 
104
- .bge-menu-margin.svelte-15fci6 {
104
+ .bge-menu-margin.svelte-1i5f2fs {
105
105
  --_line-color: rgb(from var(--bge-ui-primary-color) r g b / 10%);
106
- container: margin-view / size;
107
106
  position: absolute;
108
107
  inset-block-end: 0;
109
108
  inset-inline-start: 0;
@@ -113,6 +112,7 @@
113
112
  justify-content: center;
114
113
  inline-size: 100%;
115
114
  block-size: var(--margin-block-end);
115
+ container: margin-view / size;
116
116
  font-size: 0.8em;
117
117
  font-weight: bold;
118
118
  color: var(--bge-ui-primary-color);
@@ -127,8 +127,8 @@
127
127
  }
128
128
 
129
129
  @container margin-view (height < 1em) {
130
- .bge-menu-margin.svelte-15fci6 {
131
- span:where(.svelte-15fci6) {
130
+ .bge-menu-margin.svelte-1i5f2fs {
131
+ span:where(.svelte-1i5f2fs) {
132
132
  padding: 0.2em 0.4em;
133
133
  color: var(--bge-lightest-color);
134
134
  background: var(--bge-ui-primary-color);
@@ -137,7 +137,7 @@
137
137
  }
138
138
  }
139
139
 
140
- .bge-menu.svelte-15fci6 {
140
+ .bge-menu.svelte-1i5f2fs {
141
141
  --gap: 0.2em;
142
142
  display: flex;
143
143
  align-items: start;
@@ -149,8 +149,8 @@
149
149
  outline: 4px solid var(--bge-ui-primary-color);
150
150
  }
151
151
 
152
- .bge-move-group.svelte-15fci6,
153
- .bge-standard-group.svelte-15fci6 {
152
+ .bge-move-group.svelte-1i5f2fs,
153
+ .bge-standard-group.svelte-1i5f2fs {
154
154
  inset-block-start: 0;
155
155
  display: flex;
156
156
  gap: var(--gap);
@@ -504,6 +504,7 @@
504
504
  --bge-dialog-background-color: var(--bge-ui-background-color);
505
505
  --bge-focus-outline-width: 2px;
506
506
  --bge-tooltip-background-color: rgb(0 0 0 / 60%);
507
+ --bge-font-family-monospace: "Courier New", monospace;
507
508
  }
508
509
 
509
510
  :where(body:has(dialog[open])) {
@@ -523,6 +524,7 @@
523
524
  padding: 0;
524
525
  padding-block: 1em;
525
526
  overscroll-behavior: contain;
527
+ font-size: 16px;
526
528
  color: var(--bge-dialog-font-color);
527
529
  resize: both;
528
530
  background: var(--bge-dialog-background-color);
@@ -596,16 +598,16 @@ select,
596
598
  textarea) {
597
599
  inline-size: 100%;
598
600
  padding: 0.5em 0.7em;
599
- font-size: inherit;
601
+ font-size: 1em;
600
602
  line-height: 1.1;
601
- border: 1px solid var(--bge-border-color);
602
- border-radius: var(--border-radius);
603
603
  }
604
604
  :where(dialog[open], [data-bge-component=block-menu]) :where(input:not([type=radio], [type=checkbox], [type=range]),
605
605
  select,
606
606
  textarea,
607
607
  [contenteditable]) {
608
608
  background: var(--bge-lightest-color);
609
+ border: 1px solid var(--bge-border-color);
610
+ border-radius: var(--border-radius);
609
611
  }
610
612
  :where(dialog[open], [data-bge-component=block-menu]) :where(input:not([type=radio], [type=checkbox], [type=range]),
611
613
  select,
@@ -762,28 +764,33 @@ textarea,
762
764
  display: none;
763
765
  }
764
766
 
765
- [data-bgi] {
767
+ [data-bge-component=editable-area] [data-bgi] {
768
+ --outline: none;
766
769
  min-inline-size: 20px;
767
770
  min-block-size: 20px;
768
- outline: 1px #a6a6a6 dotted;
771
+ outline: var(--outline);
772
+ }
773
+ [data-bge-component=editable-area] [data-bgi]:where([data-bge-container]:hover [data-bge-component=editable-area] [data-bgi]) {
774
+ --outline: 1px #a6a6a6 dotted;
769
775
  }
770
- [data-bgi]:hover {
776
+ [data-bge-component=editable-area] [data-bgi]:hover {
777
+ --outline: 1px solid var(--bge-ui-primary-color);
771
778
  cursor: pointer;
772
- outline: 1px solid var(--bge-ui-primary-color);
773
- background-color: var(--bge-ui-background-color);
779
+ background-color: oklch(from currentcolor l c h/5%);
780
+ background-blend-mode: darken;
774
781
  }
775
- [data-bgi]:hover img {
782
+ [data-bge-component=editable-area] [data-bgi]:hover img {
776
783
  filter: brightness(90%);
777
784
  }
778
- [data-bgi] a,
779
- [data-bgi] area,
780
- [data-bgi] button,
781
- [data-bgi] input,
782
- [data-bgi] label,
783
- [data-bgi] select,
784
- [data-bgi] summary,
785
- [data-bgi] textarea,
786
- [data-bgi] iframe {
785
+ [data-bge-component=editable-area] [data-bgi] a,
786
+ [data-bge-component=editable-area] [data-bgi] area,
787
+ [data-bge-component=editable-area] [data-bgi] button,
788
+ [data-bge-component=editable-area] [data-bgi] input,
789
+ [data-bge-component=editable-area] [data-bgi] label,
790
+ [data-bge-component=editable-area] [data-bgi] select,
791
+ [data-bge-component=editable-area] [data-bgi] summary,
792
+ [data-bge-component=editable-area] [data-bgi] textarea,
793
+ [data-bge-component=editable-area] [data-bgi] iframe {
787
794
  pointer-events: none;
788
795
  }
789
796