realreport-designer 1.9.0-alpha.0 → 1.9.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.
Files changed (7) hide show
  1. package/README.md +6 -0
  2. package/dist/realreport-designer.cjs +199 -192
  3. package/dist/realreport-designer.d.ts +502 -14
  4. package/dist/realreport-designer.js +34703 -32067
  5. package/dist/realreport-designer.umd.js +194 -187
  6. package/dist/styles/realreport-designer.css +758 -524
  7. package/package.json +1 -1
package/dist/styles/realreport-designer.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- RealReport Designer v1.8.8
2
+ RealReport Designer v1.9.1
3
3
  Copyright (C) 2013-2024 WooriTech Inc.
4
4
  All Rights Reserved.
5
5
  */
@@ -126,20 +126,27 @@ All Rights Reserved.
126
126
  .rr-bind-marker {
127
127
  position: absolute;
128
128
  display: none;
129
- width: 9px;
130
- height: 9px;
131
- top: -1px;
132
- right: -1px;
133
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAABFxJREFUeF7tWT1MFEEUHipNTDgs1MY7aGwMoEYLkYgHlRITofKIBs5GGiU2YjQmQmI0YuVPczYeRgOVYCRgBSfmxMJEBTop4NBCLeRITLTS9503m93ZPe6Hmf3J7ksmuwx7b9773jdv3sxUMZ9Llc/9ZwEAAQPcg8B+MuUYtY68STX0RB/kI7W1/Ps4PV/n+zZtvdNToI48uEEtSg3v5cgyfZyiNkgN7xWJUwBwx+MVWW3+UbJSIJwAABEfkOS4qAZ6wYiSxU4AMKfHqEWtrAtVb2En2/ewliNhFomEWG2YGj0hK5ksW1nNsgw9Z9+usonJzyy7/qeQk8gR56jxnLEhGHYBgGQG50F9gxwlh6/1N7OW5kjJUcOHs+kMuzWUZm8IEAtZpr5OakiejgOAyH8QnY+Eq1niQXvZjoveAIhY95gVI+B8azEmqGYAnJ+hxpeznP2I+uiTTlYT2losQCX9fy37OweCBRuKgqAagMfkQVzvxZlYPXtEkVch5y9Osmeji6Lqe9RxqdB4KgGI5qOvja3SeT7I6e7nbGJqSfQXUyFlBYJKAEB9gJCThvqd7NV4TBrtC0UU0+F4xyhbWPyu/wTOAwSTqAIAtAf9NZmb7mGNDbsK2S21f37hG2tqGxZ1YmlMip2qAMBafIoPZgf1Rccs8sEL+obvM7TPVQCAzP9Tb9DXpT7l1BcBQPG092BC7N5OHYYCSQUABvpj7r+bQZf9crg1KeYC0zRQAYCB/ndutrELvYfs955GfJh4z65cn9aPbZoGKgBI0YjY1+dkijJ/uWWuLLRQJZ6gFUEnOEeI6jtUAICyV6v87Mz+InAWqwEqwwOqAfirH+DXj35ZAa1Iz7YdQ+LvDEFXwQDfAwCa7eOwu2wKfNJPT9ioggG+T4JuXgZRH8dVJ0EMoO0DGqkQmnOoEGqiQmjeuCmypRDyfSkMhvl6MwQADNMAHXauBm7YDsNnw2qAXICyWNY5YKGqCAciKH+FuW8qgfnvVSyDXHeUXnAqpMnZrnqWuK/mPJAPEusZYy/p3kAQR47EYEOSWo9dIPT2TbKnI+45FIXfWBEwFbTKEJ0tzWE2Miz3WLyLIj+bNl2SoPIDEwveEqmcAjzwAAHlca2eCTWhLTkQNrtVxpYXzq9lTVdlRZ2HPXYAgHGwPcbSaACBs+Hq5cquxm7fTVtFHWpXqOH8zxVXY3omICdoh6UiI/5fjkbocrSaRXYbL0czX3A5uk6Xo5nc5ahFxLk6nPrEN6K9fly7GKAfc4D+wBW5ChkkpdBfsjgBAIyryxtqWCFKttr8ITY5cHy5XB1OAcDt5EBEqcOUH4o4g3meqtRxrttpAPQ+IlECCH55gdWDL5/I6HwpQzKF40UTXClscBMApdgr/ZsAAOmQekxhwACPBUy6uQEDpEPqMYUBAzwWMOnmBgyQDqnHFAYM8FjApJsbMEA6pB5TGDDAYwGTbm7AAOmQekxhwACPBUy6ub5nwD9vMjxQGKSgFgAAAABJRU5ErkJggg==") no-repeat center/contain;
129
+ width: 8px;
130
+ height: 8px;
131
+ top: -2px;
132
+ right: -2px;
134
133
  }
135
134
 
136
135
  .rr-bind-marker[data-sys] {
137
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAABL1JREFUeF7tWk1IVFEUvi41rEBbZTQRZLVRc5FFkSTqxkgKDHThCEVNC9OiKDKzUor+/Fk0RYHjQqGgEHKjYowUZQtz3JQKkVLtEkppXNb5ru+93rxG5nln3rvDm3fgMm/e3J9zvvOdc/8mjaW4pKW4/cwFwGVA8iCQT6ocplKsqOShTxRIiMpP5bmfPkeVd3FrLzsEYOBVxWjVWLNGzVLFIJVrVPAsJLIAWE/anqHSIqT1/43QT6eOJaa7lQGAl7RrpwIQNEnPzGD5pbt4SV+bwbJysll2zgb++9ePcyy8EGbz33+wmbEpFhr+wJYWw0YjESKNVAKmraeKdgMAukd4fdvu7ayivpLlFu1Yjd5seuwTG+jqZzPvp4zt0D/CwpTYBQC8Da/D+1yyNmaz2tvHV2240arQ0Dh71trH2aETsABsUBPnimDYBUC33vg8ormXjM9Yu8aUl2JVCi/8ZoELT9gkhYYBhLpYbe0AAJQE9bkc9JaxY1dqYukl9PvTG73sVWBI3xahgPGlMcBLI8P7lhuvjhEFBLAgsBICVjIAcf+FCs/2oP3ph5j5rJcHpzr14YA8sIVK1HxgJQCgHqc+El7TwPWExXwsCJETWiua9YlxxVCwCgCP4n2u69nei3Fn+1hGG3/H7OD3delfgwWzxnpWAYCYq8VgmOfP9V1arf4JqX+v+qZ+ndBDnXrtAgCxDxZI8b5qpIEF8D5YECFWMAC7ugmMguVtR8ifEG+KdtKQ79MvmwuoH+wsNbECgBbqnSe/PUf2Me+dE6K6J6Rd4Pxj9u7FG7UvrA47rAYgSAMcwCBY6u49uj8hhoh28vb5a9ZDq0RFcI5QbBsAMrK/EShsmu7X3LIVAC0Bto3e1ba0oh6Mtx220q2HmtVuEP/IA5bmgD9q748+Y+aRLye38hlZlYi8Z0USTHkAZgnqzYA7CUNgktTCNG1pCASpdz4LpGoS1ADw+etZflmh1CQgYxpsIYtTeiGkLYUz6HS3fULuUrixwMdPlBWxZSmMsbREKDMPGDZDc6SXxxiPVkyDGCNAZXk7XETb4V5J2+Ea2g7TPYIiuDhpsAsAII0VIRcZyVD2gQjs1pIhbnmaXtp8JEbL3/lv2l2B7UdiAACHocgF6/AFV14+mw5F/XQoiuszRX7RJxhp+6EoxvdSSdljcdUDWijgRUldOatqqjbmooR8xxXZSPegvi/pFyOqMgF60LZkCAccliTyagyHHjraY9yoh6BGpK2aBo3jIB/gKEoDAYmx6nJ13EtlfjnaRpej/xKeajymvKS5HI0aDniJdUKJt5wnydUIvD0SGNTP82rzmLTXj2MXA/RjIjGCDXx2UAXL5rzSQpZL9whgR3pmOtu0k++q+R8klhaXuJen6f8Ak8Pj+uWt2gWyPbyOcDMtMgCAcggJKKvdGpvWOHpFeB2gxqS8sbksAFQ9PPTQQqWYyrK7zQvW9vjHGAyfNd8ssqZsAPTaYBcJICqVl2BJnvKMkxzVuzA6SCXigsMJAIjaEFe7ZGJAXIaINnYBEEXOKe1cBjjFk6J2uAwQRc4p7VwGOMWTona4DBBFzintXAY4xZOidrgMEEXOKe1cBjjFk6J2uAwQRc4p7f4CVwtWUNcS9RIAAAAASUVORK5CYII=") no-repeat center/contain;
136
+ background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuMjUiIGZpbGw9IiM0NENENkIiIHN0cm9rZT0iIzNBM0EzQSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KPC9zdmc+Cg==") no-repeat center/contain;
138
137
  }
139
138
 
140
139
  .rr-bind-marker[data-vis] {
141
- display: inline-block;
142
- z-index: 1;
140
+ display: flex;
141
+ z-index: 5;
142
+ background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuMjUiIGZpbGw9IiM0RUFBRkYiIHN0cm9rZT0iIzNBM0EzQSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KPC9zdmc+Cg==") no-repeat center center;
143
+ }
144
+
145
+ .rr-bind-marker[data-vis][data-sys] {
146
+ background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuMjUiIGZpbGw9IiM0NENENkIiIHN0cm9rZT0iIzNBM0EzQSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KPC9zdmc+Cg==") no-repeat center center;
147
+ }
148
+ .rr-bind-marker[data-vis][data-language] {
149
+ background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuMjUiIGZpbGw9IiNGRkU2MDAiIHN0cm9rZT0iIzNBM0EzQSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KPC9zdmc+Cg==") no-repeat center center;
143
150
  }
144
151
 
