jsoneditor + tailwind3.css
· 11 KiB · CSS
Raw
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 18px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}
}
@layer components {
.jsoneditor {
@apply overflow-hidden rounded-xl border border-gray-200 bg-gray-50 shadow-sm dark:border-gray-700 dark:bg-gray-800/50;
}
.jsoneditor div.jsoneditor-tree,
.ace-jsoneditor .ace_scroller {
@apply text-gray-700 dark:text-gray-300;
}
.ace-jsoneditor .ace_scrollbar {
@apply dark:invert;
}
.jsoneditor div.jsoneditor-tree {
@apply bg-white dark:bg-transparent;
}
.jsoneditor textarea.jsoneditor-text {
@apply bg-transparent p-3 leading-relaxed;
}
.jsoneditor .jsoneditor-text,
.jsoneditor .jsoneditor-tree {
@apply bg-transparent text-gray-700 dark:bg-transparent dark:text-gray-300;
}
.jsoneditor .jsoneditor-readonly {
@apply text-gray-400;
}
.jsoneditor .jsoneditor-field {
@apply border-none text-gray-700 hover:bg-gray-100 dark:bg-transparent dark:hover:bg-gray-700;
}
.jsoneditor .jsoneditor-value {
@apply border-none text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-700;
}
.jsoneditor .jsoneditor-value.jsoneditor-string,
.jsoneditor .ace_string {
@apply text-green-600 dark:text-green-500;
}
.jsoneditor .jsoneditor-value.jsoneditor-number,
.jsoneditor .ace_numeric {
@apply text-blue-600 dark:text-blue-500;
}
.jsoneditor .jsoneditor-value.jsoneditor-boolean,
.jsoneditor .ace_boolean {
@apply text-red-600 dark:text-red-500;
}
.ace-jsoneditor .ace_gutter {
@apply border-r border-gray-200 bg-gray-100 text-gray-500 dark:border-gray-700 dark:bg-gray-800;
}
.ace-jsoneditor .ace_gutter-active-line {
@apply bg-yellow-500/20 text-gray-900;
}
.ace-jsoneditor .ace_active-line {
@apply bg-yellow-500/20;
}
.ace-jsoneditor .ace_variable {
@apply text-gray-900;
}
.ace-jsoneditor .ace_indent-guide {
@apply border-r border-gray-200 bg-none dark:border-gray-700;
}
.ace-jsoneditor .ace_marker-layer .ace_selection {
@apply bg-gray-900/10 dark:bg-white/10;
}
.jsoneditor .jsoneditor-statusbar {
@apply border-t border-gray-200 bg-white px-2 text-xs leading-[26px] text-gray-500 dark:border-gray-700 dark:bg-gray-900;
}
.jsoneditor-menu a.jsoneditor-poweredBy {
@apply font-sans text-xs text-gray-400 opacity-100;
}
/* Search */
.jsoneditor .jsoneditor-search .jsoneditor-results {
@apply font-sans text-xs;
}
.jsoneditor .jsoneditor-search .jsoneditor-frame {
@apply rounded-lg border border-gray-200 dark:border-gray-700 dark:bg-gray-900;
}
.jsoneditor .jsoneditor-search .jsoneditor-frame input[type='text'] {
@apply h-[22px] border-none bg-transparent font-sans text-xs leading-[22px] text-gray-700 dark:text-gray-300;
}
.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-refresh {
@apply ml-1 bg-none;
}
.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-refresh:after {
@apply material-symbols-outlined text-[16px] leading-[24px] text-gray-500 content-['search'];
}
.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-next,
.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-previous {
@apply bg-none text-gray-500;
}
.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-next:after,
.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-previous:after {
@apply material-symbols-outlined text-[16px] !leading-[24px];
}
.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-next:after {
@apply content-['keyboard\_double\_arrow\_down'];
}
.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-previous:after {
@apply content-['keyboard\_double\_arrow\_up'];
}
/* Navigation bar */
.jsoneditor .jsoneditor-navigation-bar {
@apply border-b border-gray-200 bg-gray-50 px-2 text-xs leading-[26px] text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300;
}
.jsoneditor .jsoneditor-treepath .jsoneditor-treepath-seperator {
@apply text-[0px];
}
.jsoneditor .jsoneditor-treepath .jsoneditor-treepath-seperator:after {
@apply material-symbols-outlined align-[-4px] text-gray-400 content-['chevron\_right'];
}
/* Menu */
.jsoneditor-menu {
@apply border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800;
}
.jsoneditor .jsoneditor-menu > button {
@apply cursor-pointer rounded-lg border border-gray-200 bg-white bg-none text-gray-700 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300;
}
.jsoneditor .jsoneditor-menu > button:after {
@apply material-symbols-outlined text-[16px] leading-[24px];
}
.jsoneditor-menu > button.jsoneditor-format {
@apply after:content-['format\_align\_right'];
}
.jsoneditor-menu > button.jsoneditor-compact {
@apply after:content-['format\_align\_left'];
}
.jsoneditor-menu > button.jsoneditor-sort {
@apply after:content-['sort'];
}
.jsoneditor-menu > button.jsoneditor-transform {
@apply after:content-['transform'];
}
.jsoneditor-menu > button.jsoneditor-repair {
@apply after:content-['handyman'];
}
.jsoneditor-menu > button.jsoneditor-undo {
@apply after:content-['undo'];
}
.jsoneditor-menu > button.jsoneditor-redo {
@apply after:content-['redo'];
}
.jsoneditor-menu > button.jsoneditor-expand-all {
@apply after:content-['expand'];
}
.jsoneditor-menu > button.jsoneditor-collapse-all {
@apply after:content-['compress'];
}
.jsoneditor-menu > div.jsoneditor-modes > button {
@apply cursor-pointer border-none bg-transparent font-sans text-gray-700 hover:bg-none dark:text-gray-300;
}
/* Context menu */
.jsoneditor-contextmenu .jsoneditor-menu {
@apply overflow-clip rounded-lg border border-gray-200 bg-white py-1 shadow-sm dark:border-gray-700 dark:bg-gray-800;
}
.jsoneditor-contextmenu .jsoneditor-menu li {
@apply relative flex flex-col;
}
.jsoneditor-contextmenu .jsoneditor-menu button {
@apply mx-1 h-[30px] w-auto flex-grow rounded-lg bg-transparent px-3 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200;
}
.jsoneditor-contextmenu button .jsoneditor-icon {
@apply w-auto;
}
.jsoneditor-contextmenu button .jsoneditor-text {
@apply bg-transparent p-0 font-sans text-gray-700 dark:text-gray-300;
}
.jsoneditor-contextmenu .jsoneditor-selected {
@apply bg-transparent;
}
.jsoneditor-contextmenu .jsoneditor-selected > button > .jsoneditor-text {
@apply text-purple-600 dark:text-purple-500;
}
.jsoneditor-contextmenu .jsoneditor-menu li button .jsoneditor-expand {
@apply right-0.5 top-0.5 m-0 flex items-center justify-center p-0;
}
.jsoneditor .jsoneditor-selected,
.jsoneditor .jsoneditor-highlight {
@apply bg-gray-50 dark:bg-gray-800;
}
.jsoneditor div.jsoneditor-expand,
.jsoneditor .jsoneditor-button.jsoneditor-collapsed,
.jsoneditor .jsoneditor-button.jsoneditor-expanded,
.jsoneditor .jsoneditor-dragarea,
.jsoneditor .jsoneditor-contextmenu-button {
@apply bg-transparent bg-none outline-none;
}
.jsoneditor div.jsoneditor-expand:after,
.jsoneditor .jsoneditor-dragarea:after,
.jsoneditor .jsoneditor-contextmenu-button:after,
.jsoneditor .jsoneditor-button.jsoneditor-collapsed:after,
.jsoneditor .jsoneditor-button.jsoneditor-expanded:after {
@apply material-symbols-outlined text-[16px] leading-[24px] text-gray-500;
}
.jsoneditor div.jsoneditor-expand:after {
@apply content-['arrow\_drop\_down'];
}
.jsoneditor .jsoneditor-contextmenu-button:after {
@apply content-['toolbar'];
}
.jsoneditor .jsoneditor-dragarea:after {
@apply content-['drag\_indicator'];
}
.jsoneditor .jsoneditor-button.jsoneditor-collapsed:after {
@apply content-['keyboard\_arrow\_up'];
}
.jsoneditor .jsoneditor-button.jsoneditor-expanded:after {
@apply content-['keyboard\_arrow\_down'];
}
.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand {
@apply absolute right-0 top-0 border-none hover:bg-transparent;
}
.jsoneditor .jsoneditor-separator {
@apply border-gray-200 dark:border-gray-700;
}
/* Modal */
.jsoneditor-modal.pico-content {
@apply rounded-lg border-none font-sans text-gray-700 shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300;
}
.jsoneditor-modal p {
@apply leading-relaxed;
}
.jsoneditor-modal p a {
@apply text-purple-600 dark:text-purple-500;
}
.jsoneditor-modal .pico-modal-header {
@apply h-auto border-b border-gray-200 bg-transparent px-3 py-1.5 text-base font-semibold tracking-tight text-gray-900 dark:border-gray-700;
}
.jsoneditor-modal .pico-modal-contents {
@apply mt-3 block;
}
.jsoneditor-modal .jsoneditor-jmespath-label {
@apply text-sm text-gray-900;
}
.jsoneditor-modal.pico-content .pico-close {
@apply -mt-[13px] mr-2 text-[0px] text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200;
}
.jsoneditor-modal.pico-content .pico-close:after {
@apply material-symbols-outlined text-[16px] leading-[24px] content-['close'];
}
.jsoneditor-modal.pico-content select,
.jsoneditor-modal.pico-content #query,
.jsoneditor-modal.pico-content textarea {
@apply min-w-sm min-h-[38px] rounded-lg border border-gray-200 bg-white px-3 text-gray-700 shadow-sm outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300;
}
.jsoneditor-modal.pico-content #query,
.jsoneditor-modal.pico-content textarea {
@apply py-2;
}
.jsoneditor-modal.pico-content input[type='submit'] {
@apply relative flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border-gray-200 border-transparent bg-purple-600 px-3 py-2 font-medium text-white;
}
.jsoneditor-modal.pico-content .jsoneditor-modal-actions {
@apply m-0;
}
.jsoneditor-modal.pico-content form {
@apply w-[570px] font-sans text-gray-700 dark:text-gray-300;
}
.jsoneditor-modal.pico-content .jsoneditor-button-group {
@apply flex flex-row justify-end gap-2;
}
.jsoneditor-modal-input input[type='button'].jsoneditor-button-asc,
.jsoneditor-modal-input input[type='button'].jsoneditor-button-desc {
@apply h-[38px] cursor-pointer rounded-lg border border-gray-200 bg-gray-50 font-sans text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300;
}
.jsoneditor-modal
.jsoneditor-button-group.jsoneditor-button-group-value-asc
input.jsoneditor-button-asc,
.jsoneditor-modal
.jsoneditor-button-group.jsoneditor-button-group-value-desc
input.jsoneditor-button-desc {
@apply border-purple-600 bg-purple-600 text-white;
}
.jsoneditor-modal table td,
.jsoneditor-modal table th {
@apply font-sans text-gray-700 dark:text-gray-300;
}
}
| 1 | @tailwind base; |
| 2 | @tailwind components; |
| 3 | @tailwind utilities; |
| 4 | |
| 5 | @layer utilities { |
| 6 | .material-symbols-outlined { |
| 7 | font-family: 'Material Symbols Outlined'; |
| 8 | font-weight: normal; |
| 9 | font-style: normal; |
| 10 | font-size: 18px; |
| 11 | line-height: 1; |
| 12 | letter-spacing: normal; |
| 13 | text-transform: none; |
| 14 | display: inline-block; |
| 15 | white-space: nowrap; |
| 16 | word-wrap: normal; |
| 17 | direction: ltr; |
| 18 | -moz-font-feature-settings: 'liga'; |
| 19 | -moz-osx-font-smoothing: grayscale; |
| 20 | } |
| 21 | } |
| 22 | @layer components { |
| 23 | .jsoneditor { |
| 24 | @apply overflow-hidden rounded-xl border border-gray-200 bg-gray-50 shadow-sm dark:border-gray-700 dark:bg-gray-800/50; |
| 25 | } |
| 26 | |
| 27 | .jsoneditor div.jsoneditor-tree, |
| 28 | .ace-jsoneditor .ace_scroller { |
| 29 | @apply text-gray-700 dark:text-gray-300; |
| 30 | } |
| 31 | |
| 32 | .ace-jsoneditor .ace_scrollbar { |
| 33 | @apply dark:invert; |
| 34 | } |
| 35 | |
| 36 | .jsoneditor div.jsoneditor-tree { |
| 37 | @apply bg-white dark:bg-transparent; |
| 38 | } |
| 39 | |
| 40 | .jsoneditor textarea.jsoneditor-text { |
| 41 | @apply bg-transparent p-3 leading-relaxed; |
| 42 | } |
| 43 | |
| 44 | .jsoneditor .jsoneditor-text, |
| 45 | .jsoneditor .jsoneditor-tree { |
| 46 | @apply bg-transparent text-gray-700 dark:bg-transparent dark:text-gray-300; |
| 47 | } |
| 48 | |
| 49 | .jsoneditor .jsoneditor-readonly { |
| 50 | @apply text-gray-400; |
| 51 | } |
| 52 | |
| 53 | .jsoneditor .jsoneditor-field { |
| 54 | @apply border-none text-gray-700 hover:bg-gray-100 dark:bg-transparent dark:hover:bg-gray-700; |
| 55 | } |
| 56 | |
| 57 | .jsoneditor .jsoneditor-value { |
| 58 | @apply border-none text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-700; |
| 59 | } |
| 60 | |
| 61 | .jsoneditor .jsoneditor-value.jsoneditor-string, |
| 62 | .jsoneditor .ace_string { |
| 63 | @apply text-green-600 dark:text-green-500; |
| 64 | } |
| 65 | |
| 66 | .jsoneditor .jsoneditor-value.jsoneditor-number, |
| 67 | .jsoneditor .ace_numeric { |
| 68 | @apply text-blue-600 dark:text-blue-500; |
| 69 | } |
| 70 | |
| 71 | .jsoneditor .jsoneditor-value.jsoneditor-boolean, |
| 72 | .jsoneditor .ace_boolean { |
| 73 | @apply text-red-600 dark:text-red-500; |
| 74 | } |
| 75 | |
| 76 | .ace-jsoneditor .ace_gutter { |
| 77 | @apply border-r border-gray-200 bg-gray-100 text-gray-500 dark:border-gray-700 dark:bg-gray-800; |
| 78 | } |
| 79 | |
| 80 | .ace-jsoneditor .ace_gutter-active-line { |
| 81 | @apply bg-yellow-500/20 text-gray-900; |
| 82 | } |
| 83 | |
| 84 | .ace-jsoneditor .ace_active-line { |
| 85 | @apply bg-yellow-500/20; |
| 86 | } |
| 87 | |
| 88 | .ace-jsoneditor .ace_variable { |
| 89 | @apply text-gray-900; |
| 90 | } |
| 91 | |
| 92 | .ace-jsoneditor .ace_indent-guide { |
| 93 | @apply border-r border-gray-200 bg-none dark:border-gray-700; |
| 94 | } |
| 95 | |
| 96 | .ace-jsoneditor .ace_marker-layer .ace_selection { |
| 97 | @apply bg-gray-900/10 dark:bg-white/10; |
| 98 | } |
| 99 | |
| 100 | .jsoneditor .jsoneditor-statusbar { |
| 101 | @apply border-t border-gray-200 bg-white px-2 text-xs leading-[26px] text-gray-500 dark:border-gray-700 dark:bg-gray-900; |
| 102 | } |
| 103 | |
| 104 | .jsoneditor-menu a.jsoneditor-poweredBy { |
| 105 | @apply font-sans text-xs text-gray-400 opacity-100; |
| 106 | } |
| 107 | |
| 108 | /* Search */ |
| 109 | .jsoneditor .jsoneditor-search .jsoneditor-results { |
| 110 | @apply font-sans text-xs; |
| 111 | } |
| 112 | |
| 113 | .jsoneditor .jsoneditor-search .jsoneditor-frame { |
| 114 | @apply rounded-lg border border-gray-200 dark:border-gray-700 dark:bg-gray-900; |
| 115 | } |
| 116 | |
| 117 | .jsoneditor .jsoneditor-search .jsoneditor-frame input[type='text'] { |
| 118 | @apply h-[22px] border-none bg-transparent font-sans text-xs leading-[22px] text-gray-700 dark:text-gray-300; |
| 119 | } |
| 120 | |
| 121 | .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-refresh { |
| 122 | @apply ml-1 bg-none; |
| 123 | } |
| 124 | |
| 125 | .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-refresh:after { |
| 126 | @apply material-symbols-outlined text-[16px] leading-[24px] text-gray-500 content-['search']; |
| 127 | } |
| 128 | |
| 129 | .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-next, |
| 130 | .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-previous { |
| 131 | @apply bg-none text-gray-500; |
| 132 | } |
| 133 | |
| 134 | .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-next:after, |
| 135 | .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-previous:after { |
| 136 | @apply material-symbols-outlined text-[16px] !leading-[24px]; |
| 137 | } |
| 138 | |
| 139 | .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-next:after { |
| 140 | @apply content-['keyboard\_double\_arrow\_down']; |
| 141 | } |
| 142 | |
| 143 | .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-previous:after { |
| 144 | @apply content-['keyboard\_double\_arrow\_up']; |
| 145 | } |
| 146 | |
| 147 | /* Navigation bar */ |
| 148 | .jsoneditor .jsoneditor-navigation-bar { |
| 149 | @apply border-b border-gray-200 bg-gray-50 px-2 text-xs leading-[26px] text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300; |
| 150 | } |
| 151 | |
| 152 | .jsoneditor .jsoneditor-treepath .jsoneditor-treepath-seperator { |
| 153 | @apply text-[0px]; |
| 154 | } |
| 155 | |
| 156 | .jsoneditor .jsoneditor-treepath .jsoneditor-treepath-seperator:after { |
| 157 | @apply material-symbols-outlined align-[-4px] text-gray-400 content-['chevron\_right']; |
| 158 | } |
| 159 | |
| 160 | /* Menu */ |
| 161 | .jsoneditor-menu { |
| 162 | @apply border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800; |
| 163 | } |
| 164 | |
| 165 | .jsoneditor .jsoneditor-menu > button { |
| 166 | @apply cursor-pointer rounded-lg border border-gray-200 bg-white bg-none text-gray-700 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300; |
| 167 | } |
| 168 | |
| 169 | .jsoneditor .jsoneditor-menu > button:after { |
| 170 | @apply material-symbols-outlined text-[16px] leading-[24px]; |
| 171 | } |
| 172 | |
| 173 | .jsoneditor-menu > button.jsoneditor-format { |
| 174 | @apply after:content-['format\_align\_right']; |
| 175 | } |
| 176 | |
| 177 | .jsoneditor-menu > button.jsoneditor-compact { |
| 178 | @apply after:content-['format\_align\_left']; |
| 179 | } |
| 180 | |
| 181 | .jsoneditor-menu > button.jsoneditor-sort { |
| 182 | @apply after:content-['sort']; |
| 183 | } |
| 184 | |
| 185 | .jsoneditor-menu > button.jsoneditor-transform { |
| 186 | @apply after:content-['transform']; |
| 187 | } |
| 188 | |
| 189 | .jsoneditor-menu > button.jsoneditor-repair { |
| 190 | @apply after:content-['handyman']; |
| 191 | } |
| 192 | |
| 193 | .jsoneditor-menu > button.jsoneditor-undo { |
| 194 | @apply after:content-['undo']; |
| 195 | } |
| 196 | |
| 197 | .jsoneditor-menu > button.jsoneditor-redo { |
| 198 | @apply after:content-['redo']; |
| 199 | } |
| 200 | |
| 201 | .jsoneditor-menu > button.jsoneditor-expand-all { |
| 202 | @apply after:content-['expand']; |
| 203 | } |
| 204 | |
| 205 | .jsoneditor-menu > button.jsoneditor-collapse-all { |
| 206 | @apply after:content-['compress']; |
| 207 | } |
| 208 | |
| 209 | .jsoneditor-menu > div.jsoneditor-modes > button { |
| 210 | @apply cursor-pointer border-none bg-transparent font-sans text-gray-700 hover:bg-none dark:text-gray-300; |
| 211 | } |
| 212 | |
| 213 | /* Context menu */ |
| 214 | .jsoneditor-contextmenu .jsoneditor-menu { |
| 215 | @apply overflow-clip rounded-lg border border-gray-200 bg-white py-1 shadow-sm dark:border-gray-700 dark:bg-gray-800; |
| 216 | } |
| 217 | |
| 218 | .jsoneditor-contextmenu .jsoneditor-menu li { |
| 219 | @apply relative flex flex-col; |
| 220 | } |
| 221 | |
| 222 | .jsoneditor-contextmenu .jsoneditor-menu button { |
| 223 | @apply mx-1 h-[30px] w-auto flex-grow rounded-lg bg-transparent px-3 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200; |
| 224 | } |
| 225 | |
| 226 | .jsoneditor-contextmenu button .jsoneditor-icon { |
| 227 | @apply w-auto; |
| 228 | } |
| 229 | |
| 230 | .jsoneditor-contextmenu button .jsoneditor-text { |
| 231 | @apply bg-transparent p-0 font-sans text-gray-700 dark:text-gray-300; |
| 232 | } |
| 233 | |
| 234 | .jsoneditor-contextmenu .jsoneditor-selected { |
| 235 | @apply bg-transparent; |
| 236 | } |
| 237 | |
| 238 | .jsoneditor-contextmenu .jsoneditor-selected > button > .jsoneditor-text { |
| 239 | @apply text-purple-600 dark:text-purple-500; |
| 240 | } |
| 241 | |
| 242 | .jsoneditor-contextmenu .jsoneditor-menu li button .jsoneditor-expand { |
| 243 | @apply right-0.5 top-0.5 m-0 flex items-center justify-center p-0; |
| 244 | } |
| 245 | |
| 246 | .jsoneditor .jsoneditor-selected, |
| 247 | .jsoneditor .jsoneditor-highlight { |
| 248 | @apply bg-gray-50 dark:bg-gray-800; |
| 249 | } |
| 250 | |
| 251 | .jsoneditor div.jsoneditor-expand, |
| 252 | .jsoneditor .jsoneditor-button.jsoneditor-collapsed, |
| 253 | .jsoneditor .jsoneditor-button.jsoneditor-expanded, |
| 254 | .jsoneditor .jsoneditor-dragarea, |
| 255 | .jsoneditor .jsoneditor-contextmenu-button { |
| 256 | @apply bg-transparent bg-none outline-none; |
| 257 | } |
| 258 | |
| 259 | .jsoneditor div.jsoneditor-expand:after, |
| 260 | .jsoneditor .jsoneditor-dragarea:after, |
| 261 | .jsoneditor .jsoneditor-contextmenu-button:after, |
| 262 | .jsoneditor .jsoneditor-button.jsoneditor-collapsed:after, |
| 263 | .jsoneditor .jsoneditor-button.jsoneditor-expanded:after { |
| 264 | @apply material-symbols-outlined text-[16px] leading-[24px] text-gray-500; |
| 265 | } |
| 266 | |
| 267 | .jsoneditor div.jsoneditor-expand:after { |
| 268 | @apply content-['arrow\_drop\_down']; |
| 269 | } |
| 270 | |
| 271 | .jsoneditor .jsoneditor-contextmenu-button:after { |
| 272 | @apply content-['toolbar']; |
| 273 | } |
| 274 | |
| 275 | .jsoneditor .jsoneditor-dragarea:after { |
| 276 | @apply content-['drag\_indicator']; |
| 277 | } |
| 278 | |
| 279 | .jsoneditor .jsoneditor-button.jsoneditor-collapsed:after { |
| 280 | @apply content-['keyboard\_arrow\_up']; |
| 281 | } |
| 282 | |
| 283 | .jsoneditor .jsoneditor-button.jsoneditor-expanded:after { |
| 284 | @apply content-['keyboard\_arrow\_down']; |
| 285 | } |
| 286 | |
| 287 | .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand { |
| 288 | @apply absolute right-0 top-0 border-none hover:bg-transparent; |
| 289 | } |
| 290 | |
| 291 | .jsoneditor .jsoneditor-separator { |
| 292 | @apply border-gray-200 dark:border-gray-700; |
| 293 | } |
| 294 | |
| 295 | /* Modal */ |
| 296 | .jsoneditor-modal.pico-content { |
| 297 | @apply rounded-lg border-none font-sans text-gray-700 shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300; |
| 298 | } |
| 299 | |
| 300 | .jsoneditor-modal p { |
| 301 | @apply leading-relaxed; |
| 302 | } |
| 303 | |
| 304 | .jsoneditor-modal p a { |
| 305 | @apply text-purple-600 dark:text-purple-500; |
| 306 | } |
| 307 | |
| 308 | .jsoneditor-modal .pico-modal-header { |
| 309 | @apply h-auto border-b border-gray-200 bg-transparent px-3 py-1.5 text-base font-semibold tracking-tight text-gray-900 dark:border-gray-700; |
| 310 | } |
| 311 | |
| 312 | .jsoneditor-modal .pico-modal-contents { |
| 313 | @apply mt-3 block; |
| 314 | } |
| 315 | |
| 316 | .jsoneditor-modal .jsoneditor-jmespath-label { |
| 317 | @apply text-sm text-gray-900; |
| 318 | } |
| 319 | |
| 320 | .jsoneditor-modal.pico-content .pico-close { |
| 321 | @apply -mt-[13px] mr-2 text-[0px] text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200; |
| 322 | } |
| 323 | |
| 324 | .jsoneditor-modal.pico-content .pico-close:after { |
| 325 | @apply material-symbols-outlined text-[16px] leading-[24px] content-['close']; |
| 326 | } |
| 327 | |
| 328 | .jsoneditor-modal.pico-content select, |
| 329 | .jsoneditor-modal.pico-content #query, |
| 330 | .jsoneditor-modal.pico-content textarea { |
| 331 | @apply min-w-sm min-h-[38px] rounded-lg border border-gray-200 bg-white px-3 text-gray-700 shadow-sm outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300; |
| 332 | } |
| 333 | |
| 334 | .jsoneditor-modal.pico-content #query, |
| 335 | .jsoneditor-modal.pico-content textarea { |
| 336 | @apply py-2; |
| 337 | } |
| 338 | |
| 339 | .jsoneditor-modal.pico-content input[type='submit'] { |
| 340 | @apply relative flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border-gray-200 border-transparent bg-purple-600 px-3 py-2 font-medium text-white; |
| 341 | } |
| 342 | |
| 343 | .jsoneditor-modal.pico-content .jsoneditor-modal-actions { |
| 344 | @apply m-0; |
| 345 | } |
| 346 | |
| 347 | .jsoneditor-modal.pico-content form { |
| 348 | @apply w-[570px] font-sans text-gray-700 dark:text-gray-300; |
| 349 | } |
| 350 | |
| 351 | .jsoneditor-modal.pico-content .jsoneditor-button-group { |
| 352 | @apply flex flex-row justify-end gap-2; |
| 353 | } |
| 354 | |
| 355 | .jsoneditor-modal-input input[type='button'].jsoneditor-button-asc, |
| 356 | .jsoneditor-modal-input input[type='button'].jsoneditor-button-desc { |
| 357 | @apply h-[38px] cursor-pointer rounded-lg border border-gray-200 bg-gray-50 font-sans text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300; |
| 358 | } |
| 359 | |
| 360 | .jsoneditor-modal |
| 361 | .jsoneditor-button-group.jsoneditor-button-group-value-asc |
| 362 | input.jsoneditor-button-asc, |
| 363 | .jsoneditor-modal |
| 364 | .jsoneditor-button-group.jsoneditor-button-group-value-desc |
| 365 | input.jsoneditor-button-desc { |
| 366 | @apply border-purple-600 bg-purple-600 text-white; |
| 367 | } |
| 368 | |
| 369 | .jsoneditor-modal table td, |
| 370 | .jsoneditor-modal table th { |
| 371 | @apply font-sans text-gray-700 dark:text-gray-300; |
| 372 | } |
| 373 | } |
| 374 |