realreport-designer 1.9.0-alpha.0 → 1.9.0

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.
@@ -1,5 +1,5 @@
1
1
  /*
2
- RealReport Designer v1.8.8
2
+ RealReport Designer v1.9.0
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;
2780
+ --rrd-dialog-invalidate-color: #ff4d4f;
2775
2781
 
2776
- --container-background: #21252b;
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;
2777
2786
 
2778
- --common-active-foreground: #D7DAE0;
2779
- --common-inactive-foreground: #9DA5B4;
2780
-
2781
- --panel-container-background: #282c34;
2782
-
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);
3136
+ }
3137
+ .rrd-assetpanel {
3138
+ z-index: 210;
3141
3139
  }
3142
- .rrd-assetpanel input,
3143
- .rrd-datapanel input {
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;
@@ -3902,93 +4001,71 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3902
4001
  no-repeat center center;
3903
4002
  background-size: 13px;
3904
4003
  }
3905
- .rrd-band-field-table tr td span {
4004
+ .rrd-band-field-table tr td span,
4005
+ .rrd-simple-field-table tr td span {
3906
4006
  display: inline-block;
3907
- width: 100%;
4007
+ /* width: 100%; */
3908
4008
  border: 1px solid transparent;
3909
4009
  padding: 2px 6px;
3910
4010
  word-break: break-word;
3911
4011
  text-align: left;
3912
4012
  }