145
152
  .rr-group-element[data-empty] {
@@ -2762,51 +2769,54 @@ input[data-rrproperty]::-webkit-inner-spin-button {
2762
2769
 
2763
2770
  /* Designer Style */
2764
2771
 
2765
- :root {
2766
- --font-family: "Malgun Gothic", "맑은 고딕", AppleSDGothicNeo-Light, sans-serif;
2772
+ .rrd-root {
2773
+ --rrd-font-family: "Malgun Gothic", "맑은 고딕", AppleSDGothicNeo-Light, sans-serif;
2767
2774
 
2768
- --panel-header-color: #4E4E80;
2775
+ --rrd-panel-header-color: #4E4E80;
2769
2776
 
2770
- --dialog-background: #333842;
2777
+ --rrd-dialog-background: #333842;
2771
2778
  --rrd-dialog-title-background: #7474c1;
2772
2779
  --rrd-dialog-bottom-background: #f0f0f0;
2773
- --dialog-field-label: #d7dae0;
2774
- --dialog-invalidate-color: #ff4d4f;
2775
-
2776
- --container-background: #21252b;
2780
+ --rrd-dialog-invalidate-color: #ff4d4f;
2777
2781
 
2778
- --common-active-foreground: #D7DAE0;
2779
- --common-inactive-foreground: #9DA5B4;
2780
-
2781
- --panel-container-background: #282c34;
2782
+ --rrd-script-editor-background: #282c34;
2783
+ --rrd-tool-item-border-radius: 3px;
2784
+ --rrd-tool-item-edit-padding-horz: 8px;
2785
+ --rrd-tool-item-select-background-color: #fcfcfc;
2782
2786
 
2783
- --script-editor-background: #282c34;
2784
- --tool-item-border-radius: 3px;
2785
- --tool-item-edit-padding-horz: 8px;
2786
- --tool-item-select-background-color: #fcfcfc;
2787
+ --rrd-focus-bg-color: #4daaff;
2788
+ --rrd-marquee-bg-color: #55adff;
2789
+ --rrd-marquee-cellselect-bg-color: #49a7ff;
2790
+ --rrd-marquee-focus-bg-color: #0083ff;
2787
2791
 
2788
- --focus-bg-color: #4daaff;
2789
- --marquee-bg-color: #55adff;
2790
- --marquee-cellselect-bg-color: #49a7ff;
2791
- --marquee-focus-bg-color: #0083ff;
2792
-
2793
- --light-theme-bg-marquee-focus-color: #7474c1cc;
2794
- --light-theme-bg-marquee-cellselect-color: #303051a1;
2792
+ --rrd-preview-border-color: lightgray;
2795
2793
 
2796
- --preview-border-color: lightgray;
2794
+ font-family: var(--rrd-font-family);
2795
+ font-size: 13px;
2796
+ color: var(--light-theme-dark-text-color);
2797
+ line-height: normal;
2798
+ -webkit-appearance: none;
2799
+ outline: none;
2800
+ -webkit-touch-callout: none;
2801
+ -webkit-user-select: none;
2802
+ -moz-user-select: none;
2803
+ -ms-user-select: none;
2804
+ user-select: none;
2805
+ -ms-touch-action: none;
2806
+ -webkit-print-color-adjust: exact;
2797
2807
  }
2798
2808
 
2799
- [data-theme="violet"] {
2800
- --light-theme-primary-color-1: #F4F4FC;
2801
- --light-theme-primary-color-2: #e7e7f9;
2802
- --light-theme-primary-color-3: #ededfd;
2803
- --light-theme-primary-color-4: #dbdbf5;
2804
- --light-theme-primary-color-5: #cfcff4;
2805
- --light-theme-primary-color-6: #c8c8e8;
2806
- --light-theme-primary-color-7: #acace3;
2807
- --light-theme-primary-color-8: #9191d8;
2808
- --light-theme-primary-color-9: #7979c6;
2809
- --light-theme-primary-color-10: #6969b5;
2809
+ .rrd-root[data-theme="violet"] {
2810
+ --rrd-light-theme-primary-color-1: #F4F4FC;
2811
+ --rrd-light-theme-primary-color-2: #e7e7f9;
2812
+ --rrd-light-theme-primary-color-3: #ededfd;
2813
+ --rrd-light-theme-primary-color-4: #dbdbf5;
2814
+ --rrd-light-theme-primary-color-5: #cfcff4;
2815
+ --rrd-light-theme-primary-color-6: #c8c8e8;
2816
+ --rrd-light-theme-primary-color-7: #acace3;
2817
+ --rrd-light-theme-primary-color-8: #9191d8;
2818
+ --rrd-light-theme-primary-color-9: #7979c6;
2819
+ --rrd-light-theme-primary-color-10: #6969b5;
2810
2820
 
2811
2821
  --light-theme-scroller-color: #e7e7f9;
2812
2822
  --light-theme-ruler-color: #e1e1f7;
@@ -2818,17 +2828,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
2818
2828
  --light-theme-dark-text-color: #3a3a3a;
2819
2829
  --light-theme-icon-color: #7979c6;
2820
2830
  }
2821
- [data-theme="lightblue"] {
2822
- --light-theme-primary-color-1: #F2F5FB;
2823
- --light-theme-primary-color-2: #E4EAF5;
2824
- --light-theme-primary-color-3: #DFE6F2;
2825
- --light-theme-primary-color-4: #D1DAE8;
2826
- --light-theme-primary-color-5: #C6D2E4;
2827
- --light-theme-primary-color-6: #BFCCE0;
2828
- --light-theme-primary-color-7: #95AED4;
2829
- --light-theme-primary-color-8: #81A2CA;
2830
- --light-theme-primary-color-9: #6084B8;
2831
- --light-theme-primary-color-10: #4b6f9c;
2831
+ .rrd-root[data-theme="lightblue"] {
2832
+ --rrd-light-theme-primary-color-1: #F2F5FB;
2833
+ --rrd-light-theme-primary-color-2: #E4EAF5;
2834
+ --rrd-light-theme-primary-color-3: #DFE6F2;
2835
+ --rrd-light-theme-primary-color-4: #D1DAE8;
2836
+ --rrd-light-theme-primary-color-5: #C6D2E4;
2837
+ --rrd-light-theme-primary-color-6: #BFCCE0;
2838
+ --rrd-light-theme-primary-color-7: #95AED4;
2839
+ --rrd-light-theme-primary-color-8: #81A2CA;
2840
+ --rrd-light-theme-primary-color-9: #6084B8;
2841
+ --rrd-light-theme-primary-color-10: #4b6f9c;
2832
2842
 
2833
2843
  --light-theme-scroller-color: #dfe9f9;
2834
2844
  --light-theme-ruler-color: #d9e5f7;
@@ -2840,17 +2850,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
2840
2850
  --light-theme-dark-text-color: #3a3a3a;
2841
2851
  --light-theme-icon-color: #6084B8;
2842
2852
  }
2843
- [data-theme="honolulublue"] {
2844
- --light-theme-primary-color-1: #f8fcff;
2845
- --light-theme-primary-color-2: #edf6fc;
2846
- --light-theme-primary-color-3: #F0F6FB;
2847
- --light-theme-primary-color-4: #E2EEF6;
2848
- --light-theme-primary-color-5: #C7DDEC;
2849
- --light-theme-primary-color-6: #d5e9f6;
2850
- --light-theme-primary-color-7: #a8cbe3;
2851
- --light-theme-primary-color-8: #5999C4;
2852
- --light-theme-primary-color-9: #2277B0;
2853
- --light-theme-primary-color-10: #1F6CA0;
2853
+ .rrd-root[data-theme="honolulublue"] {
2854
+ --rrd-light-theme-primary-color-1: #f8fcff;
2855
+ --rrd-light-theme-primary-color-2: #edf6fc;
2856
+ --rrd-light-theme-primary-color-3: #F0F6FB;
2857
+ --rrd-light-theme-primary-color-4: #E2EEF6;
2858
+ --rrd-light-theme-primary-color-5: #C7DDEC;
2859
+ --rrd-light-theme-primary-color-6: #d5e9f6;
2860
+ --rrd-light-theme-primary-color-7: #a8cbe3;
2861
+ --rrd-light-theme-primary-color-8: #5999C4;
2862
+ --rrd-light-theme-primary-color-9: #2277B0;
2863
+ --rrd-light-theme-primary-color-10: #1F6CA0;
2854
2864
 
2855
2865
  --light-theme-scroller-color: #e3eef6;
2856
2866
  --light-theme-ruler-color: #b9d7eb;
@@ -2862,17 +2872,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
2862
2872
  --light-theme-dark-text-color: #031b2c;
2863
2873
  --light-theme-icon-color: #2277B0;
2864
2874
  }
2865
- [data-theme="blue"] {
2866
- --light-theme-primary-color-1: #F2F5FB;
2867
- --light-theme-primary-color-2: #E4EAF5;
2868
- --light-theme-primary-color-3: #DFE6F2;
2869
- --light-theme-primary-color-4: #D1DAE8;
2870
- --light-theme-primary-color-5: #C6D2E4;
2871
- --light-theme-primary-color-6: #BFCCE0;
2872
- --light-theme-primary-color-7: #7E9BB7;
2873
- --light-theme-primary-color-8: #19478A;
2874
- --light-theme-primary-color-9: #0D3777;
2875
- --light-theme-primary-color-10: #082857;
2875
+ .rrd-root[data-theme="blue"] {
2876
+ --rrd-light-theme-primary-color-1: #F2F5FB;
2877
+ --rrd-light-theme-primary-color-2: #E4EAF5;
2878
+ --rrd-light-theme-primary-color-3: #DFE6F2;
2879
+ --rrd-light-theme-primary-color-4: #D1DAE8;
2880
+ --rrd-light-theme-primary-color-5: #C6D2E4;
2881
+ --rrd-light-theme-primary-color-6: #BFCCE0;
2882
+ --rrd-light-theme-primary-color-7: #7E9BB7;
2883
+ --rrd-light-theme-primary-color-8: #19478A;
2884
+ --rrd-light-theme-primary-color-9: #0D3777;
2885
+ --rrd-light-theme-primary-color-10: #082857;
2876
2886
 
2877
2887
  --light-theme-scroller-color: #dfe9f9;
2878
2888
  --light-theme-ruler-color: #d0dff5;
@@ -2884,17 +2894,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
2884
2894
  --light-theme-dark-text-color: #3a3a3a;
2885
2895
  --light-theme-icon-color: #395268;
2886
2896
  }
2887
- [data-theme="aqua"] {
2888
- --light-theme-primary-color-1: #E4F7F7;
2889
- --light-theme-primary-color-2: #DEF7F6;
2890
- --light-theme-primary-color-3: #D7F3F2;
2891
- --light-theme-primary-color-4: #C9F0F3;
2892
- --light-theme-primary-color-5: #BFECED;
2893
- --light-theme-primary-color-6: #AFE6E2;
2894
- --light-theme-primary-color-7: #95DEDD;
2895
- --light-theme-primary-color-8: #3BBFBB;
2896
- --light-theme-primary-color-9: #2AABAA;
2897
- --light-theme-primary-color-10: #269B99;
2897
+ .rrd-root[data-theme="aqua"] {
2898
+ --rrd-light-theme-primary-color-1: #E4F7F7;
2899
+ --rrd-light-theme-primary-color-2: #DEF7F6;
2900
+ --rrd-light-theme-primary-color-3: #D7F3F2;
2901
+ --rrd-light-theme-primary-color-4: #C9F0F3;
2902
+ --rrd-light-theme-primary-color-5: #BFECED;
2903
+ --rrd-light-theme-primary-color-6: #AFE6E2;
2904
+ --rrd-light-theme-primary-color-7: #95DEDD;
2905
+ --rrd-light-theme-primary-color-8: #3BBFBB;
2906
+ --rrd-light-theme-primary-color-9: #2AABAA;
2907
+ --rrd-light-theme-primary-color-10: #269B99;
2898
2908
 
2899
2909
  --light-theme-scroller-color: #DEF7F6;
2900
2910
  --light-theme-ruler-color: #ceedec;
@@ -2906,17 +2916,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
2906
2916
  --light-theme-dark-text-color: #3a3a3a;
2907
2917
  --light-theme-icon-color: #2AABAA;
2908
2918
  }
2909
- [data-theme="yellow"] {
2910
- --light-theme-primary-color-1: #fffff9;
2911
- --light-theme-primary-color-2: #fcfbe9;
2912
- --light-theme-primary-color-3: #fcfae1;
2913
- --light-theme-primary-color-4: #f9f2c9;
2914
- --light-theme-primary-color-5: #f7f0ca;
2915
- --light-theme-primary-color-6: #f8edae;
2916
- --light-theme-primary-color-7: #fede7c;
2917
- --light-theme-primary-color-8: #fac110;
2918
- --light-theme-primary-color-9: #f1b600;
2919
- --light-theme-primary-color-10: #e0a700;
2919
+ .rrd-root[data-theme="yellow"] {
2920
+ --rrd-light-theme-primary-color-1: #fffff9;
2921
+ --rrd-light-theme-primary-color-2: #fcfbe9;
2922
+ --rrd-light-theme-primary-color-3: #fcfae1;
2923
+ --rrd-light-theme-primary-color-4: #f9f2c9;
2924
+ --rrd-light-theme-primary-color-5: #f7f0ca;
2925
+ --rrd-light-theme-primary-color-6: #f8edae;
2926
+ --rrd-light-theme-primary-color-7: #fede7c;
2927
+ --rrd-light-theme-primary-color-8: #fac110;
2928
+ --rrd-light-theme-primary-color-9: #f1b600;
2929
+ --rrd-light-theme-primary-color-10: #e0a700;
2920
2930
 
2921
2931
  --light-theme-scroller-color: #faf8e2;
2922
2932
  --light-theme-ruler-color: #f9f3c2;
@@ -2928,17 +2938,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
2928
2938
  --light-theme-dark-text-color: #1e1a00;
2929
2939
  --light-theme-icon-color: #f6c100;
2930
2940
  }
2931
- [data-theme="orange"] {
2932
- --light-theme-primary-color-1: #F9ECE2;
2933
- --light-theme-primary-color-2: #F9E7DD;
2934
- --light-theme-primary-color-3: #F7E3D8;
2935
- --light-theme-primary-color-4: #F4DDC8;
2936
- --light-theme-primary-color-5: #F2D4BF;
2937
- --light-theme-primary-color-6: #EDC3B0;
2938
- --light-theme-primary-color-7: #E9B595;
2939
- --light-theme-primary-color-8: #D0713A;
2940
- --light-theme-primary-color-9: #BC6129;
2941
- --light-theme-primary-color-10: #AC5825;
2941
+ .rrd-root[data-theme="orange"] {
2942
+ --rrd-light-theme-primary-color-1: #F9ECE2;
2943
+ --rrd-light-theme-primary-color-2: #F9E7DD;
2944
+ --rrd-light-theme-primary-color-3: #F7E3D8;
2945
+ --rrd-light-theme-primary-color-4: #F4DDC8;
2946
+ --rrd-light-theme-primary-color-5: #F2D4BF;
2947
+ --rrd-light-theme-primary-color-6: #EDC3B0;
2948
+ --rrd-light-theme-primary-color-7: #E9B595;
2949
+ --rrd-light-theme-primary-color-8: #D0713A;
2950
+ --rrd-light-theme-primary-color-9: #BC6129;
2951
+ --rrd-light-theme-primary-color-10: #AC5825;
2942
2952
 
2943
2953
  --light-theme-scroller-color: #F9E7DD;
2944
2954
  --light-theme-ruler-color: #f5dccd;
@@ -2951,17 +2961,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
2951
2961
  --light-theme-icon-color: #BC6129;
2952
2962
  }
2953
2963
 
2954
- [data-theme="burgundy"] {
2955
- --light-theme-primary-color-1: #FCF7F9;
2956
- --light-theme-primary-color-2: #F8F0F3;
2957
- --light-theme-primary-color-3: #F3E8EC;
2958
- --light-theme-primary-color-4: #f2e3e7;
2959
- --light-theme-primary-color-5: #D8BAC2;
2960
- --light-theme-primary-color-6: #efdde2;
2961
- --light-theme-primary-color-7: #af7685;
2962
- --light-theme-primary-color-8: #903E54;
2963
- --light-theme-primary-color-9: #6C001D;
2964
- --light-theme-primary-color-10: #4b0115;
2964
+ .rrd-root[data-theme="burgundy"] {
2965
+ --rrd-light-theme-primary-color-1: #FCF7F9;
2966
+ --rrd-light-theme-primary-color-2: #F8F0F3;
2967
+ --rrd-light-theme-primary-color-3: #F3E8EC;
2968
+ --rrd-light-theme-primary-color-4: #f2e3e7;
2969
+ --rrd-light-theme-primary-color-5: #D8BAC2;
2970
+ --rrd-light-theme-primary-color-6: #efdde2;
2971
+ --rrd-light-theme-primary-color-7: #af7685;
2972
+ --rrd-light-theme-primary-color-8: #903E54;
2973
+ --rrd-light-theme-primary-color-9: #6C001D;
2974
+ --rrd-light-theme-primary-color-10: #4b0115;
2965
2975
 
2966
2976
  --light-theme-scroller-color: #f5ebed;
2967
2977
  --light-theme-ruler-color: #e8cdd4;
@@ -2973,17 +2983,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
2973
2983
  --light-theme-dark-text-color: #1e010d;
2974
2984
  --light-theme-icon-color: #903E54;
2975
2985
  }
2976
- [data-theme="pumpkin"] {
2977
- --light-theme-primary-color-1: #fdf6ef;
2978
- --light-theme-primary-color-2: #fdf0e6;
2979
- --light-theme-primary-color-3: #fbf0e7;
2980
- --light-theme-primary-color-4: #fcebdc;
2981
- --light-theme-primary-color-5: #FCCFAB;
2982
- --light-theme-primary-color-6: #fedcc2;
2983
- --light-theme-primary-color-7: #faaf75;
2984
- --light-theme-primary-color-8: #ff8223;
2985
- --light-theme-primary-color-9: #FF750B;
2986
- --light-theme-primary-color-10: #E86500;
2986
+ .rrd-root[data-theme="pumpkin"] {
2987
+ --rrd-light-theme-primary-color-1: #fdf6ef;
2988
+ --rrd-light-theme-primary-color-2: #fdf0e6;
2989
+ --rrd-light-theme-primary-color-3: #fbf0e7;
2990
+ --rrd-light-theme-primary-color-4: #fcebdc;
2991
+ --rrd-light-theme-primary-color-5: #FCCFAB;
2992
+ --rrd-light-theme-primary-color-6: #fedcc2;
2993
+ --rrd-light-theme-primary-color-7: #faaf75;
2994
+ --rrd-light-theme-primary-color-8: #ff8223;
2995
+ --rrd-light-theme-primary-color-9: #FF750B;
2996
+ --rrd-light-theme-primary-color-10: #E86500;
2987
2997
 
2988
2998
  --light-theme-scroller-color: #f8ede3;
2989
2999
  --light-theme-ruler-color: #ffe5ce;
@@ -2995,17 +3005,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
2995
3005
  --light-theme-dark-text-color: #220f00;
2996
3006
  --light-theme-icon-color: #FF6F00;
2997
3007
  }
2998
- [data-theme="lightgreen"] {
2999
- --light-theme-primary-color-1: #EBF2EA;
3000
- --light-theme-primary-color-2: #E2F1E0;
3001
- --light-theme-primary-color-3: #ddebdc;
3002
- --light-theme-primary-color-4: #D3EAD5;
3003
- --light-theme-primary-color-5: #CCE8CC;
3004
- --light-theme-primary-color-6: #C4DFC1;
3005
- --light-theme-primary-color-7: #AAD6A8;
3006
- --light-theme-primary-color-8: #6faf6b;
3007
- --light-theme-primary-color-9: #52984E;
3008
- --light-theme-primary-color-10: #498C46;
3008
+ .rrd-root[data-theme="lightgreen"] {
3009
+ --rrd-light-theme-primary-color-1: #EBF2EA;
3010
+ --rrd-light-theme-primary-color-2: #E2F1E0;
3011
+ --rrd-light-theme-primary-color-3: #ddebdc;
3012
+ --rrd-light-theme-primary-color-4: #D3EAD5;
3013
+ --rrd-light-theme-primary-color-5: #CCE8CC;
3014
+ --rrd-light-theme-primary-color-6: #C4DFC1;
3015
+ --rrd-light-theme-primary-color-7: #AAD6A8;
3016
+ --rrd-light-theme-primary-color-8: #6faf6b;
3017
+ --rrd-light-theme-primary-color-9: #52984E;
3018
+ --rrd-light-theme-primary-color-10: #498C46;
3009
3019
 
3010
3020
  --light-theme-scroller-color: #E2F1E0;
3011
3021
  --light-theme-ruler-color: #daead9;
@@ -3017,17 +3027,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3017
3027
  --light-theme-dark-text-color: #3a3a3a;
3018
3028
  --light-theme-icon-color: #52984E;
3019
3029
  }
3020
- [data-theme="green"] {
3021
- --light-theme-primary-color-1: #F3FDF3;
3022
- --light-theme-primary-color-2: #E5F4E5;
3023
- --light-theme-primary-color-3: #DEEFDE;
3024
- --light-theme-primary-color-4: #D6EAD6;
3025
- --light-theme-primary-color-5: #B9D7B9;
3026
- --light-theme-primary-color-6: #86b487;
3027
- --light-theme-primary-color-7: #438B45;
3028
- --light-theme-primary-color-8: #08650B;
3029
- --light-theme-primary-color-9: #065409;
3030
- --light-theme-primary-color-10: #054C08;
3030
+ .rrd-root[data-theme="green"] {
3031
+ --rrd-light-theme-primary-color-1: #F3FDF3;
3032
+ --rrd-light-theme-primary-color-2: #E5F4E5;
3033
+ --rrd-light-theme-primary-color-3: #DEEFDE;
3034
+ --rrd-light-theme-primary-color-4: #D6EAD6;
3035
+ --rrd-light-theme-primary-color-5: #B9D7B9;
3036
+ --rrd-light-theme-primary-color-6: #86b487;
3037
+ --rrd-light-theme-primary-color-7: #438B45;
3038
+ --rrd-light-theme-primary-color-8: #08650B;
3039
+ --rrd-light-theme-primary-color-9: #065409;
3040
+ --rrd-light-theme-primary-color-10: #054C08;
3031
3041
  --light-theme-scroller-color: #E2F1E0;
3032
3042
  --light-theme-ruler-color: #bed9bd;
3033
3043
  --light-theme-ruler-content-color: #f7fff7;
@@ -3038,17 +3048,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3038
3048
  --light-theme-dark-text-color: #3a3a3a;
3039
3049
  --light-theme-icon-color: #065409;
3040
3050
  }
3041
- [data-theme="darkgreen"] {
3042
- --light-theme-primary-color-1: #ebf4dc;
3043
- --light-theme-primary-color-2: #DFEACC;
3044
- --light-theme-primary-color-3: #dfeaca;
3045
- --light-theme-primary-color-4: #CFDEB4;
3046
- --light-theme-primary-color-5: #BCCD9C;
3047
- --light-theme-primary-color-6: #cfdfaf;
3048
- --light-theme-primary-color-7: #91A966;
3049
- --light-theme-primary-color-8: #1f6e1c;
3050
- --light-theme-primary-color-9: #0d5d0a;
3051
- --light-theme-primary-color-10: #084b05;
3051
+ .rrd-root[data-theme="darkgreen"] {
3052
+ --rrd-light-theme-primary-color-1: #ebf4dc;
3053
+ --rrd-light-theme-primary-color-2: #DFEACC;
3054
+ --rrd-light-theme-primary-color-3: #dfeaca;
3055
+ --rrd-light-theme-primary-color-4: #CFDEB4;
3056
+ --rrd-light-theme-primary-color-5: #BCCD9C;
3057
+ --rrd-light-theme-primary-color-6: #cfdfaf;
3058
+ --rrd-light-theme-primary-color-7: #91A966;
3059
+ --rrd-light-theme-primary-color-8: #1f6e1c;
3060
+ --rrd-light-theme-primary-color-9: #0d5d0a;
3061
+ --rrd-light-theme-primary-color-10: #084b05;
3052
3062
 
3053
3063
  --light-theme-scroller-color: #f0f6e4;
3054
3064
  --light-theme-ruler-color: #d0deb8;
@@ -3060,17 +3070,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3060
3070
  --light-theme-dark-text-color: #121a03;
3061
3071
  --light-theme-icon-color: #0d5d0a;
3062
3072
  }
3063
- [data-theme="slate"] {
3064
- --light-theme-primary-color-1: #f2f6fc;
3065
- --light-theme-primary-color-2: #e1e8f1;
3066
- --light-theme-primary-color-3: #d6dee7;
3067
- --light-theme-primary-color-4: #cdd3dd;
3068
- --light-theme-primary-color-5: #96A0B1;
3069
- --light-theme-primary-color-6: #a8b5c1;
3070
- --light-theme-primary-color-7: #818DA0;
3071
- --light-theme-primary-color-8: #35455A;
3072
- --light-theme-primary-color-9: #273345;
3073
- --light-theme-primary-color-10: #232E3F;
3073
+ .rrd-root[data-theme="slate"] {
3074
+ --rrd-light-theme-primary-color-1: #f2f6fc;
3075
+ --rrd-light-theme-primary-color-2: #e1e8f1;
3076
+ --rrd-light-theme-primary-color-3: #d6dee7;
3077
+ --rrd-light-theme-primary-color-4: #cdd3dd;
3078
+ --rrd-light-theme-primary-color-5: #96A0B1;
3079
+ --rrd-light-theme-primary-color-6: #a8b5c1;
3080
+ --rrd-light-theme-primary-color-7: #818DA0;
3081
+ --rrd-light-theme-primary-color-8: #35455A;
3082
+ --rrd-light-theme-primary-color-9: #273345;
3083
+ --rrd-light-theme-primary-color-10: #232E3F;
3074
3084
 
3075
3085
  --light-theme-scroller-color: #eaeef5;
3076
3086
  --light-theme-ruler-color: #d3dae5;
@@ -3082,17 +3092,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3082
3092
  --light-theme-dark-text-color: #3a3a3a;
3083
3093
  --light-theme-icon-color: #273345;
3084
3094
  }
3085
- [data-theme="black"] {
3086
- --light-theme-primary-color-1: #ffffff;
3087
- --light-theme-primary-color-2: #e9e9e9;
3088
- --light-theme-primary-color-3: #f7f7f7;
3089
- --light-theme-primary-color-4: #efefef;
3090
- --light-theme-primary-color-5: #cccccc;
3091
- --light-theme-primary-color-6: #ececed;
3092
- --light-theme-primary-color-7: #c2c2c2;
3093
- --light-theme-primary-color-8: #262626;
3094
- --light-theme-primary-color-9: #000000;
3095
- --light-theme-primary-color-10: #404040;
3095
+ .rrd-root[data-theme="black"] {
3096
+ --rrd-light-theme-primary-color-1: #ffffff;
3097
+ --rrd-light-theme-primary-color-2: #e9e9e9;
3098
+ --rrd-light-theme-primary-color-3: #f7f7f7;
3099
+ --rrd-light-theme-primary-color-4: #efefef;
3100
+ --rrd-light-theme-primary-color-5: #cccccc;
3101
+ --rrd-light-theme-primary-color-6: #ececed;
3102
+ --rrd-light-theme-primary-color-7: #c2c2c2;
3103
+ --rrd-light-theme-primary-color-8: #262626;
3104
+ --rrd-light-theme-primary-color-9: #000000;
3105
+ --rrd-light-theme-primary-color-10: #404040;
3096
3106
 
3097
3107
  --light-theme-scroller-color: #e3e3e3;
3098
3108
  --light-theme-ruler-color: #b3b3b3;
@@ -3106,26 +3116,11 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3106
3116
  }
3107
3117
 
3108
3118
  /* rrd-designer */
3109
- .rr-report-designer * {
3119
+ .rrd-report-designer * {
3110
3120
  box-sizing: border-box;
3111
3121
  }
3112
- .rrd-root {
3113
- font-family: var(--font-family);
3114
- font-size: 13px;
3115
- line-height: normal;
3116
- color: #eaeaea;
3117
- -webkit-appearance: none;
3118
- outline: none;
3119
- -webkit-touch-callout: none;
3120
- -webkit-user-select: none;
3121
- -moz-user-select: none;
3122
- -ms-user-select: none;
3123
- user-select: none;
3124
- -ms-touch-action: none;
3125
- -webkit-print-color-adjust: exact;
3126
- }
3127
3122
  .rrd-app {
3128
- background-color: var(--light-theme-primary-color-4);
3123
+ background-color: var(--rrd-light-theme-primary-color-4);
3129
3124
  }
3130
3125
  .rrd-popup-layer {
3131
3126
  background-color: transparent;
@@ -3135,18 +3130,26 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3135
3130
  }
3136
3131
 
3137
3132
  /* parent font 스타일을 상속받지 않으므로 별도로 지정해야한다. */
3138
- .rr-report-designer button,
3139
- .rr-report-designer input {
3140
- font-family: var(--font-family);
3133
+ .rrd-report-designer button,
3134
+ .rrd-report-designer input {
3135
+ font-family: var(--rrd-font-family);
3141
3136
  }
3142
- .rrd-assetpanel input,
3143
- .rrd-datapanel input {
3137
+ .rrd-assetpanel {
3138
+ z-index: 210;
3139
+ }
3140
+ .rrd-assetpanel input:not([type]),
3141
+ .rrd-datapanel input:not([type]) {
3144
3142
  height: 22px;
3145
- border: 1px solid var(--light-theme-primary-color-7);
3143
+ border: 1px solid var(--rrd-light-theme-primary-color-7);
3146
3144
  border-radius: 3px;
3147
3145
  }
3148
- .rr-report-designer input:focus {
3149
- outline: 1px solid var(--light-theme-primary-color-8);
3146
+ .rrd-datapanel .rrd-tool-select-control {
3147
+ height: 22px;
3148
+ }
3149
+ .rrd-report-designer input:focus {
3150
+ outline: 1px solid var(--rrd-light-theme-primary-color-8);
3151
+ border-radius: 2px;
3152
+ border: none;
3150
3153
  }
3151
3154
  ::placeholder {
3152
3155
  color: #adb5bd;
@@ -3162,18 +3165,28 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3162
3165
  background-color: transparent;
3163
3166
  color: var(--light-theme-dark-text-color);
3164
3167
  border-radius: 3px;
3168
+ min-width: fit-content;
3169
+ white-space: nowrap;
3170
+ }
3171
+
3172
+ .rrd-tool-text {
3173
+ white-space: nowrap;
3165
3174
  }
3166
3175
  /** 미리보기 */
3167
3176
  .rrd-preview-container {
3168
- background: var(--light-theme-primary-color-2);
3177
+ background: var(--rrd-light-theme-primary-color-2);
3169
3178
  }
3170
3179
 
3171
3180
  /* headerbar */
3172
- .rrd-headerbar {
3181
+ .rrd-headerbar{
3173
3182
  min-height: 35px;
3174
- background-color: var(--light-theme-primary-color-3);
3183
+ background-color: var(--rrd-light-theme-primary-color-3);
3175
3184
  box-shadow: inset 0 -1px 0 0 #e3e3e3;
3176
3185
  }
3186
+ .rrd-headerbar .root-element{
3187
+ overflow-x: auto;
3188
+ scrollbar-width: none;
3189
+ }
3177
3190
  .rrd-headerbar .rrd-tool-button {
3178
3191
  min-height: 24px;
3179
3192
  padding: 2px;
@@ -3181,15 +3194,15 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3181
3194
  }
3182
3195
  .rrd-headerbar[data-app-mode=preview] {
3183
3196
  min-height: 44px;
3184
- background-color: var(--light-theme-primary-color-2);
3185
- box-shadow: inset 0 -1px 0 0 var(--preview-border-color);
3197
+ background-color: var(--rrd-light-theme-primary-color-2);
3198
+ box-shadow: inset 0 -1px 0 0 var(--rrd-preview-border-color);
3186
3199
  }
3187
3200
  .rrd-headerbar[data-app-mode=preview] #app_mode_preview {
3188
3201
  margin-left: 8px;
3189
3202
  padding: 3px 10px;
3190
3203
  border-radius: 3px;
3191
- background-color: var(--light-theme-primary-color-8);
3192
- color: var(--light-theme-primary-color-1);
3204
+ background-color: var(--rrd-light-theme-primary-color-8);
3205
+ color: var(--rrd-light-theme-primary-color-1);
3193
3206
  }
3194
3207
 
3195
3208
 
@@ -3200,8 +3213,8 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3200
3213
  }
3201
3214
  .rrd-tool-button[data-variant="filled"] {
3202
3215
  border-radius: 3px;
3203
- background-color: var(--light-theme-primary-color-8);
3204
- color: var(--light-theme-primary-color-1);
3216
+ background-color: var(--rrd-light-theme-primary-color-8);
3217
+ color: var(--rrd-light-theme-primary-color-1);
3205
3218
  }
3206
3219
  .rrd-tool-button[data-variant="filled"]:hover {
3207
3220
  cursor: pointer;
@@ -3209,7 +3222,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3209
3222
  }
3210
3223
  .rrd-tool-button[data-variant="subtle"] {
3211
3224
  padding: 2px 6px;
3212
- color: var(--light-theme-primary-color-9);
3225
+ color: var(--rrd-light-theme-primary-color-9);
3213
3226
  }
3214
3227
  .rrd-tool-button span {
3215
3228
  display: inline-block;
@@ -3224,7 +3237,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3224
3237
  }
3225
3238
  .rrd-toolbar {
3226
3239
  min-height: 50px;
3227
- background-color: var(--light-theme-primary-color-1);
3240
+ background-color: var(--rrd-light-theme-primary-color-1);
3228
3241
  box-shadow: inset 0 -1px 0 0 #e3e3e3;
3229
3242
  }
3230
3243
  .rrd-toolbar .rrd-tool-button {
@@ -3243,12 +3256,12 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3243
3256
  /** action bar */
3244
3257
  .rrd-actionbar {
3245
3258
  min-width: 50px;
3246
- background-color: var(--light-theme-primary-color-8);
3259
+ background-color: var(--rrd-light-theme-primary-color-8);
3247
3260
  }
3248
3261
 
3249
3262
  /* 아이템바 actionbar */
3250
3263
  .rrd-tool-sep {
3251
- border-bottom: 1px solid var(--light-theme-primary-color-7);
3264
+ border-bottom: 1px solid var(--rrd-light-theme-primary-color-7);
3252
3265
  }
3253
3266
 
3254
3267
  .rrd-actionbar[data-app-mode="preview"] {
@@ -3266,14 +3279,14 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3266
3279
  }
3267
3280
  /* TODO: R2-744 해결전 임시방편으로 적용함. 이후 수정 예정 */
3268
3281
  .rrd-actionbar #item_group > button {
3269
- background-color: var(--light-theme-primary-color-8);
3282
+ background-color: var(--rrd-light-theme-primary-color-8);
3270
3283
  }
3271
3284
  /* TODO: R2-744 해결전 임시방편으로 적용함. 이후 수정 예정 */
3272
3285
  .rrd-actionbar #item_group > button:hover {
3273
- background-color: var(--light-theme-primary-color-9);
3286
+ background-color: var(--rrd-light-theme-primary-color-9);
3274
3287
  }
3275
3288
  .rrd-actionbar #design_group {
3276
- background-color: var(--light-theme-primary-color-9);
3289
+ background-color: var(--rrd-light-theme-primary-color-9);
3277
3290
  }
3278
3291
  .rrd-actionbar .rrd-tool-button {
3279
3292
  width: 30px;
@@ -3291,15 +3304,34 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3291
3304
  }
3292
3305
 
3293
3306
  /* actionsubbar */
3294
- .rrd-actionsubbar {
3295
- background-color: var(--light-theme-primary-color-2);
3307
+ .rrd-action-subbar {
3308
+ background-color: var(--rrd-light-theme-primary-color-2);
3296
3309
  /* TODO: 전체 텍스트 색상 통일 */
3297
3310
  color: #3a3a3a;
3298
- border-right: 1px solid var(--preview-border-color);
3311
+ border-right: 1px solid var(--rrd-preview-border-color);
3299
3312
  }
3300
3313
 
3301
3314
  /** export bar*/
3302
3315
  #rrd-export-bar-header {
3316
+ display: inline-block;
3317
+ width: 100%;
3318
+ height: 25px;
3319
+ line-height: 25px;
3320
+ padding-left: 12px;
3321
+ font-weight: 600;
3322
+ letter-spacing: .05rem;
3323
+ color: var(--rrd-panel-header-color);
3324
+ border-bottom: 1px solid var(--rrd-preview-border-color);
3325
+ }
3326
+
3327
+ /* preview-setting-subbar */
3328
+ .rrd-preview-setting-subbar {
3329
+ background-color: var(--rrd-light-theme-primary-color-2);
3330
+ color: #3a3a3a;
3331
+ border-right: 1px solid var(--rrd-preview-border-color);
3332
+ }
3333
+
3334
+ #rrd-preview-setting-bar-header {
3303
3335
  display: inline-block;
3304
3336
  width: 100%;
3305
3337
  height: 25px;
@@ -3308,13 +3340,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3308
3340
  font-weight: 600;
3309
3341
  letter-spacing: .05rem;
3310
3342
  color: var(--panel-header-color);
3311
- border-bottom: 1px solid var(--preview-border-color);
3343
+ border-bottom: 1px solid var(--rrd-preview-border-color);
3344
+ }
3345
+
3346
+ #preview_options path {
3347
+ fill: white;
3312
3348
  }
3313
3349
 
3314
3350
  /* pagebar */
3315
3351
  .rrd-pagebar {
3316
3352
  min-height: 24px;
3317
- background-color: var(--light-theme-primary-color-1);
3353
+ background-color: var(--rrd-light-theme-primary-color-1);
3318
3354
  }
3319
3355
  .rrd-pagebar-zoom-container {
3320
3356
  display: flex;
@@ -3397,7 +3433,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3397
3433
  display: flex;
3398
3434
  height: 100%;
3399
3435
  overflow-x: auto;
3400
- background-color: var(--light-theme-primary-color-9);
3436
+ background-color: var(--rrd-light-theme-primary-color-9);
3401
3437
  }
3402
3438
  .rrd-pagebar-page-buttons-conatiner::-webkit-scrollbar {
3403
3439
  display: none;
@@ -3409,19 +3445,19 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3409
3445
  padding: 4px 8px;
3410
3446
  font-size: 12px;
3411
3447
  color: var(--light-theme-dark-text-color);
3412
- background-color: var(--light-theme-primary-color-5);
3448
+ background-color: var(--rrd-light-theme-primary-color-5);
3413
3449
  border: none;
3414
- border-right: 1px solid var(--light-theme-primary-color-3);
3450
+ border-right: 1px solid var(--rrd-light-theme-primary-color-3);
3415
3451
  cursor: pointer;
3416
3452
  white-space: nowrap;
3417
3453
  }
3418
3454
  .rrd-pagebar-page-button:hover {
3419
- background-color: var(--light-theme-primary-color-8);
3455
+ background-color: var(--rrd-light-theme-primary-color-8);
3420
3456
  color: var(--light-theme-light-text-color);
3421
3457
  opacity: 0.7;
3422
3458
  }
3423
3459
  .rrd-pagebar-page-button[data-selected] {
3424
- background-color: var(--light-theme-primary-color-8);
3460
+ background-color: var(--rrd-light-theme-primary-color-8);
3425
3461
  color: var(--light-theme-light-text-color);
3426
3462
  }
3427
3463
  .rrd-pagebar-page-remove-button {
@@ -3433,8 +3469,8 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3433
3469
  stroke: var(--light-theme-light-text-color);
3434
3470
  }
3435
3471
  .rrd-pagebar-page-remove-button > svg:hover {
3436
- stroke: var(--light-theme-primary-color-10);
3437
- background-color: var(--light-theme-primary-color-2);
3472
+ stroke: var(--rrd-light-theme-primary-color-10);
3473
+ background-color: var(--rrd-light-theme-primary-color-2);
3438
3474
  border-radius: 2px;
3439
3475
  }
3440
3476
  .rrd-pagebar-add-button {
@@ -3449,13 +3485,13 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3449
3485
  cursor: pointer;
3450
3486
  }
3451
3487
  .rrd-pagebar-add-button svg{
3452
- stroke: var(--light-theme-primary-color-9);
3488
+ stroke: var(--rrd-light-theme-primary-color-9);
3453
3489
  }
3454
3490
  #zoom-out svg path, #zoom-in svg path{
3455
- stroke: var(--light-theme-primary-color-9);
3491
+ stroke: var(--rrd-light-theme-primary-color-9);
3456
3492
  }
3457
3493
  #zoom span {
3458
- color: var(--light-theme-primary-color-9);
3494
+ color: var(--rrd-light-theme-primary-color-9);
3459
3495
  }
3460
3496
  .rrd-zoom-button {
3461
3497
  display: flex;
@@ -3475,18 +3511,19 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3475
3511
  .rrd-property-header {
3476
3512
  padding: 1px 6px;
3477
3513
  font-weight: 600;
3478
- color: var(--light-theme-primary-color-10);
3479
- background-color: var(--light-theme-primary-color-2);
3514
+ color: var(--rrd-light-theme-primary-color-10);
3515
+ background-color: var(--rrd-light-theme-primary-color-2);
3516
+ z-index: 220;
3480
3517
  }
3481
3518
 
3482
3519
  /* 패널 */
3483
3520
  /** panel resizer */
3484
3521
  .rrd-panel-resizer {
3485
- background-color: var(--light-theme-primary-color-6);
3486
- z-index: 200;
3522
+ background-color: var(--rrd-light-theme-primary-color-6);
3523
+ z-index: 220;
3487
3524
  }
3488
3525
  .rrd-panel-resizer:hover {
3489
- background-color: var(--light-theme-primary-color-9);
3526
+ background-color: var(--rrd-light-theme-primary-color-9);
3490
3527
  }
3491
3528
  .rrd-panel-fullscreen-btn svg * ,
3492
3529
  .rrd-panel-hide-btn svg * {
@@ -3502,20 +3539,20 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3502
3539
  /** panel header */
3503
3540
  .rrd-panel-header {
3504
3541
  padding: 0 6px;
3505
- background-color: var(--light-theme-primary-color-6);
3506
- height: 26px;
3542
+ background-color: var(--rrd-light-theme-primary-color-6);
3543
+ height: 28px;
3544
+ z-index: 210;
3507
3545
  }
3508
3546
  .rrd-panel-header-title {
3509
3547
  color: #004488;
3510
3548
  }
3511
3549
  .rrd-panel-header button {
3512
- width: 60px;
3513
3550
  min-width: 60px;
3514
- height: 23px;
3551
+ height: 24px;
3515
3552
  border: none;
3516
3553
  border-radius: 5px 5px 0 0;
3517
3554
  background-color: transparent;
3518
- color: var(--light-theme-primary-color-9);
3555
+ color: var(--rrd-light-theme-primary-color-9);
3519
3556
  font-size: 13px;
3520
3557
  font-weight: 600;
3521
3558
  margin-top: 4px;
@@ -3525,17 +3562,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3525
3562
  color: var(--light-theme-dark-text-color);
3526
3563
  }
3527
3564
  .rrd-panel-header button[data-selected] {
3528
- background: var(--light-theme-primary-color-1);
3565
+ background: var(--rrd-light-theme-primary-color-1);
3529
3566
  color: var(--light-theme-dark-text-color);
3530
3567
  border-bottom: 1px solid #f4f4fc;
3531
3568
  box-sizing: content-box;
3532
3569
  }
3533
3570
  .rrd-panel-content {
3534
- background-color: var(--light-theme-primary-color-1);
3571
+ background-color: var(--rrd-light-theme-primary-color-1);
3535
3572
  }
3536
3573
  /** asset panel */
3537
3574
  .rrd-asset-list {
3538
- background-color: var(--light-theme-primary-color-1);
3575
+ background-color: var(--rrd-light-theme-primary-color-1);
3539
3576
  -webkit-touch-callout: none;
3540
3577
  -webkit-user-select: none;
3541
3578
  -moz-user-select: none;
@@ -3552,7 +3589,9 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3552
3589
  border-bottom: 1px solid #bfbfd2;
3553
3590
  font-size: 0.85em;
3554
3591
  color: black;
3555
- background: var(--light-theme-primary-color-5);
3592
+ background: var(--rrd-light-theme-primary-color-5);
3593
+ overflow-x: auto;
3594
+ scrollbar-width: none;
3556
3595
  }
3557
3596
  .rrd-asset-list-header button{
3558
3597
  padding:0px;
@@ -3561,16 +3600,16 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3561
3600
  width: 75px;
3562
3601
  min-width: 75px;
3563
3602
  font-size: 12px;
3564
- background-color: var(--light-theme-primary-color-8);
3603
+ background-color: var(--rrd-light-theme-primary-color-8);
3565
3604
  }
3566
3605
  .rrd-asset-list-header button:not([title="Grid"]):not([title="List"]) span {
3567
3606
  color: var(--light-theme-light-text-color);
3568
3607
  }
3569
3608
  .rrd-asset-list-header button:not([title="Grid"]):not([title="List"]):hover{
3570
- background-color: var(--light-theme-primary-color-9);
3609
+ background-color: var(--rrd-light-theme-primary-color-9);
3571
3610
  }
3572
3611
  .rrd-asset-list-header button[data-checked] {
3573
- background-color: var(--light-theme-primary-color-9);
3612
+ background-color: var(--rrd-light-theme-primary-color-9);
3574
3613
  }
3575
3614
  .rrd-asset-list-header button[data-checked] span {
3576
3615
  color: var(--light-theme-light-text-color);
@@ -3611,11 +3650,11 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3611
3650
  -webkit-box-orient: vertical;
3612
3651
  }
3613
3652
  .rrd-asset-item-label:hover {
3614
- background-color: var(--light-theme-primary-color-2);
3653
+ background-color: var(--rrd-light-theme-primary-color-2);
3615
3654
  border-radius: 2px;
3616
3655
  }
3617
3656
  .rrd-asset-item-icon:hover {
3618
- border: 2px solid var(--light-theme-primary-color-7);
3657
+ border: 2px solid var(--rrd-light-theme-primary-color-7);
3619
3658
  box-shadow: 1px 1px 7px 0px rgb(207 207 207);
3620
3659
  }
3621
3660
  .rrd-asset-item-icon-dummy {
@@ -3638,6 +3677,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3638
3677
  align-items: center;
3639
3678
  flex: 0 0 auto;
3640
3679
  margin: 4px 10px;
3680
+ cursor: pointer;
3641
3681
  }
3642
3682
  .rrd-asset-list-item-icon {
3643
3683
  width: 20px;
@@ -3666,10 +3706,10 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3666
3706
  border-bottom: 1px solid #bfbfd2;
3667
3707
  font-size: 0.85em;
3668
3708
  color: black;
3669
- background-color: var(--light-theme-primary-color-5);
3709
+ background-color: var(--rrd-light-theme-primary-color-5);
3670
3710
  }
3671
3711
  .rrd-data-list-header button[data-checked] {
3672
- background-color: var(--light-theme-primary-color-9);
3712
+ background-color: var(--rrd-light-theme-primary-color-9);
3673
3713
  }
3674
3714
  .rrd-data-list-header span {
3675
3715
  color: #333;
@@ -3678,7 +3718,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3678
3718
  text-decoration: underline;
3679
3719
  }
3680
3720
  .rrd-data-list-header button[data-checked] {
3681
- background-color: var(--light-theme-primary-color-9);
3721
+ background-color: var(--rrd-light-theme-primary-color-9);
3682
3722
  }
3683
3723
  .rrd-data-list-header button[data-checked] span {
3684
3724
  color: var(--light-theme-light-text-color);
@@ -3694,12 +3734,12 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3694
3734
  }
3695
3735
 
3696
3736
  .rrd-data-container {
3697
- background-color: var(--light-theme-primary-color-1);
3737
+ background-color: var(--rrd-light-theme-primary-color-1);
3698
3738
  }
3699
3739
  .rrd-data-list-header button:not([title="Grid"]):not([title="List"]) {
3700
3740
  width: 75px;
3701
3741
  font-size: 12px;
3702
- background-color: var(--light-theme-primary-color-8);
3742
+ background-color: var(--rrd-light-theme-primary-color-8);
3703
3743
  color: var(--light-theme-light-text-color);
3704
3744
  border-radius: 3px;
3705
3745
  }
@@ -3731,31 +3771,45 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3731
3771
  align-items: center;
3732
3772
  flex: 0 0 auto;
3733
3773
  margin: 4px 10px;
3774
+ cursor: pointer;
3734
3775
  }
3735
-
3736
- .rrd-band-data-header {
3776
+ .rrd-data-item-label:hover {
3777
+ background-color: var(--rrd-light-theme-primary-color-2);
3778
+ border-radius: 2px;
3779
+ }
3780
+ .rrd-data-list-item svg:hover {
3781
+ border: 2px solid var(--rrd-light-theme-primary-color-7);
3782
+ box-shadow: 1px 1px 7px 0px rgb(207 207 207);
3783
+ }
3784
+ .rrd-band-data-header,
3785
+ .rrd-simple-data-header {
3737
3786
  display: flex;
3738
3787
  align-items: center;
3739
3788
  gap: 10px;
3740
3789
  height: 28px;
3741
3790
  padding: 2px 4px;
3742
- background-color: var(--light-theme-primary-color-5);
3791
+ background-color: var(--rrd-light-theme-primary-color-5);
3743
3792
  }
3744
- .rrd-band-data-header-tools {
3793
+ .rrd-band-data-header-tools,
3794
+ .rrd-simple-data-header-tools {
3745
3795
  display: flex;
3746
3796
  align-items: center;
3747
3797
  gap: 4px;
3748
3798
  }
3749
- .rrd-band-data-header-tools button {
3799
+ .rrd-band-data-header-tools button,
3800
+ .rrd-simple-data-header-tools button {
3750
3801
  padding: 0px;
3751
3802
  }
3752
- .rrd-band-data-header-tools button:hover {
3803
+ .rrd-band-data-header-tools button:hover,
3804
+ .rrd-simple-data-header-tools button:hover {
3753
3805
  backdrop-filter: brightness(85%) saturate(1.5);
3754
3806
  }
3755
- .rrd-band-data-header-tools button[data-checked] {
3756
- background-color: var(--light-theme-primary-color-9);
3807
+ .rrd-band-data-header-tools button[data-checked],
3808
+ .rrd-simple-data-header-tools button[data-checked] {
3809
+ background-color: var(--rrd-light-theme-primary-color-9);
3757
3810
  }
3758
- .rrd-band-data-header-tools button[data-checked] svg * {
3811
+ .rrd-band-data-header-tools button[data-checked] svg *,
3812
+ .rrd-simple-data-header-tools button[data-checked] svg * {
3759
3813
  stroke: white;
3760
3814
  }
3761
3815
  .rrd-band-data-field-count {
@@ -3763,19 +3817,22 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3763
3817
  text-align: right;
3764
3818
  }
3765
3819
 
3766
- .rrd-band-data-sub-action {
3820
+ .rrd-band-data-sub-action,
3821
+ .rrd-simple-data-sub-action {
3767
3822
  margin-right: 4px;
3768
3823
  padding: 1px 6px;
3769
3824
  font-weight: normal;
3770
3825
  border-radius: 2px;
3771
3826
  color: var(--light-theme-light-text-color);
3772
- background-color: var(--light-theme-primary-color-7);
3827
+ background-color: var(--rrd-light-theme-primary-color-7);
3773
3828
  }
3774
- .rrd-band-data-sub-action:hover {
3829
+ .rrd-band-data-sub-action:hover,
3830
+ .rrd-simple-data-sub-action:hover {
3775
3831
  cursor: pointer;
3776
3832
  }
3777
3833
 
3778
- .rrd-band-field-table {
3834
+ .rrd-band-field-table,
3835
+ .rrd-simple-field-table {
3779
3836
  border-spacing: 0 !important;
3780
3837
  border-collapse: separate !important;
3781
3838
  min-width: 100%;
@@ -3785,87 +3842,129 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3785
3842
  color: #111;
3786
3843
  text-align: left;
3787
3844
  font-size: 13px;
3788
- background-color: var(--light-theme-primary-color-1);
3845
+ background-color: var(--rrd-light-theme-primary-color-1);
3789
3846
  }
3790
- .rrd-band-field-table-header {
3847
+ .rrd-band-field-table-header,
3848
+ .rrd-simple-field-table-header {
3791
3849
  height: 26px;
3792
3850
  padding: 0px 4px;
3793
- background-color: var(--light-theme-primary-color-3);
3851
+ background-color: var(--rrd-light-theme-primary-color-3);
3794
3852
  font-size: 12px;
3795
3853
  font-weight: 600;
3796
3854
  border-bottom: 1px solid #BBBBBB;
3855
+ overflow-x: auto;
3856
+ scrollbar-width: none;
3857
+ gap: 2px;
3797
3858
  }
3798
- .rrd-band-field-table-header-title {
3859
+ .rrd-band-field-table-header > spa,
3860
+ .rrd-simple-field-table-header > span{
3861
+ max-width: fit-content;
3862
+ white-space: nowrap;
3863
+ }
3864
+ .rrd-band-field-table-header-title,
3865
+ .rrd-simple-field-table-header-title {
3799
3866
  padding-top: 2px;
3800
3867
  margin-left: 2px;
3801
3868
  }
3802
- .rrd-band-field-table tr td {
3803
- background-color: var(--light-theme-primary-color-2);
3869
+ .rrd-simple-field-table table {
3870
+ border-collapse: collapse;
3871
+ }
3872
+
3873
+ .rrd-band-field-table tr td,
3874
+ .rrd-simple-field-table tr td {
3875
+ background-color: var(--rrd-light-theme-primary-color-2);
3804
3876
  white-space: nowrap;
3805
3877
  }
3806
- .rrd-band-field-table tr:nth-child(2n + 1) td {
3807
- background-color: var(--light-theme-primary-color-1);
3878
+ .rrd-band-field-table tr:nth-child(2n + 1) td,
3879
+ .rrd-simple-field-table tr:nth-child(2n + 1) td {
3880
+ background-color: var(--rrd-light-theme-primary-color-1);
3808
3881
  }
3809
- .rrd-band-field-table tr:hover td {
3810
- background-color: var(--light-theme-primary-color-4);
3882
+ .rrd-band-field-table tr:hover td,
3883
+ .rrd-simple-field-table tr:hover td {
3884
+ background-color: var(--rrd-light-theme-primary-color-4);
3811
3885
  }
3812
- .rrd-band-field-table tr[data-sel='true'] td {
3813
- background-color: var(--light-theme-primary-color-5);
3886
+ .rrd-band-field-table tr[data-sel='true'] td,
3887
+ .rrd-simple-field-table tr[data-sel='true'] td {
3888
+ background-color: var(--rrd-light-theme-primary-color-5);
3814
3889
  color: var(--light-theme-light-text-color);
3815
3890
  }
3816
- .rrd-band-field-table tr td:nth-child(2) {
3891
+ .rrd-band-field-table tr td:nth-child(2),
3892
+ .rrd-simple-field-table tr td:nth-child(2) {
3817
3893
  min-width: 20px;
3818
3894
  text-align: center;
3819
3895
  }
3820
- .rrd-band-field-table tr td:nth-child(3) {
3896
+ .rrd-band-field-table tr td:nth-child(3),
3897
+ .rrd-simple-field-table tr td:nth-child(3) {
3821
3898
  min-width: 60px;
3822
3899
  }
3823
- .rrd-band-field-table tr td:nth-child(4) {
3900
+ .rrd-band-field-table tr td:nth-child(4),
3901
+ .rrd-simple-field-table tr td:nth-child(4) {
3824
3902
  text-align: center;
3825
3903
  }
3826
- .rrd-band-field-table tr td:nth-child(5) {
3904
+ .rrd-band-field-table tr td:nth-child(5),
3905
+ .rrd-simple-field-table tr td:nth-child(5) {
3827
3906
  text-align: center;
3828
3907
  }
3829
- .rrd-band-field-table tr td:nth-child(5) select {
3908
+ .rrd-band-field-table tr td:nth-child(5) select,
3909
+ .rrd-simple-field-table tr td:nth-child(5) select {
3830
3910
  width: 100%;
3831
3911
  min-width: 70px;
3832
3912
  }
3833
- .rrd-band-field-table tr td:nth-child(6) {
3913
+ .rrd-band-field-table tr td:nth-child(6),
3914
+ .rrd-simple-field-table tr td:nth-child(6) {
3834
3915
  min-width: 80px;
3835
3916
  }
3836
- .rrd-band-field-table tr td:nth-child(7) {
3917
+ .rrd-band-field-table tr td:nth-child(7)
3918
+ .rrd-simple-field-table tr td:nth-child(7) {
3837
3919
  min-width: 80px;
3838
3920
  }
3839
- .rrd-band-field-table td button {
3921
+ .rrd-band-field-table td button,
3922
+ .rrd-simple-field-table td button {
3840
3923
  outline: none;
3841
3924
  }
3842
- .rrd-band-field-table td select {
3925
+ .rrd-band-field-table td select,
3926
+ .rrd-simple-field-table td select {
3843
3927
  padding: 1px 0px;
3844
3928
  }
3845
- .rrd-band-field-table td select:focus {
3846
- outline: 1px solid var(--light-theme-primary-color-8);
3929
+ .rrd-band-field-table td select:focus,
3930
+ .rrd-simple-field-table td select:focus {
3931
+ outline: 1px solid var(--rrd-light-theme-primary-color-8);
3847
3932
  border-radius: 2px;
3848
3933
  }
3849
- .rrd-band-field-table td, .rrd-band-field-table th {
3934
+ .rrd-simple-field-table-remove-btn {
3935
+ display: flex;
3936
+ align-items: center;
3937
+ }
3938
+
3939
+ .rrd-simple-field-table td, .rrd-simple-field-table th {
3940
+ padding: 0 2px;
3941
+ }
3942
+
3943
+ .rrd-band-field-table td, .rrd-band-field-table th {
3850
3944
  border-right: 1px solid #C0C0C0;
3851
3945
  border-bottom: 1px solid #C0C0C0;
3852
3946
  padding: 0 2px;
3853
3947
  }
3854
- .rrd-band-field-table th {
3948
+
3949
+ .rrd-band-field-table th,
3950
+ .rrd-simple-field-table th{
3855
3951
  position: sticky;
3856
3952
  top: 0;
3857
3953
  z-index: 100;
3858
- background-color: var(--light-theme-primary-color-3);
3954
+ background-color: var(--rrd-light-theme-primary-color-3);
3859
3955
  text-align: center;
3860
3956
  font-size: 12px;
3861
3957
  padding-top: 2px;
3862
3958
  }
3863
- .rrd-band-field-table thead tr th:first-child {
3959
+ .rrd-band-field-table thead tr th:first-child ,
3960
+ .rrd-simple-field-table thead tr th:first-child {
3864
3961
  z-index: 101;
3865
3962
  text-align: center;
3866
3963
  }
3867
3964
  .rrd-band-field-table td:first-child,
3868
- .rrd-band-field-table th:first-child {
3965
+ .rrd-simple-field-table td:first-child,
3966
+ .rrd-band-field-table th:first-child ,
3967
+ .rrd-simple-field-table th:first-child {
3869
3968
  min-width: 21px;
3870
3969
  text-align: center;
3871
3970
  padding-left: 1px !important;
@@ -3873,122 +3972,71 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3873
3972
  position: sticky;
3874
3973
  left: 0;
3875
3974
  }
3876
- .rrd-band-field-table-mover {
3877
- width: 21px;
3878
- min-width: 10px;
3879
- height: 21px;
3880
- background: transparent url('/assets/images/json-row-mover.png') no-repeat
3881
- center center;
3882
- background-size: 13px;
3883
- /* cursor: move; */
3884
- border: none;
3885
- }
3886
- .rrd-band-field-table-mover:hover {
3887
- background: transparent url('/assets/images/json-row-mover-active.png')
3888
- no-repeat center center;
3889
- background-size: 13px;
3890
- }
3891
- .rrd-band-field-table-menu {
3892
- width: 21px;
3893
- height: 21px;
3894
- background: transparent url('/assets/images/json-row-menu.png') no-repeat
3895
- center center;
3896
- background-size: 13px;
3897
- cursor: pointer;
3898
- border: none;
3899
- }
3900
- .rrd-band-field-table-menu:hover {
3901
- background: transparent url('/assets/images/json-row-menu-active.png')
3902
- no-repeat center center;
3903
- background-size: 13px;
3904
- }
3905
- .rrd-band-field-table tr td span {
3975
+ .rrd-band-field-table tr td span,
3976
+ .rrd-simple-field-table tr td span {
3906
3977
  display: inline-block;
3907
- width: 100%;
3978
+ /* width: 100%; */
3908
3979
  border: 1px solid transparent;
3909
3980
  padding: 2px 6px;
3910
3981
  word-break: break-word;
3911
3982
  text-align: left;
3912
3983
  }
3913
- .rrd-band-field-table tr td span[contenteditable='true']:hover {
3984
+ .rrd-band-field-table tr td span[contenteditable='true']:hover,
3985
+ .rrd-simple-field-table tr td span[contenteditable='true']:hover {
3914
3986
  background-color: #ffffab;
3915
3987
  background-color: rgba(0, 255, 127, 0.05);
3916
3988
  border: 1px solid #008;
3917
3989
  border-radius: 2px;
3918
3990
  outline: none;
3919
3991
  }
3920
- .rrd-band-field-table tr td span[contenteditable='true']:focus {
3992
+ .rrd-band-field-table tr td span[contenteditable='true']:focus,
3993
+ .rrd-simple-field-table tr td span[contenteditable='true']:focus {
3921
3994
  background-color: #ffffff;
3922
3995
  color: #222;
3923
3996
  border: 1px solid #008;
3924
3997
  border-radius: 2px;
3925
3998
  outline: none;
3926
3999
  }
3927
- .rrd-rrd-band-field-table-add-btn {
4000
+ .rrd-band-field-table-add-btn {
3928
4001
  width: 100px;
3929
4002
  margin: 8px 0 0 8px;
3930
4003
 
3931
4004
  }
3932
- .rrd-rrd-band-field-table-add-btn:hover,
3933
- .rrd-rrd-band-field-table-remove-btn:hover
4005
+ .rrd-band-field-table-add-btn:hover,
4006
+ .rrd-band-field-table-remove-btn:hover
3934
4007
  {
3935
4008
  cursor: pointer;
3936
4009
  }
3937
4010
 
3938
- .rrd-rrd-band-data-sample-header {
4011
+ .rrd-band-data-sample-header {
3939
4012
  height: 26px;
3940
4013
  padding: 0px 4px;
3941
- background-color: var(--light-theme-primary-color-3);
4014
+ background-color: var(--rrd-light-theme-primary-color-3);
3942
4015
  color: #333;
3943
4016
  font-size: 12px;
3944
4017
  font-weight: bold;
3945
4018
  border-bottom: 1px solid #bbb;
4019
+ gap: 2px;
4020
+ overflow-x: auto;
4021
+ scrollbar-width: none;
3946
4022
  }
3947
- .rrd-rrd-band-data-sample-header-title {
4023
+ .rrd-band-data-sample-header-title {
3948
4024
  padding-top: 2px;
3949
4025
  margin-left: 2px;
4026
+ white-space: nowrap;
3950
4027
  }
3951
- .rrd-rrd-band-data-sample-header button {
4028
+ .rrd-band-data-sample-header button {
3952
4029
  font-size: 12px;
3953
4030
  border: none;
3954
4031
  }
3955
- /* TODO: checkbox 스타일 중복제거 및 JS코드화 필요 */
3956
- .rrd-rrd-band-data-sample-header input[type="checkbox"] {
3957
- width: 16px;
3958
- height: 16px;
3959
- border: none;
3960
- }
3961
- .rrd-rrd-band-data-sample-header input[type="checkbox"]:hover {
3962
- cursor: pointer;
3963
- }
3964
- .rrd-rrd-band-data-sample-header input[type="checkbox"]::before {
3965
- width: 16px;
3966
- height: 16px;
3967
- mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgNUMzIDQuNDY5NTcgMy4yMTA3MSAzLjk2MDg2IDMuNTg1NzkgMy41ODU3OUMzLjk2MDg2IDMuMjEwNzEgNC40Njk1NyAzIDUgM0gxOUMxOS41MzA0IDMgMjAuMDM5MSAzLjIxMDcxIDIwLjQxNDIgMy41ODU3OUMyMC43ODkzIDMuOTYwODYgMjEgNC40Njk1NyAyMSA1VjE5QzIxIDE5LjUzMDQgMjAuNzg5MyAyMC4wMzkxIDIwLjQxNDIgMjAuNDE0MkMyMC4wMzkxIDIwLjc4OTMgMTkuNTMwNCAyMSAxOSAyMUg1QzQuNDY5NTcgMjEgMy45NjA4NiAyMC43ODkzIDMuNTg1NzkgMjAuNDE0MkMzLjIxMDcxIDIwLjAzOTEgMyAxOS41MzA0IDMgMTlWNVoiIHN0cm9rZT0iIzNBM0EzQSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
3968
- display: inline-block;
3969
- content: '';
3970
- mask-size: cover;
3971
- mask-position: center;
3972
- background-color: var(--light-theme-dark-text-color);
3973
- }
3974
- .rrd-rrd-band-data-sample-header input[type="checkbox"]:checked::before {
3975
- width: 16px;
3976
- height: 16px;
3977
- mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMTJMMTEgMTVMMTYuNSA5LjVNMyA1QzMgNC40Njk1NyAzLjIxMDcxIDMuOTYwODYgMy41ODU3OSAzLjU4NTc5QzMuOTYwODYgMy4yMTA3MSA0LjQ2OTU3IDMgNSAzSDE5QzE5LjUzMDQgMyAyMC4wMzkxIDMuMjEwNzEgMjAuNDE0MiAzLjU4NTc5QzIwLjc4OTMgMy45NjA4NiAyMSA0LjQ2OTU3IDIxIDVWMTlDMjEgMTkuNTMwNCAyMC43ODkzIDIwLjAzOTEgMjAuNDE0MiAyMC40MTQyQzIwLjAzOTEgMjAuNzg5MyAxOS41MzA0IDIxIDE5IDIxSDVDNC40Njk1NyAyMSAzLjk2MDg2IDIwLjc4OTMgMy41ODU3OSAyMC40MTQyQzMuMjEwNzEgMjAuMDM5MSAzIDE5LjUzMDQgMyAxOVY1WiIgc3Ryb2tlPSIjM0EzQTNBIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
3978
- display: inline-block;
3979
- content: '';
3980
- mask-size: cover;
3981
- mask-position: center;
3982
- background-color: var(--light-theme-dark-text-color);
3983
- }
3984
- .rrd-rrd-band-data-sample-save {
4032
+ .rrd-band-data-sample-save {
3985
4033
  flex: 1 1 0;
3986
4034
  margin-left: auto;
3987
4035
  margin-right: 8px;
3988
4036
  text-align: right;
3989
4037
  text-decoration: underline;
3990
4038
  }
3991
- .rrd-rrd-band-data-sample-save::before {
4039
+ .rrd-band-data-sample-save::before {
3992
4040
  content: '';
3993
4041
  /* background-image: url('/assets/images/tool/data-save.png'); */
3994
4042
  background-size: 15px 15px;
@@ -3998,15 +4046,16 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3998
4046
  vertical-align: middle;
3999
4047
  margin-right: 2px;
4000
4048
  }
4001
- .rrd-rrd-band-data-sample-save:hover {
4049
+ .rrd-band-data-sample-save:hover {
4002
4050
  color: #04f;
4003
4051
  }
4004
- .rrd-rrd-band-data-sample-row-count {
4052
+ .rrd-band-data-sample-row-count {
4005
4053
  /* flex: 1 1 0; */
4006
4054
  /* margin-left: auto; */
4007
4055
  text-align: right;
4056
+ white-space: nowrap;
4008
4057
  }
4009
- .rrd-rrd-band-data-sample-container {
4058
+ .rrd-band-data-sample-container {
4010
4059
  flex: 1 1 0;
4011
4060
  overflow: auto;
4012
4061
  }
@@ -4017,19 +4066,19 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4017
4066
  margin: 0;
4018
4067
  padding: 0;
4019
4068
  box-sizing: border-box;
4020
- background-color: var(--light-theme-primary-color-2);
4069
+ background-color: var(--rrd-light-theme-primary-color-2);
4021
4070
  color: #111;
4022
4071
  text-align: left;
4023
4072
  font-size: 12px;
4024
4073
  }
4025
4074
  .rrd-band-data-sample tr:nth-child(2n + 1) {
4026
- background-color: var(--light-theme-primary-color-1);
4075
+ background-color: var(--rrd-light-theme-primary-color-1);
4027
4076
  }
4028
4077
  .rrd-band-data-sample tr:hover {
4029
- background-color: var(--light-theme-primary-color-4);
4078
+ background-color: var(--rrd-light-theme-primary-color-4);
4030
4079
  }
4031
4080
  .rrd-band-data-sample tr[data-sel='true'] td {
4032
- background-color: var(--light-theme-primary-color-5);
4081
+ background-color: var(--rrd-light-theme-primary-color-5);
4033
4082
  color: var(--light-theme-light-text-color);
4034
4083
  }
4035
4084
 
@@ -4048,7 +4097,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4048
4097
  position: sticky;
4049
4098
  top: 0;
4050
4099
  z-index: 100;
4051
- background-color: var(--light-theme-primary-color-3);
4100
+ background-color: var(--rrd-light-theme-primary-color-3);
4052
4101
  text-align: center;
4053
4102
  padding: 0px;
4054
4103
  }
@@ -4065,34 +4114,6 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4065
4114
  position: sticky;
4066
4115
  left: 0;
4067
4116
  }
4068
- .rrd-band-data-sample-mover {
4069
- width: 21px;
4070
- height: 21px;
4071
- background: transparent url('/assets/images/json-row-mover.png') no-repeat
4072
- center center;
4073
- background-size: 13px;
4074
- cursor: move;
4075
- border: none;
4076
- }
4077
- .rrd-band-data-sample-mover:hover {
4078
- background: transparent url('/assets/images/json-row-mover-active.png')
4079
- no-repeat center center;
4080
- background-size: 13px;
4081
- }
4082
- .rrd-band-data-sample-menu {
4083
- width: 21px;
4084
- height: 21px;
4085
- background: transparent url('/assets/images/json-row-menu.png') no-repeat
4086
- center center;
4087
- background-size: 13px;
4088
- cursor: pointer;
4089
- border: none;
4090
- }
4091
- .rrd-band-data-sample-menu:hover {
4092
- background: transparent url('/assets/images/json-row-menu-active.png')
4093
- no-repeat center center;
4094
- background-size: 13px;
4095
- }
4096
4117
  .rrd-band-data-sample tr td span {
4097
4118
  display: inline-block;
4098
4119
  width: 100%;
@@ -4102,14 +4123,14 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4102
4123
  }
4103
4124
  .rrd-band-data-sample tr td span[contenteditable='true']:hover {
4104
4125
  background-color: #f8f8ff;
4105
- border: 1px solid #5151a8;
4126
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4106
4127
  border-radius: 2px;
4107
4128
  outline: none;
4108
4129
  }
4109
4130
  .rrd-band-data-sample tr td span[contenteditable='true']:focus {
4110
4131
  background-color: #f8f8ff;
4111
4132
  color: var(--light-theme-dark-text-color);
4112
- border: 1px solid #5151a8;
4133
+ border: 1px solid var(--rrd-light-theme-primary-color-9);
4113
4134
  border-radius: 2px;
4114
4135
  outline: none;
4115
4136
  }
@@ -4128,10 +4149,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4128
4149
  cursor: ew-resize;
4129
4150
  }
4130
4151
 
4131
- .rrd-simple-data-header {
4152
+ /* .rrd-simple-data-header {
4132
4153
  background-color: #0088ff60;
4133
4154
  }
4134
-
4155
+ .rrd-simple-data-value:focus {
4156
+ border: 1px solid var(--rrd-light-theme-primary-color-7);
4157
+ border-radius: 2px;
4158
+ background-color: white;
4159
+ }
4160
+ .rrd-simple-data-row {
4161
+ height: 26px;
4162
+ } */
4135
4163
  .rrd-band-data-link-header {
4136
4164
  display: flex;
4137
4165
  align-items: center;
@@ -4139,8 +4167,9 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4139
4167
  padding: 0 4px;
4140
4168
  font-size: 12px;
4141
4169
  font-weight: 600;
4142
- background-color: var(--light-theme-primary-color-3);
4170
+ background-color: var(--rrd-light-theme-primary-color-3);
4143
4171
  border-bottom: 1px solid #BBBBBB;
4172
+ gap: 2px;
4144
4173
  }
4145
4174
  .rrd-band-data-link-header button {
4146
4175
  font-size: 12px;
@@ -4149,6 +4178,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4149
4178
  .rrd-band-data-link-header-title {
4150
4179
  padding-top: 2px;
4151
4180
  margin-left: 2px;
4181
+ white-space: nowrap;
4152
4182
  }
4153
4183
  .rrd-band-data-link-body {
4154
4184
  flex: 1;
@@ -4159,14 +4189,18 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4159
4189
  overflow: auto;
4160
4190
  scrollbar-width: thin;
4161
4191
  }
4162
- /* .band-data-link-button {
4163
- padding: 2px 6px;
4164
- color: var(--tool-item-bg-color-primary);
4165
- } */
4192
+ .rrd-band-data-link-http-body-control {
4193
+ border: 1px solid var(--rrd-light-theme-primary-color-7);
4194
+ border-radius: 3px;
4195
+ }
4196
+ .rrd-band-data-link-http-body-control:focus {
4197
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4198
+ outline: none;
4199
+ }
4166
4200
 
4167
4201
  /** script panel */
4168
4202
  .rrd-scriptpanel {
4169
- background-color: var(--script-editor-background);
4203
+ background-color: var(--rrd-script-editor-background);
4170
4204
  }
4171
4205
 
4172
4206
  .rrd-script-header-container {
@@ -4176,13 +4210,13 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4176
4210
  width: 100%;
4177
4211
  height: 24px;
4178
4212
  padding: 0 8px;
4179
- background: var(--light-theme-primary-color-5);
4213
+ background: var(--rrd-light-theme-primary-color-5);
4180
4214
  font-size: 12px;
4181
4215
  color: #3a3a3a;
4182
4216
  font-weight: bold;
4183
4217
  }
4184
4218
  .rrd-script-header-save-button {
4185
- background-color: var(--light-theme-primary-color-8);
4219
+ background-color: var(--rrd-light-theme-primary-color-8);
4186
4220
  border-radius: 3px;
4187
4221
  border: none;
4188
4222
  color: var(--light-theme-light-text-color);
@@ -4205,13 +4239,13 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4205
4239
 
4206
4240
  .rrd-script-header-save-button:hover,
4207
4241
  .rrd-script-header-save-button:focus {
4208
- background-color: var(--light-theme-primary-color-10);
4242
+ background-color: var(--rrd-light-theme-primary-color-10);
4209
4243
  }
4210
4244
 
4211
4245
  .rrd-script-header-save-button:active {
4212
- background-color: var(--light-theme-primary-color-5);
4246
+ background-color: var(--rrd-light-theme-primary-color-5);
4213
4247
  box-shadow: none;
4214
- color: var(--light-theme-primary-color-10);
4248
+ color: var(--rrd-light-theme-primary-color-10);
4215
4249
  }
4216
4250
 
4217
4251
  .rrd-script-editor {
@@ -4221,22 +4255,124 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4221
4255
  }
4222
4256
  /** 스크립트 패널 내부 */
4223
4257
  .ace-chrome {
4224
- background-color: var(--light-theme-primary-color-1);
4258
+ background-color: var(--rrd-light-theme-primary-color-1);
4225
4259
  }
4226
4260
  .ace-chrome .ace_gutter,
4227
4261
  .ace_layer.ace_gutter-layer.ace_folding-enabled {
4228
- background-color: var(--light-theme-primary-color-5);
4262
+ background-color: var(--rrd-light-theme-primary-color-5);
4229
4263
  }
4230
4264
  .ace-chrome .ace_gutter-active-line,
4231
4265
  .ace_layer.ace_gutter-layer.ace_folding-enabled > .ace_gutter-cell.ace_gutter-active-line {
4232
- background-color: var(--light-theme-primary-color-7);
4266
+ background-color: var(--rrd-light-theme-primary-color-7);
4233
4267
  }
4234
4268
  .ace-chrome .ace_marker-layer .ace_active-line,
4235
4269
  .ace_content > .ace_layer.ace_marker-layer > .ace_active-line {
4236
- background-color: var(--light-theme-primary-color-4);
4270
+ background-color: var(--rrd-light-theme-primary-color-4);
4237
4271
  }
4238
4272
  .rrd-script-editor.ace_editor.ace_hidpi.ace-chrome {
4239
- background-color: var(--light-theme-primary-color-1);
4273
+ background-color: var(--rrd-light-theme-primary-color-1);
4274
+ }
4275
+
4276
+ /** language panel */
4277
+ .rrd-language-list-header {
4278
+ padding: 2px 4px;
4279
+ border-bottom: 1px solid #bfbfd2;
4280
+ font-size: 0.85em;
4281
+ color: black;
4282
+ background-color: var(--rrd-light-theme-primary-color-5);
4283
+ }
4284
+ .rrd-language-action-button {
4285
+ padding: 3px 6px 2px 6px;
4286
+ font-size: 12px;
4287
+ background-color: var(--rrd-light-theme-primary-color-8);
4288
+ color: var(--light-theme-light-text-color);
4289
+ border: none;
4290
+ border-radius: 3px;
4291
+ cursor: pointer;
4292
+ }
4293
+ .rrd-language-action-button:hover {
4294
+ background-color: var(--rrd-light-theme-primary-color-9);
4295
+ }
4296
+ .rrd-language-table-view {
4297
+ background-color: var(--rrd-light-theme-primary-color-2);
4298
+ color: #111;
4299
+ }
4300
+ .rrd-language-table-header-label {
4301
+ display: flex;
4302
+ align-items: center;
4303
+ gap: 10px;
4304
+ height: 28px;
4305
+ padding: 2px 4px;
4306
+ background-color: var(--rrd-light-theme-primary-color-5);
4307
+ }
4308
+ .rrd-language-field-table-header {
4309
+ height: 26px;
4310
+ padding: 0px 4px;
4311
+ background-color: var(--rrd-light-theme-primary-color-3);
4312
+ font-size: 12px;
4313
+ font-weight: 600;
4314
+ border-bottom: 1px solid #BBBBBB;
4315
+ }
4316
+ .rrd-language-field-action-button {
4317
+ margin-right: 4px;
4318
+ padding: 1px 6px;
4319
+ border: none;
4320
+ font-weight: normal;
4321
+ border-radius: 2px;
4322
+ color: var(--light-theme-light-text-color);
4323
+ background-color: var(--rrd-light-theme-primary-color-7);
4324
+ cursor: pointer;
4325
+ }
4326
+ .rrd-language-field-table {
4327
+ border-spacing: 0 !important;
4328
+ border-collapse: separate !important;
4329
+ margin: 0;
4330
+ padding: 0;
4331
+ box-sizing: border-box;
4332
+ color: #111;
4333
+ text-align: left;
4334
+ font-size: 12px;
4335
+ background-color: var(--rrd-light-theme-primary-color-1);
4336
+ }
4337
+ .rrd-language-field-table tr td:first-child {
4338
+ text-align: center;
4339
+ }
4340
+ .rrd-language-field-table tr:nth-child(2n) {
4341
+ background-color: var(--rrd-light-theme-primary-color-2);
4342
+ }
4343
+ .rrd-language-field-table td, th {
4344
+ border-right: 1px solid #C0C0C0;
4345
+ border-bottom: 1px solid #C0C0C0;
4346
+ padding: 0 4px;
4347
+ height: 24px;
4348
+ }
4349
+ .rrd-language-field-table th {
4350
+ text-align: center;
4351
+ background-color: var(--rrd-light-theme-primary-color-3);
4352
+ }
4353
+ .rrd-language-field-table tr {
4354
+ height: 24px;
4355
+ }
4356
+ .rrd-language-field-table tr td span {
4357
+ display: inline-block;
4358
+ width: 100%;
4359
+ border: 1px solid transparent;
4360
+ padding: 2px 6px;
4361
+ word-break: break-word;
4362
+ text-align: left;
4363
+ }
4364
+ .rrd-language-field-table tr td span:hover {
4365
+ background-color: #f8f8ff;
4366
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4367
+ border-radius: 2px;
4368
+ outline: none;
4369
+ }
4370
+ .rrd-language-field-table tr td span:focus {
4371
+ background-color: rgb(255, 255, 255);
4372
+ color: rgb(34, 34, 34);
4373
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4374
+ border-radius: 2px;
4375
+ outline: none;
4240
4376
  }
4241
4377
 
4242
4378
  /* 다이얼로그 */
@@ -4247,7 +4383,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4247
4383
  flex-direction: column;
4248
4384
  min-width: 300px;
4249
4385
  min-height: 200px;
4250
- background-color: var(--dialog-background);
4386
+ background-color: var(--rrd-dialog-background);
4251
4387
  border-radius: 5px;
4252
4388
  box-shadow: rgba(0, 0, 0, 0.18) 0px 5px 20px, rgba(0, 0, 0, 0.23) 0px 5px 6px;
4253
4389
  color: #3a3a3a;
@@ -4284,7 +4420,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4284
4420
  min-height: 16px;
4285
4421
  height: 36px;
4286
4422
  border-radius: 5px 5px 0 0;
4287
- background-color: var(--light-theme-primary-color-9);
4423
+ background-color: var(--rrd-light-theme-primary-color-9);
4288
4424
  color: #fff;
4289
4425
  cursor: move;
4290
4426
  }
@@ -4346,7 +4482,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4346
4482
  color: #828282;
4347
4483
  }
4348
4484
  .rrd-dialog-buttons > .dialog-submit-button {
4349
- color: var(--light-theme-primary-color-10);
4485
+ color: var(--rrd-light-theme-primary-color-10);
4350
4486
  }
4351
4487
  .rrd-dialog-buttons > .dialog-confirm-button {
4352
4488
  color: #e03131;
@@ -4410,32 +4546,34 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4410
4546
  .rrd-data-dialog-body button {
4411
4547
  height: 24px;
4412
4548
  background: none;
4413
- border: 1px solid var(--light-theme-primary-color-9);
4549
+ border: 1px solid var(--rrd-light-theme-primary-color-9);
4414
4550
  border-radius: 4px;
4415
- color: var(--light-theme-primary-color-10);
4551
+ color: var(--rrd-light-theme-primary-color-10);
4416
4552
  font-size: 14px;
4417
4553
  margin-left: 4px;
4418
4554
  cursor: pointer;
4419
4555
  }
4420
4556
  .rrd-data-dialog-body button:hover {
4421
- background: var(--light-theme-primary-color-9);
4557
+ background: var(--rrd-light-theme-primary-color-9);
4422
4558
  color: white;
4423
4559
  }
4424
4560
  .rrd-data-dialog-body input {
4425
- border: 1px solid var(--light-theme-primary-color-8);
4561
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4426
4562
  border-radius: 4px;
4427
4563
  }
4428
4564
  .rrd-data-dialog-body select {
4429
4565
  height: 24px;
4430
- border: 1px solid var(--light-theme-primary-color-8);
4566
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4431
4567
  border-radius: 4px;
4432
4568
  background: transparent;
4433
4569
  }
4434
4570
  .rrd-data-dialog-body input:focus {
4435
- outline: none
4571
+ outline: none;
4572
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4573
+ border-radius: 4px;
4436
4574
  }
4437
4575
  .rrd-data-dialog-body input.invalidate-field {
4438
- border: 1px solid var(--dialog-invalidate-color);
4576
+ border: 1px solid var(--rrd-dialog-invalidate-color);
4439
4577
  border-radius: 2px;
4440
4578
  }
4441
4579
  .rrd-data-dialog-fields {
@@ -4468,7 +4606,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4468
4606
  .rrd-validate-message {
4469
4607
  padding-top: 2px;
4470
4608
  font-size: 12px;
4471
- color: var(--dialog-invalidate-color);
4609
+ color: var(--rrd-dialog-invalidate-color);
4472
4610
  opacity: 0;
4473
4611
  transform: rotateX(-90deg);
4474
4612
  transform-origin: top center;
@@ -4648,8 +4786,8 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4648
4786
  cursor: pointer;
4649
4787
  }
4650
4788
  .rrd-open-dialog-body li[data-select] {
4651
- background-color: var(--light-theme-primary-color-3);
4652
- color: var(--light-theme-primary-color-9);
4789
+ background-color: var(--rrd-light-theme-primary-color-3);
4790
+ color: var(--rrd-light-theme-primary-color-9);
4653
4791
  text-decoration: underline;
4654
4792
  }
4655
4793
  .rrd-open-dialog-list-container ul {
@@ -4663,7 +4801,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4663
4801
  flex: 1 1 0;
4664
4802
  }
4665
4803
  .rrd-open-dialog-preview-container {
4666
- box-shadow: var(--light-theme-primary-color-9) 0px 0px 0px 1px;
4804
+ box-shadow: var(--rrd-light-theme-primary-color-9) 0px 0px 0px 1px;
4667
4805
  border-radius: 4px;
4668
4806
  }
4669
4807
  .rrd-open-dialog-preview-container .rr-print-page {
@@ -4741,13 +4879,13 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4741
4879
  .rrd-new-report-dialog-template-item > img {
4742
4880
  padding: 8px;
4743
4881
  object-fit: contain;
4744
- box-shadow: var(--light-theme-primary-color-7) 0px 1px 2px 0px;
4882
+ box-shadow: var(--rrd-light-theme-primary-color-7) 0px 1px 2px 0px;
4745
4883
  border-radius: 4px;
4746
4884
  }
4747
4885
 
4748
4886
  .rrd-new-report-dialog-template-item[data-selected] > img {
4749
4887
  box-sizing: border-box;
4750
- border: 2px solid var(--light-theme-primary-color-7);
4888
+ border: 2px solid var(--rrd-light-theme-primary-color-7);
4751
4889
  border-radius: 4px;
4752
4890
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
4753
4891
  }
@@ -4765,6 +4903,16 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4765
4903
  }
4766
4904
 
4767
4905
 
4906
+ /* Language Dialog */
4907
+ .rrd-language-dialog {
4908
+ min-height: 80px;
4909
+ }
4910
+
4911
+ .rrd-dialog-body.rrd-language-dialog-body {
4912
+ min-height: 60px;
4913
+ }
4914
+
4915
+
4768
4916
  /** message bar */
4769
4917
  .rrd-messagebar {
4770
4918
  padding: 0 8px;
@@ -4790,7 +4938,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4790
4938
  /** options */
4791
4939
  .rrd-options-container {
4792
4940
  padding: 20px;
4793
- background-color: var(--light-theme-primary-color-1);
4941
+ background-color: var(--rrd-light-theme-primary-color-1);
4794
4942
  }
4795
4943
  .rrd-options-header-title {
4796
4944
  font-size: 20px;
@@ -4800,7 +4948,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4800
4948
  /* popup selector */
4801
4949
  .rrd-popup-selector {
4802
4950
  min-width: 65px;
4803
- background: var(--tool-item-select-background-color);
4951
+ background: var(--rrd-tool-item-select-background-color);
4804
4952
  box-shadow: 0 0 4px 1px #ddd;
4805
4953
  border-radius: 3px;
4806
4954
  border: 1px solid var(--ligt-theme-primary-color-4);
@@ -4819,30 +4967,30 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4819
4967
  border-radius: 2px;
4820
4968
  }
4821
4969
  .rrd-select-item-container:hover {
4822
- background-color: var(--light-theme-primary-color-5);
4970
+ background-color: var(--rrd-light-theme-primary-color-5);
4823
4971
  }
4824
4972
  .rrd-popup-selector button[data-selected] {
4825
- background-color: var(--light-theme-primary-color-4);
4973
+ background-color: var(--rrd-light-theme-primary-color-4);
4826
4974
  }
4827
4975
 
4828
4976
  /* 편집용 툴 아이템 - 컨트롤 */
4829
4977
  .rrd-tool-input-control,
4830
4978
  .rrd-tool-number-input-control,
4831
4979
  .rrd-tool-select-control {
4832
- background-color: var(--tool-item-select-background-color);
4833
- border: 1px solid var(--light-theme-primary-color-7);
4834
- border-radius: var(--tool-item-border-radius);
4980
+ background-color: var(--rrd-tool-item-select-background-color);
4981
+ border: 1px solid var(--rrd-light-theme-primary-color-7);
4982
+ border-radius: var(--rrd-tool-item-border-radius);
4835
4983
  height: 24px;
4836
4984
  }
4837
4985
  .rrd-tool-input-control:not([data-align="center"]) {
4838
- padding: 0 var(--tool-item-edit-padding-horz);
4986
+ padding: 0 var(--rrd-tool-item-edit-padding-horz);
4839
4987
  }
4840
4988
  .rrd-tool-number-input-control {
4841
4989
  width: 32px;
4842
4990
  }
4843
4991
  .rrd-tool-input-control:focus,
4844
4992
  .rrd-tool-number-input-control:focus {
4845
- outline: 1px solid var(--light-theme-primary-color-9);
4993
+ outline: 1px solid var(--rrd-light-theme-primary-color-9);
4846
4994
  }
4847
4995
  .rrd-tool-number-input-control::-webkit-outer-spin-button,
4848
4996
  .rrd-tool-number-input-control::-webkit-inner-spin-button {
@@ -4852,6 +5000,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4852
5000
  /* 편집용 툴 아이템 - 레이블 */
4853
5001
  .rrd-tool-input-label,
4854
5002
  .rrd-tool-number-input-label,
5003
+ .rrd-tool-check-input-label,
4855
5004
  .rrd-tool-select-label {
4856
5005
  display: inline-block;
4857
5006
  margin: 0 0 2px 3px;
@@ -4860,13 +5009,13 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4860
5009
 
4861
5010
  /* 선택 툴 아이템 */
4862
5011
  .rrd-tool-select-control {
4863
- padding-left: var(--tool-item-edit-padding-horz);
5012
+ padding-left: var(--rrd-tool-item-edit-padding-horz);
4864
5013
  }
4865
5014
  .rrd-tool-select-control:hover {
4866
5015
  cursor: pointer;;
4867
5016
  }
4868
5017
  .rrd-tool-select-control[data-focused] {
4869
- border: 1px solid var(--light-theme-primary-color-8);
5018
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4870
5019
  }
4871
5020
  .rrd-tool-select-control[data-disabled] {
4872
5021
  color: lightgray;
@@ -4875,11 +5024,37 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4875
5024
  pointer-events: none;
4876
5025
  }
4877
5026
 
5027
+ /* 체크 툴 아이템 */
5028
+ /* TODO: JS로 인라인 코드로 처리 필요 */
5029
+ .rrd-tool-check-input-control {
5030
+ cursor: pointer;
5031
+ }
5032
+ .rrd-tool-check-input-control::before {
5033
+ width: 20px;
5034
+ height: 20px;
5035
+ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgNUMzIDQuNDY5NTcgMy4yMTA3MSAzLjk2MDg2IDMuNTg1NzkgMy41ODU3OUMzLjk2MDg2IDMuMjEwNzEgNC40Njk1NyAzIDUgM0gxOUMxOS41MzA0IDMgMjAuMDM5MSAzLjIxMDcxIDIwLjQxNDIgMy41ODU3OUMyMC43ODkzIDMuOTYwODYgMjEgNC40Njk1NyAyMSA1VjE5QzIxIDE5LjUzMDQgMjAuNzg5MyAyMC4wMzkxIDIwLjQxNDIgMjAuNDE0MkMyMC4wMzkxIDIwLjc4OTMgMTkuNTMwNCAyMSAxOSAyMUg1QzQuNDY5NTcgMjEgMy45NjA4NiAyMC43ODkzIDMuNTg1NzkgMjAuNDE0MkMzLjIxMDcxIDIwLjAzOTEgMyAxOS41MzA0IDMgMTlWNVoiIHN0cm9rZT0iIzZGNkZBNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
5036
+ display: inline-block;
5037
+ content: '';
5038
+ mask-size: cover;
5039
+ mask-position: center;
5040
+ background-color: var(--light-theme-icon-color);
5041
+ }
5042
+
5043
+ .rrd-tool-check-input-control:checked::before {
5044
+ width: 20px;
5045
+ height: 20px;
5046
+ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgMTJMMTEgMTRMMTUgMTBNMyA1QzMgNC40Njk1NyAzLjIxMDcxIDMuOTYwODYgMy41ODU3OSAzLjU4NTc5QzMuOTYwODYgMy4yMTA3MSA0LjQ2OTU3IDMgNSAzSDE5QzE5LjUzMDQgMyAyMC4wMzkxIDMuMjEwNzEgMjAuNDE0MiAzLjU4NTc5QzIwLjc4OTMgMy45NjA4NiAyMSA0LjQ2OTU3IDIxIDVWMTlDMjEgMTkuNTMwNCAyMC43ODkzIDIwLjAzOTEgMjAuNDE0MiAyMC40MTQyQzIwLjAzOTEgMjAuNzg5MyAxOS41MzA0IDIxIDE5IDIxSDVDNC40Njk1NyAyMSAzLjk2MDg2IDIwLjc4OTMgMy41ODU3OSAyMC40MTQyQzMuMjEwNzEgMjAuMDM5MSAzIDE5LjUzMDQgMyAxOVY1WiIgc3Ryb2tlPSIjNkY2RkE0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
5047
+ display: inline-block;
5048
+ content: '';
5049
+ mask-size: cover;
5050
+ mask-position: center;
5051
+ background-color: var(--light-theme-icon-color);
5052
+ }
4878
5053
 
4879
5054
  /** feedbacks */
4880
5055
  .rrd-feedback-drop-target {
4881
5056
  position: absolute;
4882
- background-color: var(--light-theme-primary-color-9);
5057
+ background-color: var(--rrd-light-theme-primary-color-9);
4883
5058
  opacity: 0.2;
4884
5059
  }
4885
5060
  .rrd-feedback-drop-edge {
@@ -4905,7 +5080,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4905
5080
  .rrd-asset-drag-image {
4906
5081
  background-color: var(--drag-background);
4907
5082
  color: var(--light-theme-light-text-color);
4908
- /* background-color: var(--light-theme-primary-color-8); */
5083
+ /* background-color: var(--rrd-light-theme-primary-color-8); */
4909
5084
  padding: 2px 8px;
4910
5085
  border-radius: 4px;
4911
5086
  font-size: 13px;
@@ -4934,7 +5109,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4934
5109
 
4935
5110
  .rr-report-container {
4936
5111
  border: none;
4937
- background: var(--light-theme-primary-color-4);
5112
+ background: var(--rrd-light-theme-primary-color-4);
4938
5113
  }
4939
5114
 
4940
5115
  .rr-report-view {
@@ -4944,14 +5119,16 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4944
5119
  /* inspector */
4945
5120
  /* 인스펙터 최상위 */
4946
5121
  .rp-root {
4947
- background: var(--light-theme-primary-color-1);
5122
+ background: var(--rrd-light-theme-primary-color-1);
4948
5123
  color: var(--light-theme-dark-text-color);
4949
- z-index: 200;
5124
+ }
5125
+ .rp-inspector {
5126
+ z-index: 220;
4950
5127
  }
4951
5128
  .rp-root input {
4952
5129
  border: none;
4953
5130
  color: var(--light-theme-dark-text-color);
4954
- background-color: var(--light-theme-primary-color-4);
5131
+ background-color: var(--rrd-light-theme-primary-color-4);
4955
5132
  }
4956
5133
  .rp-root input::placeholder,
4957
5134
  .rr-property-select[data-empty="true"] {
@@ -4960,14 +5137,14 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4960
5137
  }
4961
5138
  .rp-root select {
4962
5139
  border: none;
4963
- background-color: var(--light-theme-primary-color-4);
5140
+ background-color: var(--rrd-light-theme-primary-color-4);
4964
5141
  color: var(--light-theme-dark-text-color);
4965
5142
  }
4966
5143
  .rr-property-body {
4967
- background-color: var(--light-theme-primary-color-1);
5144
+ background-color: var(--rrd-light-theme-primary-color-1);
4968
5145
  }
4969
5146
  .rr-property-category {
4970
- background-color: var(--light-theme-primary-color-3);
5147
+ background-color: var(--rrd-light-theme-primary-color-3);
4971
5148
  border-top: none;
4972
5149
  border-bottom: none;
4973
5150
  height: 18px;
@@ -4978,31 +5155,31 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4978
5155
  color: var(--light-theme-dark-text-color);
4979
5156
  }
4980
5157
  .rp-category-text {
4981
- color: var(--light-theme-primary-color-9);
5158
+ color: var(--rrd-light-theme-primary-color-9);
4982
5159
  font-weight: bold;
4983
5160
  }
4984
5161
  .rr-property-row {
4985
5162
  height: 28px;
4986
5163
  }
4987
5164
  .rr-property-row-focus {
4988
- background: var(--light-theme-primary-color-3);
5165
+ background: var(--rrd-light-theme-primary-color-3);
4989
5166
  }
4990
5167
  .rr-property-row:hover {
4991
- background: var(--light-theme-primary-color-2);
5168
+ background: var(--rrd-light-theme-primary-color-2);
4992
5169
  }
4993
5170
  .rr-property-row-label {
4994
5171
  color: var(--light-theme-dark-text-color);
4995
5172
  }
4996
5173
  .rr-property-edit-button {
4997
- background: var(--light-theme-primary-color-6);
5174
+ background: var(--rrd-light-theme-primary-color-6);
4998
5175
  border: 1px solid #b6b6b6;
4999
5176
  color: #6e607a;
5000
5177
  }
5001
5178
  .rr-property-row-content {
5002
- min-width: 100px;
5179
+ min-width: 20px;
5003
5180
  }
5004
5181
  .rr-property-row-content input {
5005
- min-width: 50px;
5182
+ min-width: 20px;
5006
5183
  }
5007
5184
  .rr-property-edit-button {
5008
5185
  min-width: 10px;
@@ -5021,31 +5198,30 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5021
5198
  padding: 0 12px;
5022
5199
  letter-spacing: .05rem;
5023
5200
  font-weight: 600;
5024
- color: var(--light-theme-primary-color-9);
5025
- background-color: var(--light-theme-primary-color-4);
5201
+ color: var(--rrd-light-theme-primary-color-9);
5202
+ background-color: var(--rrd-light-theme-primary-color-4);
5026
5203
  box-shadow: inset 0 -1px 0 0 #e3e3e3;
5027
5204
  }
5028
5205
  .rrd-outline-container .rrd-panel-content {
5029
- background-color: var(--light-theme-primary-color-2);
5206
+ background-color: var(--rrd-light-theme-primary-color-2);
5030
5207
  }
5031
5208
  .rr-outline-root {
5032
- font-family: var(--font-family);
5209
+ font-family: var(--rrd-font-family);
5033
5210
  }
5034
-
5035
5211
  .rr-outline-body {
5036
- background: var(--light-theme-primary-color-2);
5212
+ background: var(--rrd-light-theme-primary-color-2);
5037
5213
  }
5038
5214
  .rr-outline-row {
5039
5215
  color: var(--light-theme-dark-text-color);
5040
5216
  }
5041
5217
  .rr-outline-row:hover {
5042
- background-color: var(--light-theme-primary-color-5);
5218
+ background-color: var(--rrd-light-theme-primary-color-5);
5043
5219
  }
5044
5220
  .rr-outline-row-focus {
5045
- background-color: var(--light-theme-primary-color-4);
5221
+ background-color: var(--rrd-light-theme-primary-color-4);
5046
5222
  }
5047
5223
  .rr-outline-row-focus:hover {
5048
- background-color: var(--light-theme-primary-color-4);
5224
+ background-color: var(--rrd-light-theme-primary-color-4);
5049
5225
  }
5050
5226
  .rr-outline-expander,
5051
5227
  .rr-tree-expander ,
@@ -5060,13 +5236,13 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5060
5236
  }
5061
5237
  .rr-outline-icon svg path,
5062
5238
  .rr-tree-icon svg path {
5063
- stroke: var(--light-theme-primary-color-10);
5239
+ stroke: var(--rrd-light-theme-primary-color-10);
5064
5240
  }
5065
5241
  .rr-outline-icon svg g path,
5066
5242
  .rr-outline-icon svg g rect,
5067
5243
  .rr-tree-icon svg g path,
5068
5244
  .rr-tree-icon svg g rect {
5069
- fill: var(--light-theme-primary-color-10);
5245
+ fill: var(--rrd-light-theme-primary-color-10);
5070
5246
  }
5071
5247
 
5072
5248
  /* tree */
@@ -5082,7 +5258,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5082
5258
  color: var(--light-theme-dark-text-color);
5083
5259
  }
5084
5260
  .rr-tree-row:hover {
5085
- background: var(--light-theme-primary-color-3);
5261
+ background: var(--rrd-light-theme-primary-color-3);
5086
5262
  width: 100%;
5087
5263
  }
5088
5264
 
@@ -5091,11 +5267,11 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5091
5267
  }
5092
5268
 
5093
5269
  .rr-tree-row-focus {
5094
- background: var(--light-theme-primary-color-4);
5270
+ background: var(--rrd-light-theme-primary-color-4);
5095
5271
  }
5096
5272
  .rr-tree-row-select,
5097
5273
  .rr-tree-row-select:hover {
5098
- background: var(--light-theme-primary-color-7);
5274
+ background: var(--rrd-light-theme-primary-color-7);
5099
5275
  }
5100
5276
  .rr-tree-row[data-type=report-simple-data] > .rr-tree-icon{
5101
5277
  padding: 1px 5px 0 0;
@@ -5145,7 +5321,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5145
5321
  }
5146
5322
 
5147
5323
  .rr-band-designer span[data-title='1'] {
5148
- background: var(--light-theme-primary-color-8);
5324
+ background: var(--rrd-light-theme-primary-color-8);
5149
5325
  color: var(--light-theme-light-text-color);
5150
5326
  }
5151
5327
 
@@ -5156,7 +5332,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5156
5332
  }
5157
5333
 
5158
5334
  .rr-band-designer button:hover {
5159
- color: var(--light-theme-primary-color-8);
5335
+ color: var(--rrd-light-theme-primary-color-8);
5160
5336
  }
5161
5337
 
5162
5338
  .rr-band-designer button:disabled {
@@ -5164,11 +5340,11 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5164
5340
  }
5165
5341
 
5166
5342
  .rr-band-designer button:disabled:hover {
5167
- color: var(--light-theme-primary-color-9);
5343
+ color: var(--rrd-light-theme-primary-color-9);
5168
5344
  }
5169
5345
 
5170
5346
  .rr-band-designer-arrow :hover {
5171
- background: var(--light-theme-primary-color-8);
5347
+ background: var(--rrd-light-theme-primary-color-8);
5172
5348
  }
5173
5349
 
5174
5350
  .rr-band-designer > div {
@@ -5198,10 +5374,10 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5198
5374
  background: #8a8a91;
5199
5375
  }
5200
5376
  .rr-edit-marquee-item[data-select] {
5201
- background: var(--marquee-bg-color)
5377
+ background: var(--rrd-marquee-bg-color)
5202
5378
  }
5203
5379
  .rr-edit-marquee-item[data-cellselect] {
5204
- background: var(--marquee-cellselect-bg-color)
5380
+ background: var(--rrd-marquee-cellselect-bg-color)
5205
5381
  }
5206
5382
  .rr-edit-marquee-item[data-target] {
5207
5383
  /* display: none; */
@@ -5218,9 +5394,9 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5218
5394
  background: var(--light-theme-guard-item-odd-color);
5219
5395
  }
5220
5396
  .rr-section-guard-item-focus {
5221
- border-top: 1px solid var(--light-theme-primary-color-10);
5222
- border-bottom: 1px solid var(--light-theme-primary-color-10);
5223
- background-color: var(--light-theme-primary-color-6);
5397
+ border-top: 1px solid var(--rrd-light-theme-primary-color-10);
5398
+ border-bottom: 1px solid var(--rrd-light-theme-primary-color-10);
5399
+ background-color: var(--rrd-light-theme-primary-color-6);
5224
5400
  }
5225
5401
 
5226
5402
  /* ruler */
@@ -5234,15 +5410,15 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5234
5410
  border: none;
5235
5411
  }
5236
5412
  .rr-ruler-indicator {
5237
- background-color: var(--light-theme-primary-color-4);
5413
+ background-color: var(--rrd-light-theme-primary-color-4);
5238
5414
  }
5239
5415
  .rr-ruler-indicator-vert {
5240
- border-top: 1px solid var(--light-theme-primary-color-8);
5241
- border-bottom: 1px solid var(--light-theme-primary-color-8);
5416
+ border-top: 1px solid var(--rrd-light-theme-primary-color-8);
5417
+ border-bottom: 1px solid var(--rrd-light-theme-primary-color-8);
5242
5418
  }
5243
5419
  .rr-ruler-indicator-horz {
5244
- border-left: 1px solid var(--light-theme-primary-color-8);
5245
- border-right: 1px solid var(--light-theme-primary-color-8);
5420
+ border-left: 1px solid var(--rrd-light-theme-primary-color-8);
5421
+ border-right: 1px solid var(--rrd-light-theme-primary-color-8);
5246
5422
  }
5247
5423
 
5248
5424
  /* edit layer 영역 */
@@ -5257,21 +5433,21 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5257
5433
  display: none;
5258
5434
  }
5259
5435
  .rr-edit-marquee-item[data-focus] {
5260
- background-color: var(--marquee-focus-bg-color);
5436
+ background-color: var(--rrd-marquee-focus-bg-color);
5261
5437
  }
5262
5438
  .rr-focus-handle {
5263
5439
  background: white;
5264
- border: 2px solid var(--focus-bg-color);
5440
+ border: 2px solid var(--rrd-focus-bg-color);
5265
5441
  border-radius: 50%;
5266
5442
  }
5267
5443
  .rr-focus-view {
5268
- border: 2px solid var(--focus-bg-color);
5444
+ border: 2px solid var(--rrd-focus-bg-color);
5269
5445
  }
5270
5446
  .rr-select-view {
5271
5447
  border: 2px solid rgb(0 133 255 / 52%);
5272
5448
  }
5273
5449
  .rr-table-select-view {
5274
- background-color: var(--focus-bg-color);
5450
+ background-color: var(--rrd-focus-bg-color);
5275
5451
  opacity: 0.08;
5276
5452
  }
5277
5453
  .rr-select-view[data-cell='1'] {
@@ -5314,7 +5490,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5314
5490
 
5315
5491
  /** colorPicker */
5316
5492
  .rr-color-picker {
5317
- background: var(--light-theme-primary-color-1);
5493
+ background: var(--rrd-light-theme-primary-color-1);
5318
5494
  border: none;
5319
5495
  border-radius: 3px;
5320
5496
  box-shadow: 1px 1px 20px 2px rgb(89 89 89 / 60%);
@@ -5338,13 +5514,6 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5338
5514
  }
5339
5515
 
5340
5516
  /** 아이템 마커 */
5341
- .rr-bind-marker[data-vis] {
5342
- background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNi41IiBjeT0iMy41IiByPSIyLjI1IiBmaWxsPSIjNEVBQUZGIiBzdHJva2U9IiMzQTNBM0EiIHN0cm9rZS13aWR0aD0iMC41Ii8+Cjwvc3ZnPgo=") no-repeat center center;
5343
- }
5344
- .rr-bind-marker[data-vis][data-sys] {
5345
- background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNi41IiBjeT0iMy41IiByPSIyLjI1IiBmaWxsPSIjNDRDRDZCIiBzdHJva2U9IiMzQTNBM0EiIHN0cm9rZS13aWR0aD0iMC41Ii8+Cjwvc3ZnPgo=") no-repeat center center;
5346
- }
5347
-
5348
5517
  .rr-image[data-empty] span::before,
5349
5518
  .rr-svg[data-empty] span:before {
5350
5519
  position: absolute;
@@ -5373,26 +5542,26 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5373
5542
  .rr-property-row-content input:focus,
5374
5543
  .rr-property-row-content select:focus {
5375
5544
  outline: none;
5376
- border: 2px solid var(--light-theme-primary-color-8);
5545
+ border: 2px solid var(--rrd-light-theme-primary-color-8);
5377
5546
  border-radius: 3px;
5378
5547
  }
5379
5548
  /** 체크박스 */
5380
- input[type="checkbox"] {
5549
+ input[type="checkbox"]:not(.rrd-simple-data-preview-check) {
5381
5550
  appearance: none;
5382
5551
  -webkit-appearance: none;
5383
5552
  -moz-appearance: none;
5384
5553
  background: none;
5385
5554
  }
5386
5555
  input[type="checkbox"]:focus {
5387
- outline: none;
5388
- border: none;
5389
- background-color: transparent;
5556
+ outline: none;
5557
+ border: none;
5558
+ background-color: transparent;
5390
5559
  }
5391
5560
  input[type="checkbox"]:checked {
5392
5561
  background: none;
5393
5562
  }
5394
5563
 
5395
- input[type="checkbox"]::before {
5564
+ .rr-property-row input[type="checkbox"]::before {
5396
5565
  width: 18px;
5397
5566
  height: 18px;
5398
5567
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgNUMzIDQuNDY5NTcgMy4yMTA3MSAzLjk2MDg2IDMuNTg1NzkgMy41ODU3OUMzLjk2MDg2IDMuMjEwNzEgNC40Njk1NyAzIDUgM0gxOUMxOS41MzA0IDMgMjAuMDM5MSAzLjIxMDcxIDIwLjQxNDIgMy41ODU3OUMyMC43ODkzIDMuOTYwODYgMjEgNC40Njk1NyAyMSA1VjE5QzIxIDE5LjUzMDQgMjAuNzg5MyAyMC4wMzkxIDIwLjQxNDIgMjAuNDE0MkMyMC4wMzkxIDIwLjc4OTMgMTkuNTMwNCAyMSAxOSAyMUg1QzQuNDY5NTcgMjEgMy45NjA4NiAyMC43ODkzIDMuNTg1NzkgMjAuNDE0MkMzLjIxMDcxIDIwLjAzOTEgMyAxOS41MzA0IDMgMTlWNVoiIHN0cm9rZT0iIzZGNkZBNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
@@ -5403,7 +5572,7 @@ input[type="checkbox"]::before {
5403
5572
  background-color: var(--light-theme-icon-color);
5404
5573
  }
5405
5574
 
5406
- input[type="checkbox"]:checked::before {
5575
+ .rr-property-row input[type="checkbox"]:checked::before {
5407
5576
  width: 18px;
5408
5577
  height: 18px;
5409
5578
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgMTJMMTEgMTRMMTUgMTBNMyA1QzMgNC40Njk1NyAzLjIxMDcxIDMuOTYwODYgMy41ODU3OSAzLjU4NTc5QzMuOTYwODYgMy4yMTA3MSA0LjQ2OTU3IDMgNSAzSDE5QzE5LjUzMDQgMyAyMC4wMzkxIDMuMjEwNzEgMjAuNDE0MiAzLjU4NTc5QzIwLjc4OTMgMy45NjA4NiAyMSA0LjQ2OTU3IDIxIDVWMTlDMjEgMTkuNTMwNCAyMC43ODkzIDIwLjAzOTEgMjAuNDE0MiAyMC40MTQyQzIwLjAzOTEgMjAuNzg5MyAxOS41MzA0IDIxIDE5IDIxSDVDNC40Njk1NyAyMSAzLjk2MDg2IDIwLjc4OTMgMy41ODU3OSAyMC40MTQyQzMuMjEwNzEgMjAuMDM5MSAzIDE5LjUzMDQgMyAxOVY1WiIgc3Ryb2tlPSIjNkY2RkE0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
@@ -5414,4 +5583,69 @@ input[type="checkbox"]:checked::before {
5414
5583
  background-color: var(--light-theme-icon-color);
5415
5584
  }
5416
5585
 
5586
+ /* Designer Base Components */
5417
5587
 
5588
+ /* Designer Table */
5589
+ .rrd-table,
5590
+ .rrd-table th,
5591
+ .rrd-table td {
5592
+ border: 1px solid #C0C0C0;
5593
+ border-collapse: collapse;
5594
+ }
5595
+
5596
+ .rrd-table {
5597
+ background-color: var(--rrd-light-theme-primary-color-1);
5598
+ }
5599
+
5600
+ .rrd-table tr:nth-child(even) {
5601
+ background-color: var(--rrd-light-theme-primary-color-2);
5602
+ }
5603
+ .rrd-table tr[data-selected=true] {
5604
+ background-color: var(--rrd-light-theme-primary-color-6);
5605
+ }
5606
+
5607
+ .rrd-table th,
5608
+ .rrd-table td {
5609
+ padding: 2px;
5610
+ font-size: 12px;
5611
+ }
5612
+
5613
+ /* 테이블 셀 스크롤바 비활성화 */
5614
+ .rrd-table th::-webkit-scrollbar,
5615
+ .rrd-table td::-webkit-scrollbar {
5616
+ display: none;
5617
+ }
5618
+ .rrd-table th, .rrd-table td {
5619
+ -ms-overflow-style: none; /* IE and Edge */
5620
+ scrollbar-width: none; /* Firefox */
5621
+ }
5622
+
5623
+ .rrd-table th {
5624
+ position: sticky;
5625
+ top: 0;
5626
+ background-color: var(--light-theme-primary-color-3);
5627
+ }
5628
+
5629
+ .rrd-table td > span:focus {
5630
+ outline: 1px solid var(--light-theme-primary-color-9);
5631
+ border-radius: 1px;
5632
+ }
5633
+
5634
+ .rrd-table input[type=checkbox]:hover {
5635
+ cursor: pointer;
5636
+ }
5637
+
5638
+ .rrd-table-rows-selector[data-status=partial-checked]::before {
5639
+ width: 18px;
5640
+ height: 18px;
5641
+ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgNUMzIDQuNDY5NTcgMy4yMTA3MSAzLjk2MDg2IDMuNTg1NzkgMy41ODU3OUMzLjk2MDg2IDMuMjEwNzEgNC40Njk1NyAzIDUgM0gxOUMxOS41MzA0IDMgMjAuMDM5MSAzLjIxMDcxIDIwLjQxNDIgMy41ODU3OUMyMC43ODkzIDMuOTYwODYgMjEgNC40Njk1NyAyMSA1VjE5QzIxIDE5LjUzMDQgMjAuNzg5MyAyMC4wMzkxIDIwLjQxNDIgMjAuNDE0MkMyMC4wMzkxIDIwLjc4OTMgMTkuNTMwNCAyMSAxOSAyMUg1QzQuNDY5NTcgMjEgMy45NjA4NiAyMC43ODkzIDMuNTg1NzkgMjAuNDE0MkMzLjIxMDcxIDIwLjAzOTEgMyAxOS41MzA0IDMgMTlWNVoiIHN0cm9rZT0iIzZGNkZBNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8bGluZSB4MT0iNyIgeTE9IjEyIiB4Mj0iMTciIHkyPSIxMiIgc3Ryb2tlPSIjNkY2RkE0IiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+');
5642
+ display: inline-block;
5643
+ content: '';
5644
+ mask-size: cover;
5645
+ mask-position: center;
5646
+ background-color: var(--light-theme-icon-color);
5647
+ }
5648
+
5649
+ .rrd-table-row-action:hover {
5650
+ cursor: pointer;
5651
+ }