feat: add custom advanced query mode

src/styles.css

@@ -21,6 +21,7 @@ body {
 
 button,
 input,
+textarea,
 select {
   font: inherit;
 }
@@ -58,6 +59,7 @@ button:disabled {
 }
 
 input,
+textarea,
 select {
   width: 100%;
   border: 1px solid #acb8ad;
@@ -76,12 +78,14 @@ select {
 }
 
 input:hover:not(:disabled),
+textarea:hover:not(:disabled),
 select:hover:not(:disabled) {
   border-color: #7f9588;
   background: #fcfdfb;
 }
 
 input:focus,
+textarea:focus,
 select:focus,
 button:focus-visible {
   outline: none;
@@ -92,6 +96,7 @@ button:focus-visible {
 }
 
 input:disabled,
+textarea:disabled,
 select:disabled {
   cursor: not-allowed;
   background: #eff2ee;
@@ -127,12 +132,14 @@ a {
 }
 
 .control-panel {
+  --panel-padding: 1rem;
+
   display: flex;
   flex-direction: column;
   gap: 1rem;
   border-right: 1px solid #cdd5c9;
   background: #fafbf8;
-  padding: 1rem;
+  padding: var(--panel-padding);
   overflow-y: auto;
 }
 
@@ -636,15 +643,15 @@ a {
   border-top: 1px solid #dbe3dc;
   background:
     linear-gradient(180deg, rgb(238 246 242 / 62%) 0%, rgb(250 251 248 / 0%) 100%);
-  margin-top: 0.15rem;
-  padding-top: 1rem;
+  margin: 0.15rem calc(var(--panel-padding) * -1) 0;
+  padding: 1rem var(--panel-padding) 0;
 }
 
 .query-panel-separated::before {
   content: "Advanced";
   position: absolute;
   top: -0.62rem;
-  left: 0;
+  left: var(--panel-padding);
   background: #fafbf8;
   color: #6b7770;
   padding-right: 0.55rem;
@@ -667,6 +674,69 @@ a {
   font-size: 0.82rem;
 }
 
+.query-mode-control {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.45rem;
+}
+
+.query-mode-control label {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-height: 34px;
+  border: 1px solid #c8d2ca;
+  border-radius: 7px;
+  background: linear-gradient(#ffffff, #f7f9f6);
+  padding: 0.42rem 0.55rem;
+  font-weight: 620;
+  cursor: pointer;
+}
+
+.query-mode-control input {
+  position: relative;
+  flex: 0 0 0.95rem;
+  width: 0.95rem !important;
+  min-width: 0.95rem;
+  max-width: 0.95rem;
+  height: 0.95rem;
+  min-height: 0.95rem;
+  margin: 0;
+  border: 1px solid #8ea098;
+  border-radius: 50%;
+  appearance: none;
+  background: #ffffff;
+  padding: 0;
+}
+
+.query-mode-control input::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.44rem;
+  height: 0.44rem;
+  border-radius: 50%;
+  background: #ffffff;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 120ms ease;
+}
+
+.query-mode-control input:checked {
+  border-color: #226a5d;
+  background: #226a5d;
+}
+
+.query-mode-control input:checked::before {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.query-mode-control label:has(input:checked) {
+  border-color: #5f9488;
+  background: #e5f2ee;
+  box-shadow: inset 0 0 0 1px rgb(34 106 93 / 16%);
+}
+
 .panel-heading {
   display: flex;
   align-items: center;
@@ -702,6 +772,22 @@ a {
   word-break: break-word;
 }
 
+.custom-query-input {
+  min-height: 190px;
+  resize: vertical;
+  background: #16201d;
+  color: #eaf4ef;
+  padding: 0.75rem;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  font-size: 0.78rem;
+  line-height: 1.5;
+  white-space: pre;
+}
+
+.custom-query-input::placeholder {
+  color: #91a39a;
+}
+
 .message {
   margin: 0;
   border-left: 3px solid #2e7a70;
@@ -893,13 +979,16 @@ a {
 @media (max-width: 560px) {
   .control-panel,
   .results-panel {
-    padding: 0.8rem;
+    --panel-padding: 0.8rem;
+
+    padding: var(--panel-padding);
   }
 
   .custom-fields,
   .radius-controls,
   .segmented-control,
-  .checkbox-grid {
+  .checkbox-grid,
+  .query-mode-control {
     grid-template-columns: 1fr;
   }