3913
- .rrd-band-field-table tr td span[contenteditable='true']:hover {
4013
+ .rrd-band-field-table tr td span[contenteditable='true']:hover,
4014
+ .rrd-simple-field-table tr td span[contenteditable='true']:hover {
3914
4015
  background-color: #ffffab;
3915
4016
  background-color: rgba(0, 255, 127, 0.05);
3916
4017
  border: 1px solid #008;
3917
4018
  border-radius: 2px;
3918
4019
  outline: none;
3919
4020
  }
3920
- .rrd-band-field-table tr td span[contenteditable='true']:focus {
4021
+ .rrd-band-field-table tr td span[contenteditable='true']:focus,
4022
+ .rrd-simple-field-table tr td span[contenteditable='true']:focus {
3921
4023
  background-color: #ffffff;
3922
4024
  color: #222;
3923
4025
  border: 1px solid #008;
3924
4026
  border-radius: 2px;
3925
4027
  outline: none;
3926
4028
  }
3927
- .rrd-rrd-band-field-table-add-btn {
4029
+ .rrd-band-field-table-add-btn {
3928
4030
  width: 100px;
3929
4031
  margin: 8px 0 0 8px;
3930
4032
 
3931
4033
  }
3932
- .rrd-rrd-band-field-table-add-btn:hover,
3933
- .rrd-rrd-band-field-table-remove-btn:hover
4034
+ .rrd-band-field-table-add-btn:hover,
4035
+ .rrd-band-field-table-remove-btn:hover
3934
4036
  {
3935
4037
  cursor: pointer;
3936
4038
  }
3937
4039
 
3938
- .rrd-rrd-band-data-sample-header {
4040
+ .rrd-band-data-sample-header {
3939
4041
  height: 26px;
3940
4042
  padding: 0px 4px;
3941
- background-color: var(--light-theme-primary-color-3);
4043
+ background-color: var(--rrd-light-theme-primary-color-3);
3942
4044
  color: #333;
3943
4045
  font-size: 12px;
3944
4046
  font-weight: bold;
3945
4047
  border-bottom: 1px solid #bbb;
4048
+ gap: 2px;
4049
+ overflow-x: auto;
4050
+ scrollbar-width: none;
3946
4051
  }
3947
- .rrd-rrd-band-data-sample-header-title {
4052
+ .rrd-band-data-sample-header-title {
3948
4053
  padding-top: 2px;
3949
4054
  margin-left: 2px;
4055
+ white-space: nowrap;
3950
4056
  }
3951
- .rrd-rrd-band-data-sample-header button {
4057
+ .rrd-band-data-sample-header button {
3952
4058
  font-size: 12px;
3953
4059
  border: none;
3954
4060
  }
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 {
4061
+ .rrd-band-data-sample-save {
3985
4062
  flex: 1 1 0;
3986
4063
  margin-left: auto;
3987
4064
  margin-right: 8px;
3988
4065
  text-align: right;
3989
4066
  text-decoration: underline;
3990
4067
  }
3991
- .rrd-rrd-band-data-sample-save::before {
4068
+ .rrd-band-data-sample-save::before {
3992
4069
  content: '';
3993
4070
  /* background-image: url('/assets/images/tool/data-save.png'); */
3994
4071
  background-size: 15px 15px;
@@ -3998,15 +4075,16 @@ input[data-rrproperty]::-webkit-inner-spin-button {
3998
4075
  vertical-align: middle;
3999
4076
  margin-right: 2px;
4000
4077
  }
4001
- .rrd-rrd-band-data-sample-save:hover {
4078
+ .rrd-band-data-sample-save:hover {
4002
4079
  color: #04f;
4003
4080
  }
4004
- .rrd-rrd-band-data-sample-row-count {
4081
+ .rrd-band-data-sample-row-count {
4005
4082
  /* flex: 1 1 0; */
4006
4083
  /* margin-left: auto; */
4007
4084
  text-align: right;
4085
+ white-space: nowrap;
4008
4086
  }
4009
- .rrd-rrd-band-data-sample-container {
4087
+ .rrd-band-data-sample-container {
4010
4088
  flex: 1 1 0;
4011
4089
  overflow: auto;
4012
4090
  }
@@ -4017,19 +4095,19 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4017
4095
  margin: 0;
4018
4096
  padding: 0;
4019
4097
  box-sizing: border-box;
4020
- background-color: var(--light-theme-primary-color-2);
4098
+ background-color: var(--rrd-light-theme-primary-color-2);
4021
4099
  color: #111;
4022
4100
  text-align: left;
4023
4101
  font-size: 12px;
4024
4102
  }
4025
4103
  .rrd-band-data-sample tr:nth-child(2n + 1) {
4026
- background-color: var(--light-theme-primary-color-1);
4104
+ background-color: var(--rrd-light-theme-primary-color-1);
4027
4105
  }
4028
4106
  .rrd-band-data-sample tr:hover {
4029
- background-color: var(--light-theme-primary-color-4);
4107
+ background-color: var(--rrd-light-theme-primary-color-4);
4030
4108
  }
4031
4109
  .rrd-band-data-sample tr[data-sel='true'] td {
4032
- background-color: var(--light-theme-primary-color-5);
4110
+ background-color: var(--rrd-light-theme-primary-color-5);
4033
4111
  color: var(--light-theme-light-text-color);
4034
4112
  }
4035
4113
 
@@ -4048,7 +4126,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4048
4126
  position: sticky;
4049
4127
  top: 0;
4050
4128
  z-index: 100;
4051
- background-color: var(--light-theme-primary-color-3);
4129
+ background-color: var(--rrd-light-theme-primary-color-3);
4052
4130
  text-align: center;
4053
4131
  padding: 0px;
4054
4132
  }
@@ -4102,14 +4180,14 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4102
4180
  }
4103
4181
  .rrd-band-data-sample tr td span[contenteditable='true']:hover {
4104
4182
  background-color: #f8f8ff;
4105
- border: 1px solid #5151a8;
4183
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4106
4184
  border-radius: 2px;
4107
4185
  outline: none;
4108
4186
  }
4109
4187
  .rrd-band-data-sample tr td span[contenteditable='true']:focus {
4110
4188
  background-color: #f8f8ff;
4111
4189
  color: var(--light-theme-dark-text-color);
4112
- border: 1px solid #5151a8;
4190
+ border: 1px solid var(--rrd-light-theme-primary-color-9);
4113
4191
  border-radius: 2px;
4114
4192
  outline: none;
4115
4193
  }
@@ -4128,10 +4206,17 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4128
4206
  cursor: ew-resize;
4129
4207
  }
4130
4208
 
4131
- .rrd-simple-data-header {
4209
+ /* .rrd-simple-data-header {
4132
4210
  background-color: #0088ff60;
4133
4211
  }
4134
-
4212
+ .rrd-simple-data-value:focus {
4213
+ border: 1px solid var(--rrd-light-theme-primary-color-7);
4214
+ border-radius: 2px;
4215
+ background-color: white;
4216
+ }
4217
+ .rrd-simple-data-row {
4218
+ height: 26px;
4219
+ } */
4135
4220
  .rrd-band-data-link-header {
4136
4221
  display: flex;
4137
4222
  align-items: center;
@@ -4139,8 +4224,9 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4139
4224
  padding: 0 4px;
4140
4225
  font-size: 12px;
4141
4226
  font-weight: 600;
4142
- background-color: var(--light-theme-primary-color-3);
4227
+ background-color: var(--rrd-light-theme-primary-color-3);
4143
4228
  border-bottom: 1px solid #BBBBBB;
4229
+ gap: 2px;
4144
4230
  }
4145
4231
  .rrd-band-data-link-header button {
4146
4232
  font-size: 12px;
@@ -4149,6 +4235,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4149
4235
  .rrd-band-data-link-header-title {
4150
4236
  padding-top: 2px;
4151
4237
  margin-left: 2px;
4238
+ white-space: nowrap;
4152
4239
  }
4153
4240
  .rrd-band-data-link-body {
4154
4241
  flex: 1;
@@ -4159,14 +4246,18 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4159
4246
  overflow: auto;
4160
4247
  scrollbar-width: thin;
4161
4248
  }
4162
- /* .band-data-link-button {
4163
- padding: 2px 6px;
4164
- color: var(--tool-item-bg-color-primary);
4165
- } */
4249
+ .rrd-band-data-link-http-body-control {
4250
+ border: 1px solid var(--rrd-light-theme-primary-color-7);
4251
+ border-radius: 3px;
4252
+ }
4253
+ .rrd-band-data-link-http-body-control:focus {
4254
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4255
+ outline: none;
4256
+ }
4166
4257
 
4167
4258
  /** script panel */
4168
4259
  .rrd-scriptpanel {
4169
- background-color: var(--script-editor-background);
4260
+ background-color: var(--rrd-script-editor-background);
4170
4261
  }
4171
4262
 
4172
4263
  .rrd-script-header-container {
@@ -4176,13 +4267,13 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4176
4267
  width: 100%;
4177
4268
  height: 24px;
4178
4269
  padding: 0 8px;
4179
- background: var(--light-theme-primary-color-5);
4270
+ background: var(--rrd-light-theme-primary-color-5);
4180
4271
  font-size: 12px;
4181
4272
  color: #3a3a3a;
4182
4273
  font-weight: bold;
4183
4274
  }
4184
4275
  .rrd-script-header-save-button {
4185
- background-color: var(--light-theme-primary-color-8);
4276
+ background-color: var(--rrd-light-theme-primary-color-8);
4186
4277
  border-radius: 3px;
4187
4278
  border: none;
4188
4279
  color: var(--light-theme-light-text-color);
@@ -4205,13 +4296,13 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4205
4296
 
4206
4297
  .rrd-script-header-save-button:hover,
4207
4298
  .rrd-script-header-save-button:focus {
4208
- background-color: var(--light-theme-primary-color-10);
4299
+ background-color: var(--rrd-light-theme-primary-color-10);
4209
4300
  }
4210
4301
 
4211
4302
  .rrd-script-header-save-button:active {
4212
- background-color: var(--light-theme-primary-color-5);
4303
+ background-color: var(--rrd-light-theme-primary-color-5);
4213
4304
  box-shadow: none;
4214
- color: var(--light-theme-primary-color-10);
4305
+ color: var(--rrd-light-theme-primary-color-10);
4215
4306
  }
4216
4307
 
4217
4308
  .rrd-script-editor {
@@ -4221,22 +4312,124 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4221
4312
  }
4222
4313
  /** 스크립트 패널 내부 */
4223
4314
  .ace-chrome {
4224
- background-color: var(--light-theme-primary-color-1);
4315
+ background-color: var(--rrd-light-theme-primary-color-1);
4225
4316
  }
4226
4317
  .ace-chrome .ace_gutter,
4227
4318
  .ace_layer.ace_gutter-layer.ace_folding-enabled {
4228
- background-color: var(--light-theme-primary-color-5);
4319
+ background-color: var(--rrd-light-theme-primary-color-5);
4229
4320
  }
4230
4321
  .ace-chrome .ace_gutter-active-line,
4231
4322
  .ace_layer.ace_gutter-layer.ace_folding-enabled > .ace_gutter-cell.ace_gutter-active-line {
4232
- background-color: var(--light-theme-primary-color-7);
4323
+ background-color: var(--rrd-light-theme-primary-color-7);
4233
4324
  }
4234
4325
  .ace-chrome .ace_marker-layer .ace_active-line,
4235
4326
  .ace_content > .ace_layer.ace_marker-layer > .ace_active-line {
4236
- background-color: var(--light-theme-primary-color-4);
4327
+ background-color: var(--rrd-light-theme-primary-color-4);
4237
4328
  }
4238
4329
  .rrd-script-editor.ace_editor.ace_hidpi.ace-chrome {
4239
- background-color: var(--light-theme-primary-color-1);
4330
+ background-color: var(--rrd-light-theme-primary-color-1);
4331
+ }
4332
+
4333
+ /** language panel */
4334
+ .rrd-language-list-header {
4335
+ padding: 2px 4px;
4336
+ border-bottom: 1px solid #bfbfd2;
4337
+ font-size: 0.85em;
4338
+ color: black;
4339
+ background-color: var(--rrd-light-theme-primary-color-5);
4340
+ }
4341
+ .rrd-language-action-button {
4342
+ padding: 3px 6px 2px 6px;
4343
+ font-size: 12px;
4344
+ background-color: var(--rrd-light-theme-primary-color-8);
4345
+ color: var(--light-theme-light-text-color);
4346
+ border: none;
4347
+ border-radius: 3px;
4348
+ cursor: pointer;
4349
+ }
4350
+ .rrd-language-action-button:hover {
4351
+ background-color: var(--rrd-light-theme-primary-color-9);
4352
+ }
4353
+ .rrd-language-table-view {
4354
+ background-color: var(--rrd-light-theme-primary-color-2);
4355
+ color: #111;
4356
+ }
4357
+ .rrd-language-table-header-label {
4358
+ display: flex;
4359
+ align-items: center;
4360
+ gap: 10px;
4361
+ height: 28px;
4362
+ padding: 2px 4px;
4363
+ background-color: var(--rrd-light-theme-primary-color-5);
4364
+ }
4365
+ .rrd-language-field-table-header {
4366
+ height: 26px;
4367
+ padding: 0px 4px;
4368
+ background-color: var(--rrd-light-theme-primary-color-3);
4369
+ font-size: 12px;
4370
+ font-weight: 600;
4371
+ border-bottom: 1px solid #BBBBBB;
4372
+ }
4373
+ .rrd-language-field-action-button {
4374
+ margin-right: 4px;
4375
+ padding: 1px 6px;
4376
+ border: none;
4377
+ font-weight: normal;
4378
+ border-radius: 2px;
4379
+ color: var(--light-theme-light-text-color);
4380
+ background-color: var(--rrd-light-theme-primary-color-7);
4381
+ cursor: pointer;
4382
+ }
4383
+ .rrd-language-field-table {
4384
+ border-spacing: 0 !important;
4385
+ border-collapse: separate !important;
4386
+ margin: 0;
4387
+ padding: 0;
4388
+ box-sizing: border-box;
4389
+ color: #111;
4390
+ text-align: left;
4391
+ font-size: 12px;
4392
+ background-color: var(--rrd-light-theme-primary-color-1);
4393
+ }
4394
+ .rrd-language-field-table tr td:first-child {
4395
+ text-align: center;
4396
+ }
4397
+ .rrd-language-field-table tr:nth-child(2n) {
4398
+ background-color: var(--rrd-light-theme-primary-color-2);
4399
+ }
4400
+ .rrd-language-field-table td, th {
4401
+ border-right: 1px solid #C0C0C0;
4402
+ border-bottom: 1px solid #C0C0C0;
4403
+ padding: 0 4px;
4404
+ height: 24px;
4405
+ }
4406
+ .rrd-language-field-table th {
4407
+ text-align: center;
4408
+ background-color: var(--rrd-light-theme-primary-color-3);
4409
+ }
4410
+ .rrd-language-field-table tr {
4411
+ height: 24px;
4412
+ }
4413
+ .rrd-language-field-table tr td span {
4414
+ display: inline-block;
4415
+ width: 100%;
4416
+ border: 1px solid transparent;
4417
+ padding: 2px 6px;
4418
+ word-break: break-word;
4419
+ text-align: left;
4420
+ }
4421
+ .rrd-language-field-table tr td span:hover {
4422
+ background-color: #f8f8ff;
4423
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4424
+ border-radius: 2px;
4425
+ outline: none;
4426
+ }
4427
+ .rrd-language-field-table tr td span:focus {
4428
+ background-color: rgb(255, 255, 255);
4429
+ color: rgb(34, 34, 34);
4430
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4431
+ border-radius: 2px;
4432
+ outline: none;
4240
4433
  }
4241
4434
 
4242
4435
  /* 다이얼로그 */
@@ -4247,7 +4440,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4247
4440
  flex-direction: column;
4248
4441
  min-width: 300px;
4249
4442
  min-height: 200px;
4250
- background-color: var(--dialog-background);
4443
+ background-color: var(--rrd-dialog-background);
4251
4444
  border-radius: 5px;
4252
4445
  box-shadow: rgba(0, 0, 0, 0.18) 0px 5px 20px, rgba(0, 0, 0, 0.23) 0px 5px 6px;
4253
4446
  color: #3a3a3a;
@@ -4284,7 +4477,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4284
4477
  min-height: 16px;
4285
4478
  height: 36px;
4286
4479
  border-radius: 5px 5px 0 0;
4287
- background-color: var(--light-theme-primary-color-9);
4480
+ background-color: var(--rrd-light-theme-primary-color-9);
4288
4481
  color: #fff;
4289
4482
  cursor: move;
4290
4483
  }
@@ -4346,7 +4539,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4346
4539
  color: #828282;
4347
4540
  }
4348
4541
  .rrd-dialog-buttons > .dialog-submit-button {
4349
- color: var(--light-theme-primary-color-10);
4542
+ color: var(--rrd-light-theme-primary-color-10);
4350
4543
  }
4351
4544
  .rrd-dialog-buttons > .dialog-confirm-button {
4352
4545
  color: #e03131;
@@ -4410,32 +4603,34 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4410
4603
  .rrd-data-dialog-body button {
4411
4604
  height: 24px;
4412
4605
  background: none;
4413
- border: 1px solid var(--light-theme-primary-color-9);
4606
+ border: 1px solid var(--rrd-light-theme-primary-color-9);
4414
4607
  border-radius: 4px;
4415
- color: var(--light-theme-primary-color-10);
4608
+ color: var(--rrd-light-theme-primary-color-10);
4416
4609
  font-size: 14px;
4417
4610
  margin-left: 4px;
4418
4611
  cursor: pointer;
4419
4612
  }
4420
4613
  .rrd-data-dialog-body button:hover {
4421
- background: var(--light-theme-primary-color-9);
4614
+ background: var(--rrd-light-theme-primary-color-9);
4422
4615
  color: white;
4423
4616
  }
4424
4617
  .rrd-data-dialog-body input {
4425
- border: 1px solid var(--light-theme-primary-color-8);
4618
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4426
4619
  border-radius: 4px;
4427
4620
  }
4428
4621
  .rrd-data-dialog-body select {
4429
4622
  height: 24px;
4430
- border: 1px solid var(--light-theme-primary-color-8);
4623
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4431
4624
  border-radius: 4px;
4432
4625
  background: transparent;
4433
4626
  }
4434
4627
  .rrd-data-dialog-body input:focus {
4435
- outline: none
4628
+ outline: none;
4629
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4630
+ border-radius: 4px;
4436
4631
  }
4437
4632
  .rrd-data-dialog-body input.invalidate-field {
4438
- border: 1px solid var(--dialog-invalidate-color);
4633
+ border: 1px solid var(--rrd-dialog-invalidate-color);
4439
4634
  border-radius: 2px;
4440
4635
  }
4441
4636
  .rrd-data-dialog-fields {
@@ -4468,7 +4663,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4468
4663
  .rrd-validate-message {
4469
4664
  padding-top: 2px;
4470
4665
  font-size: 12px;
4471
- color: var(--dialog-invalidate-color);
4666
+ color: var(--rrd-dialog-invalidate-color);
4472
4667
  opacity: 0;
4473
4668
  transform: rotateX(-90deg);
4474
4669
  transform-origin: top center;
@@ -4648,8 +4843,8 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4648
4843
  cursor: pointer;
4649
4844
  }
4650
4845
  .rrd-open-dialog-body li[data-select] {
4651
- background-color: var(--light-theme-primary-color-3);
4652
- color: var(--light-theme-primary-color-9);
4846
+ background-color: var(--rrd-light-theme-primary-color-3);
4847
+ color: var(--rrd-light-theme-primary-color-9);
4653
4848
  text-decoration: underline;
4654
4849
  }
4655
4850
  .rrd-open-dialog-list-container ul {
@@ -4663,7 +4858,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4663
4858
  flex: 1 1 0;
4664
4859
  }
4665
4860
  .rrd-open-dialog-preview-container {
4666
- box-shadow: var(--light-theme-primary-color-9) 0px 0px 0px 1px;
4861
+ box-shadow: var(--rrd-light-theme-primary-color-9) 0px 0px 0px 1px;
4667
4862
  border-radius: 4px;
4668
4863
  }
4669
4864
  .rrd-open-dialog-preview-container .rr-print-page {
@@ -4741,13 +4936,13 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4741
4936
  .rrd-new-report-dialog-template-item > img {
4742
4937
  padding: 8px;
4743
4938
  object-fit: contain;
4744
- box-shadow: var(--light-theme-primary-color-7) 0px 1px 2px 0px;
4939
+ box-shadow: var(--rrd-light-theme-primary-color-7) 0px 1px 2px 0px;
4745
4940
  border-radius: 4px;
4746
4941
  }
4747
4942
 
4748
4943
  .rrd-new-report-dialog-template-item[data-selected] > img {
4749
4944
  box-sizing: border-box;
4750
- border: 2px solid var(--light-theme-primary-color-7);
4945
+ border: 2px solid var(--rrd-light-theme-primary-color-7);
4751
4946
  border-radius: 4px;
4752
4947
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
4753
4948
  }
@@ -4765,6 +4960,16 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4765
4960
  }
4766
4961
 
4767
4962
 
4963
+ /* Language Dialog */
4964
+ .rrd-language-dialog {
4965
+ min-height: 80px;
4966
+ }
4967
+
4968
+ .rrd-dialog-body.rrd-language-dialog-body {
4969
+ min-height: 60px;
4970
+ }
4971
+
4972
+
4768
4973
  /** message bar */
4769
4974
  .rrd-messagebar {
4770
4975
  padding: 0 8px;
@@ -4790,7 +4995,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4790
4995
  /** options */
4791
4996
  .rrd-options-container {
4792
4997
  padding: 20px;
4793
- background-color: var(--light-theme-primary-color-1);
4998
+ background-color: var(--rrd-light-theme-primary-color-1);
4794
4999
  }
4795
5000
  .rrd-options-header-title {
4796
5001
  font-size: 20px;
@@ -4800,7 +5005,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4800
5005
  /* popup selector */
4801
5006
  .rrd-popup-selector {
4802
5007
  min-width: 65px;
4803
- background: var(--tool-item-select-background-color);
5008
+ background: var(--rrd-tool-item-select-background-color);
4804
5009
  box-shadow: 0 0 4px 1px #ddd;
4805
5010
  border-radius: 3px;
4806
5011
  border: 1px solid var(--ligt-theme-primary-color-4);
@@ -4819,30 +5024,30 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4819
5024
  border-radius: 2px;
4820
5025
  }
4821
5026
  .rrd-select-item-container:hover {
4822
- background-color: var(--light-theme-primary-color-5);
5027
+ background-color: var(--rrd-light-theme-primary-color-5);
4823
5028
  }
4824
5029
  .rrd-popup-selector button[data-selected] {
4825
- background-color: var(--light-theme-primary-color-4);
5030
+ background-color: var(--rrd-light-theme-primary-color-4);
4826
5031
  }
4827
5032
 
4828
5033
  /* 편집용 툴 아이템 - 컨트롤 */
4829
5034
  .rrd-tool-input-control,
4830
5035
  .rrd-tool-number-input-control,
4831
5036
  .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);
5037
+ background-color: var(--rrd-tool-item-select-background-color);
5038
+ border: 1px solid var(--rrd-light-theme-primary-color-7);
5039
+ border-radius: var(--rrd-tool-item-border-radius);
4835
5040
  height: 24px;
4836
5041
  }
4837
5042
  .rrd-tool-input-control:not([data-align="center"]) {
4838
- padding: 0 var(--tool-item-edit-padding-horz);
5043
+ padding: 0 var(--rrd-tool-item-edit-padding-horz);
4839
5044
  }
4840
5045
  .rrd-tool-number-input-control {
4841
5046
  width: 32px;
4842
5047
  }
4843
5048
  .rrd-tool-input-control:focus,
4844
5049
  .rrd-tool-number-input-control:focus {
4845
- outline: 1px solid var(--light-theme-primary-color-9);
5050
+ outline: 1px solid var(--rrd-light-theme-primary-color-9);
4846
5051
  }
4847
5052
  .rrd-tool-number-input-control::-webkit-outer-spin-button,
4848
5053
  .rrd-tool-number-input-control::-webkit-inner-spin-button {
@@ -4852,6 +5057,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4852
5057
  /* 편집용 툴 아이템 - 레이블 */
4853
5058
  .rrd-tool-input-label,
4854
5059
  .rrd-tool-number-input-label,
5060
+ .rrd-tool-check-input-label,
4855
5061
  .rrd-tool-select-label {
4856
5062
  display: inline-block;
4857
5063
  margin: 0 0 2px 3px;
@@ -4860,13 +5066,13 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4860
5066
 
4861
5067
  /* 선택 툴 아이템 */
4862
5068
  .rrd-tool-select-control {
4863
- padding-left: var(--tool-item-edit-padding-horz);
5069
+ padding-left: var(--rrd-tool-item-edit-padding-horz);
4864
5070
  }
4865
5071
  .rrd-tool-select-control:hover {
4866
5072
  cursor: pointer;;
4867
5073
  }
4868
5074
  .rrd-tool-select-control[data-focused] {
4869
- border: 1px solid var(--light-theme-primary-color-8);
5075
+ border: 1px solid var(--rrd-light-theme-primary-color-8);
4870
5076
  }
4871
5077
  .rrd-tool-select-control[data-disabled] {
4872
5078
  color: lightgray;
@@ -4875,11 +5081,37 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4875
5081
  pointer-events: none;
4876
5082
  }
4877
5083
 
5084
+ /* 체크 툴 아이템 */
5085
+ /* TODO: JS로 인라인 코드로 처리 필요 */
5086
+ .rrd-tool-check-input-control {
5087
+ cursor: pointer;
5088
+ }
5089
+ .rrd-tool-check-input-control::before {
5090
+ width: 20px;
5091
+ height: 20px;
5092
+ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgNUMzIDQuNDY5NTcgMy4yMTA3MSAzLjk2MDg2IDMuNTg1NzkgMy41ODU3OUMzLjk2MDg2IDMuMjEwNzEgNC40Njk1NyAzIDUgM0gxOUMxOS41MzA0IDMgMjAuMDM5MSAzLjIxMDcxIDIwLjQxNDIgMy41ODU3OUMyMC43ODkzIDMuOTYwODYgMjEgNC40Njk1NyAyMSA1VjE5QzIxIDE5LjUzMDQgMjAuNzg5MyAyMC4wMzkxIDIwLjQxNDIgMjAuNDE0MkMyMC4wMzkxIDIwLjc4OTMgMTkuNTMwNCAyMSAxOSAyMUg1QzQuNDY5NTcgMjEgMy45NjA4NiAyMC43ODkzIDMuNTg1NzkgMjAuNDE0MkMzLjIxMDcxIDIwLjAzOTEgMyAxOS41MzA0IDMgMTlWNVoiIHN0cm9rZT0iIzZGNkZBNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
5093
+ display: inline-block;
5094
+ content: '';
5095
+ mask-size: cover;
5096
+ mask-position: center;
5097
+ background-color: var(--light-theme-icon-color);
5098
+ }
5099
+
5100
+ .rrd-tool-check-input-control:checked::before {
5101
+ width: 20px;
5102
+ height: 20px;
5103
+ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgMTJMMTEgMTRMMTUgMTBNMyA1QzMgNC40Njk1NyAzLjIxMDcxIDMuOTYwODYgMy41ODU3OSAzLjU4NTc5QzMuOTYwODYgMy4yMTA3MSA0LjQ2OTU3IDMgNSAzSDE5QzE5LjUzMDQgMyAyMC4wMzkxIDMuMjEwNzEgMjAuNDE0MiAzLjU4NTc5QzIwLjc4OTMgMy45NjA4NiAyMSA0LjQ2OTU3IDIxIDVWMTlDMjEgMTkuNTMwNCAyMC43ODkzIDIwLjAzOTEgMjAuNDE0MiAyMC40MTQyQzIwLjAzOTEgMjAuNzg5MyAxOS41MzA0IDIxIDE5IDIxSDVDNC40Njk1NyAyMSAzLjk2MDg2IDIwLjc4OTMgMy41ODU3OSAyMC40MTQyQzMuMjEwNzEgMjAuMDM5MSAzIDE5LjUzMDQgMyAxOVY1WiIgc3Ryb2tlPSIjNkY2RkE0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
5104
+ display: inline-block;
5105
+ content: '';
5106
+ mask-size: cover;
5107
+ mask-position: center;
5108
+ background-color: var(--light-theme-icon-color);
5109
+ }
4878
5110
 
4879
5111
  /** feedbacks */
4880
5112
  .rrd-feedback-drop-target {
4881
5113
  position: absolute;
4882
- background-color: var(--light-theme-primary-color-9);
5114
+ background-color: var(--rrd-light-theme-primary-color-9);
4883
5115
  opacity: 0.2;
4884
5116
  }
4885
5117
  .rrd-feedback-drop-edge {
@@ -4905,7 +5137,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4905
5137
  .rrd-asset-drag-image {
4906
5138
  background-color: var(--drag-background);
4907
5139
  color: var(--light-theme-light-text-color);
4908
- /* background-color: var(--light-theme-primary-color-8); */
5140
+ /* background-color: var(--rrd-light-theme-primary-color-8); */
4909
5141
  padding: 2px 8px;
4910
5142
  border-radius: 4px;
4911
5143
  font-size: 13px;
@@ -4934,7 +5166,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4934
5166
 
4935
5167
  .rr-report-container {
4936
5168
  border: none;
4937
- background: var(--light-theme-primary-color-4);
5169
+ background: var(--rrd-light-theme-primary-color-4);
4938
5170
  }
4939
5171
 
4940
5172
  .rr-report-view {
@@ -4944,14 +5176,16 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4944
5176
  /* inspector */
4945
5177
  /* 인스펙터 최상위 */
4946
5178
  .rp-root {
4947
- background: var(--light-theme-primary-color-1);
5179
+ background: var(--rrd-light-theme-primary-color-1);
4948
5180
  color: var(--light-theme-dark-text-color);
4949
- z-index: 200;
5181
+ }
5182
+ .rp-inspector {
5183
+ z-index: 220;
4950
5184
  }
4951
5185
  .rp-root input {
4952
5186
  border: none;
4953
5187
  color: var(--light-theme-dark-text-color);
4954
- background-color: var(--light-theme-primary-color-4);
5188
+ background-color: var(--rrd-light-theme-primary-color-4);
4955
5189
  }
4956
5190
  .rp-root input::placeholder,
4957
5191
  .rr-property-select[data-empty="true"] {
@@ -4960,14 +5194,14 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4960
5194
  }
4961
5195
  .rp-root select {
4962
5196
  border: none;
4963
- background-color: var(--light-theme-primary-color-4);
5197
+ background-color: var(--rrd-light-theme-primary-color-4);
4964
5198
  color: var(--light-theme-dark-text-color);
4965
5199
  }
4966
5200
  .rr-property-body {
4967
- background-color: var(--light-theme-primary-color-1);
5201
+ background-color: var(--rrd-light-theme-primary-color-1);
4968
5202
  }
4969
5203
  .rr-property-category {
4970
- background-color: var(--light-theme-primary-color-3);
5204
+ background-color: var(--rrd-light-theme-primary-color-3);
4971
5205
  border-top: none;
4972
5206
  border-bottom: none;
4973
5207
  height: 18px;
@@ -4978,31 +5212,31 @@ input[data-rrproperty]::-webkit-inner-spin-button {
4978
5212
  color: var(--light-theme-dark-text-color);
4979
5213
  }
4980
5214
  .rp-category-text {
4981
- color: var(--light-theme-primary-color-9);
5215
+ color: var(--rrd-light-theme-primary-color-9);
4982
5216
  font-weight: bold;
4983
5217
  }
4984
5218
  .rr-property-row {
4985
5219
  height: 28px;
4986
5220
  }
4987
5221
  .rr-property-row-focus {
4988
- background: var(--light-theme-primary-color-3);
5222
+ background: var(--rrd-light-theme-primary-color-3);
4989
5223
  }
4990
5224
  .rr-property-row:hover {
4991
- background: var(--light-theme-primary-color-2);
5225
+ background: var(--rrd-light-theme-primary-color-2);
4992
5226
  }
4993
5227
  .rr-property-row-label {
4994
5228
  color: var(--light-theme-dark-text-color);
4995
5229
  }
4996
5230
  .rr-property-edit-button {
4997
- background: var(--light-theme-primary-color-6);
5231
+ background: var(--rrd-light-theme-primary-color-6);
4998
5232
  border: 1px solid #b6b6b6;
4999
5233
  color: #6e607a;
5000
5234
  }
5001
5235
  .rr-property-row-content {
5002
- min-width: 100px;
5236
+ min-width: 20px;
5003
5237
  }
5004
5238
  .rr-property-row-content input {
5005
- min-width: 50px;
5239
+ min-width: 20px;
5006
5240
  }
5007
5241
  .rr-property-edit-button {
5008
5242
  min-width: 10px;
@@ -5021,31 +5255,30 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5021
5255
  padding: 0 12px;
5022
5256
  letter-spacing: .05rem;
5023
5257
  font-weight: 600;
5024
- color: var(--light-theme-primary-color-9);
5025
- background-color: var(--light-theme-primary-color-4);
5258
+ color: var(--rrd-light-theme-primary-color-9);
5259
+ background-color: var(--rrd-light-theme-primary-color-4);
5026
5260
  box-shadow: inset 0 -1px 0 0 #e3e3e3;
5027
5261
  }
5028
5262
  .rrd-outline-container .rrd-panel-content {
5029
- background-color: var(--light-theme-primary-color-2);
5263
+ background-color: var(--rrd-light-theme-primary-color-2);
5030
5264
  }
5031
5265
  .rr-outline-root {
5032
- font-family: var(--font-family);
5266
+ font-family: var(--rrd-font-family);
5033
5267
  }
5034
-
5035
5268
  .rr-outline-body {
5036
- background: var(--light-theme-primary-color-2);
5269
+ background: var(--rrd-light-theme-primary-color-2);
5037
5270
  }
5038
5271
  .rr-outline-row {
5039
5272
  color: var(--light-theme-dark-text-color);
5040
5273
  }
5041
5274
  .rr-outline-row:hover {
5042
- background-color: var(--light-theme-primary-color-5);
5275
+ background-color: var(--rrd-light-theme-primary-color-5);
5043
5276
  }
5044
5277
  .rr-outline-row-focus {
5045
- background-color: var(--light-theme-primary-color-4);
5278
+ background-color: var(--rrd-light-theme-primary-color-4);
5046
5279
  }
5047
5280
  .rr-outline-row-focus:hover {
5048
- background-color: var(--light-theme-primary-color-4);
5281
+ background-color: var(--rrd-light-theme-primary-color-4);
5049
5282
  }
5050
5283
  .rr-outline-expander,
5051
5284
  .rr-tree-expander ,
@@ -5060,13 +5293,13 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5060
5293
  }
5061
5294
  .rr-outline-icon svg path,
5062
5295
  .rr-tree-icon svg path {
5063
- stroke: var(--light-theme-primary-color-10);
5296
+ stroke: var(--rrd-light-theme-primary-color-10);
5064
5297
  }
5065
5298
  .rr-outline-icon svg g path,
5066
5299
  .rr-outline-icon svg g rect,
5067
5300
  .rr-tree-icon svg g path,
5068
5301
  .rr-tree-icon svg g rect {
5069
- fill: var(--light-theme-primary-color-10);
5302
+ fill: var(--rrd-light-theme-primary-color-10);
5070
5303
  }
5071
5304
 
5072
5305
  /* tree */
@@ -5082,7 +5315,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5082
5315
  color: var(--light-theme-dark-text-color);
5083
5316
  }
5084
5317
  .rr-tree-row:hover {
5085
- background: var(--light-theme-primary-color-3);
5318
+ background: var(--rrd-light-theme-primary-color-3);
5086
5319
  width: 100%;
5087
5320
  }
5088
5321
 
@@ -5091,11 +5324,11 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5091
5324
  }
5092
5325
 
5093
5326
  .rr-tree-row-focus {
5094
- background: var(--light-theme-primary-color-4);
5327
+ background: var(--rrd-light-theme-primary-color-4);
5095
5328
  }
5096
5329
  .rr-tree-row-select,
5097
5330
  .rr-tree-row-select:hover {
5098
- background: var(--light-theme-primary-color-7);
5331
+ background: var(--rrd-light-theme-primary-color-7);
5099
5332
  }
5100
5333
  .rr-tree-row[data-type=report-simple-data] > .rr-tree-icon{
5101
5334
  padding: 1px 5px 0 0;
@@ -5145,7 +5378,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5145
5378
  }
5146
5379
 
5147
5380
  .rr-band-designer span[data-title='1'] {
5148
- background: var(--light-theme-primary-color-8);
5381
+ background: var(--rrd-light-theme-primary-color-8);
5149
5382
  color: var(--light-theme-light-text-color);
5150
5383
  }
5151
5384
 
@@ -5156,7 +5389,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5156
5389
  }
5157
5390
 
5158
5391
  .rr-band-designer button:hover {
5159
- color: var(--light-theme-primary-color-8);
5392
+ color: var(--rrd-light-theme-primary-color-8);
5160
5393
  }
5161
5394
 
5162
5395
  .rr-band-designer button:disabled {
@@ -5164,11 +5397,11 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5164
5397
  }
5165
5398
 
5166
5399
  .rr-band-designer button:disabled:hover {
5167
- color: var(--light-theme-primary-color-9);
5400
+ color: var(--rrd-light-theme-primary-color-9);
5168
5401
  }
5169
5402
 
5170
5403
  .rr-band-designer-arrow :hover {
5171
- background: var(--light-theme-primary-color-8);
5404
+ background: var(--rrd-light-theme-primary-color-8);
5172
5405
  }
5173
5406
 
5174
5407
  .rr-band-designer > div {
@@ -5198,10 +5431,10 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5198
5431
  background: #8a8a91;
5199
5432
  }
5200
5433
  .rr-edit-marquee-item[data-select] {
5201
- background: var(--marquee-bg-color)
5434
+ background: var(--rrd-marquee-bg-color)
5202
5435
  }
5203
5436
  .rr-edit-marquee-item[data-cellselect] {
5204
- background: var(--marquee-cellselect-bg-color)
5437
+ background: var(--rrd-marquee-cellselect-bg-color)
5205
5438
  }
5206
5439
  .rr-edit-marquee-item[data-target] {
5207
5440
  /* display: none; */
@@ -5218,9 +5451,9 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5218
5451
  background: var(--light-theme-guard-item-odd-color);
5219
5452
  }
5220
5453
  .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);
5454
+ border-top: 1px solid var(--rrd-light-theme-primary-color-10);
5455
+ border-bottom: 1px solid var(--rrd-light-theme-primary-color-10);
5456
+ background-color: var(--rrd-light-theme-primary-color-6);
5224
5457
  }
5225
5458
 
5226
5459
  /* ruler */
@@ -5234,15 +5467,15 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5234
5467
  border: none;
5235
5468
  }
5236
5469
  .rr-ruler-indicator {
5237
- background-color: var(--light-theme-primary-color-4);
5470
+ background-color: var(--rrd-light-theme-primary-color-4);
5238
5471
  }
5239
5472
  .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);
5473
+ border-top: 1px solid var(--rrd-light-theme-primary-color-8);
5474
+ border-bottom: 1px solid var(--rrd-light-theme-primary-color-8);
5242
5475
  }
5243
5476
  .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);
5477
+ border-left: 1px solid var(--rrd-light-theme-primary-color-8);
5478
+ border-right: 1px solid var(--rrd-light-theme-primary-color-8);
5246
5479
  }
5247
5480
 
5248
5481
  /* edit layer 영역 */
@@ -5257,21 +5490,21 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5257
5490
  display: none;
5258
5491
  }
5259
5492
  .rr-edit-marquee-item[data-focus] {
5260
- background-color: var(--marquee-focus-bg-color);
5493
+ background-color: var(--rrd-marquee-focus-bg-color);
5261
5494
  }
5262
5495
  .rr-focus-handle {
5263
5496
  background: white;
5264
- border: 2px solid var(--focus-bg-color);
5497
+ border: 2px solid var(--rrd-focus-bg-color);
5265
5498
  border-radius: 50%;
5266
5499
  }
5267
5500
  .rr-focus-view {
5268
- border: 2px solid var(--focus-bg-color);
5501
+ border: 2px solid var(--rrd-focus-bg-color);
5269
5502
  }
5270
5503
  .rr-select-view {
5271
5504
  border: 2px solid rgb(0 133 255 / 52%);
5272
5505
  }
5273
5506
  .rr-table-select-view {
5274
- background-color: var(--focus-bg-color);
5507
+ background-color: var(--rrd-focus-bg-color);
5275
5508
  opacity: 0.08;
5276
5509
  }
5277
5510
  .rr-select-view[data-cell='1'] {
@@ -5314,7 +5547,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5314
5547
 
5315
5548
  /** colorPicker */
5316
5549
  .rr-color-picker {
5317
- background: var(--light-theme-primary-color-1);
5550
+ background: var(--rrd-light-theme-primary-color-1);
5318
5551
  border: none;
5319
5552
  border-radius: 3px;
5320
5553
  box-shadow: 1px 1px 20px 2px rgb(89 89 89 / 60%);
@@ -5338,13 +5571,6 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5338
5571
  }
5339
5572
 
5340
5573
  /** 아이템 마커 */
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
5574
  .rr-image[data-empty] span::before,
5349
5575
  .rr-svg[data-empty] span:before {
5350
5576
  position: absolute;
@@ -5373,26 +5599,26 @@ input[data-rrproperty]::-webkit-inner-spin-button {
5373
5599
  .rr-property-row-content input:focus,
5374
5600
  .rr-property-row-content select:focus {
5375
5601
  outline: none;
5376
- border: 2px solid var(--light-theme-primary-color-8);
5602
+ border: 2px solid var(--rrd-light-theme-primary-color-8);
5377
5603
  border-radius: 3px;
5378
5604
  }
5379
5605
  /** 체크박스 */
5380
- input[type="checkbox"] {
5606
+ input[type="checkbox"]:not(.rrd-simple-data-preview-check) {
5381
5607
  appearance: none;
5382
5608
  -webkit-appearance: none;
5383
5609
  -moz-appearance: none;
5384
5610
  background: none;
5385
5611
  }
5386
5612
  input[type="checkbox"]:focus {
5387
- outline: none;
5388
- border: none;
5389
- background-color: transparent;
5613
+ outline: none;
5614
+ border: none;
5615
+ background-color: transparent;
5390
5616
  }
5391
5617
  input[type="checkbox"]:checked {
5392
5618
  background: none;
5393
5619
  }
5394
5620
 
5395
- input[type="checkbox"]::before {
5621
+ .rr-property-row input[type="checkbox"]::before {
5396
5622
  width: 18px;
5397
5623
  height: 18px;
5398
5624
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgNUMzIDQuNDY5NTcgMy4yMTA3MSAzLjk2MDg2IDMuNTg1NzkgMy41ODU3OUMzLjk2MDg2IDMuMjEwNzEgNC40Njk1NyAzIDUgM0gxOUMxOS41MzA0IDMgMjAuMDM5MSAzLjIxMDcxIDIwLjQxNDIgMy41ODU3OUMyMC43ODkzIDMuOTYwODYgMjEgNC40Njk1NyAyMSA1VjE5QzIxIDE5LjUzMDQgMjAuNzg5MyAyMC4wMzkxIDIwLjQxNDIgMjAuNDE0MkMyMC4wMzkxIDIwLjc4OTMgMTkuNTMwNCAyMSAxOSAyMUg1QzQuNDY5NTcgMjEgMy45NjA4NiAyMC43ODkzIDMuNTg1NzkgMjAuNDE0MkMzLjIxMDcxIDIwLjAzOTEgMyAxOS41MzA0IDMgMTlWNVoiIHN0cm9rZT0iIzZGNkZBNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
@@ -5403,7 +5629,7 @@ input[type="checkbox"]::before {
5403
5629
  background-color: var(--light-theme-icon-color);
5404
5630
  }
5405
5631
 
5406
- input[type="checkbox"]:checked::before {
5632
+ .rr-property-row input[type="checkbox"]:checked::before {
5407
5633
  width: 18px;
5408
5634
  height: 18px;
5409
5635
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgMTJMMTEgMTRMMTUgMTBNMyA1QzMgNC40Njk1NyAzLjIxMDcxIDMuOTYwODYgMy41ODU3OSAzLjU4NTc5QzMuOTYwODYgMy4yMTA3MSA0LjQ2OTU3IDMgNSAzSDE5QzE5LjUzMDQgMyAyMC4wMzkxIDMuMjEwNzEgMjAuNDE0MiAzLjU4NTc5QzIwLjc4OTMgMy45NjA4NiAyMSA0LjQ2OTU3IDIxIDVWMTlDMjEgMTkuNTMwNCAyMC43ODkzIDIwLjAzOTEgMjAuNDE0MiAyMC40MTQyQzIwLjAzOTEgMjAuNzg5MyAxOS41MzA0IDIxIDE5IDIxSDVDNC40Njk1NyAyMSAzLjk2MDg2IDIwLjc4OTMgMy41ODU3OSAyMC40MTQyQzMuMjEwNzEgMjAuMDM5MSAzIDE5LjUzMDQgMyAxOVY1WiIgc3Ryb2tlPSIjNkY2RkE0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
@@ -5414,4 +5640,69 @@ input[type="checkbox"]:checked::before {
5414
5640
  background-color: var(--light-theme-icon-color);
5415
5641
  }
5416
5642
 
5643
+ /* Designer Base Components */
5417
5644
 
5645
+ /* Designer Table */
5646
+ .rrd-table,
5647
+ .rrd-table th,
5648
+ .rrd-table td {
5649
+ border: 1px solid #C0C0C0;
5650
+ border-collapse: collapse;
5651
+ }
5652
+
5653
+ .rrd-table {
5654
+ background-color: var(--rrd-light-theme-primary-color-1);
5655
+ }
5656
+
5657
+ .rrd-table tr:nth-child(even) {
5658
+ background-color: var(--rrd-light-theme-primary-color-2);
5659
+ }
5660
+ .rrd-table tr[data-selected=true] {
5661
+ background-color: var(--rrd-light-theme-primary-color-6);
5662
+ }
5663
+
5664
+ .rrd-table th,
5665
+ .rrd-table td {
5666
+ padding: 2px;
5667
+ font-size: 12px;
5668
+ }
5669
+
5670
+ /* 테이블 셀 스크롤바 비활성화 */
5671
+ .rrd-table th::-webkit-scrollbar,
5672
+ .rrd-table td::-webkit-scrollbar {
5673
+ display: none;
5674
+ }
5675
+ .rrd-table th, .rrd-table td {
5676
+ -ms-overflow-style: none; /* IE and Edge */
5677
+ scrollbar-width: none; /* Firefox */
5678
+ }
5679
+
5680
+ .rrd-table th {
5681
+ position: sticky;
5682
+ top: 0;
5683
+ background-color: var(--light-theme-primary-color-3);
5684
+ }
5685
+
5686
+ .rrd-table td > span:focus {
5687
+ outline: 1px solid var(--light-theme-primary-color-9);
5688
+ border-radius: 1px;
5689
+ }
5690
+
5691
+ .rrd-table input[type=checkbox]:hover {
5692
+ cursor: pointer;
5693
+ }
5694
+
5695
+ .rrd-table-rows-selector[data-status=partial-checked]::before {
5696
+ width: 18px;
5697
+ height: 18px;
5698
+ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgNUMzIDQuNDY5NTcgMy4yMTA3MSAzLjk2MDg2IDMuNTg1NzkgMy41ODU3OUMzLjk2MDg2IDMuMjEwNzEgNC40Njk1NyAzIDUgM0gxOUMxOS41MzA0IDMgMjAuMDM5MSAzLjIxMDcxIDIwLjQxNDIgMy41ODU3OUMyMC43ODkzIDMuOTYwODYgMjEgNC40Njk1NyAyMSA1VjE5QzIxIDE5LjUzMDQgMjAuNzg5MyAyMC4wMzkxIDIwLjQxNDIgMjAuNDE0MkMyMC4wMzkxIDIwLjc4OTMgMTkuNTMwNCAyMSAxOSAyMUg1QzQuNDY5NTcgMjEgMy45NjA4NiAyMC43ODkzIDMuNTg1NzkgMjAuNDE0MkMzLjIxMDcxIDIwLjAzOTEgMyAxOS41MzA0IDMgMTlWNVoiIHN0cm9rZT0iIzZGNkZBNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8bGluZSB4MT0iNyIgeTE9IjEyIiB4Mj0iMTciIHkyPSIxMiIgc3Ryb2tlPSIjNkY2RkE0IiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+');
5699
+ display: inline-block;
5700
+ content: '';
5701
+ mask-size: cover;
5702
+ mask-position: center;
5703
+ background-color: var(--light-theme-icon-color);
5704
+ }
5705
+
5706
+ .rrd-table-row-action:hover {
5707
+ cursor: pointer;
5708
+ }