Improved UI design

Author: zahidalidev

src/app/cody-api/styles.css

@@ -1,3 +1,5 @@
+
+
 /* Fonts */
 .open-api-container h1,
 .open-api-container h2,
@@ -192,8 +194,46 @@
   background-color: #F9FAFB;
 }
 
+.openapi-light :where(*):has([style*="border"], [class*="border"]) {
+  border-radius: 0.1px;
+}
+
+.openapi-light tbody {
+  border-radius: 0.1px;
+}
+
+.openapi-light code {
+  border-width: 0.1px;
+}
+
+.openapi-light .sl-prose.sl-markdown-viewer .sl-code-viewer__scroller .sl-code-highlight .token {
+  color: #334155 !important;
+}
+
+.openapi-light .sl-prose.sl-markdown-viewer .sl-code-viewer__scroller .sl-code-highlight button {
+  color: #334155 !important;
+}
+
+.openapi-light .HttpService .sl-stack.sl-stack--vertical.sl-items-stretch.sl-stack--6 .sl-panel .sl-panel__titlebar.sl-select-none {
+  background-color: #F9FAFB;
+  border-width: 0px;
+}
+
+.openapi-light .HttpService .sl-stack.sl-stack--vertical.sl-items-stretch.sl-stack--6 .sl-panel .sl-panel__titlebar.sl-select-none span {
+  color: #0F172A;
+}
+
 /* Dark */
 
+.openapi-dark .HttpService .sl-stack.sl-stack--vertical.sl-items-stretch.sl-stack--6 .sl-panel .sl-panel__titlebar.sl-select-none {
+  background-color: #14171F;
+  border-width: 0px;
+}
+
+.openapi-dark .HttpService .sl-stack.sl-stack--vertical.sl-items-stretch.sl-stack--6 .sl-panel .sl-panel__titlebar.sl-select-none span {
+  color: #fff;
+}
+
 .openapi-dark .sl-elements-api > .sl-flex:first-child {
   background-color: #14171F;
 }
@@ -240,70 +280,104 @@
 
 .openapi-dark .sl-relative .sl-stack.sl-stack--horizontal.sl-bg-canvas-50.sl-rounded-lg {
   background-color: #14171F;
-  border-color: #94A3B8;
-  border-width: 1px;
+  border-color: #0F111A;
+  border-width: 0.1px;
+}
+
+.openapi-dark :where(*):has([style*="border"], [class*="border"]) {
+  border-color: #0F111A;
+}
+
+.openapi-dark tbody {
+  border: 2px solid #0F111A;
+  border-radius: 4px;
+}
+
+.openapi-dark code {
+  border-color: #0F111A !important;
 }
 
 /* Code Blocks */
 
-.TryItPanel .sl-panel__titlebar {
+.open-api-container .TryItPanel .sl-panel__titlebar {
   background-color: #2D2B55;
   border-bottom-width: 0.1px;
   border-bottom-color: #6B7280;
 } 
 
-.TryItPanel .SendButtonHolder {
+.open-api-container .TryItPanel .SendButtonHolder {
   border-top-width: 0.1px;
-  border-top-color: #6B7280;
   padding-top: 10px;
 } 
 
-.TryItPanel .sl-button {
+.open-api-container .TryItPanel .sl-button {
   background-color: #28a6bc;
   padding: 10px;
   height: 33px;
   border-radius: 4px;
 } 
 
-.TryItPanel .sl-button:hover {
+.open-api-container .TryItPanel .sl-button:hover {
   background-color: #19b7d2;
 } 
 
-.TryItPanel .TextRequestBody {  
+.open-api-container .TryItPanel .TextRequestBody {  
   background-color: #2D2B55;
 } 
 
-.TryItPanel {
+.open-api-container .TryItPanel {
   background-color: #2D2B55;
 } 
 
-.TryItPanel .ParameterGrid {
+.open-api-container .TryItPanel .ParameterGrid {
   background-color: #2D2B55;
 } 
 
-.TryItPanel + .sl-panel > .sl-panel__titlebar {
+.open-api-container .TryItPanel + .sl-panel > .sl-panel__titlebar {
   background-color: #2D2B55;
   margin-top: 10px;
   border-bottom-width: 0.1px;
   border-bottom-color: #6B7280;
 }
 
-.TryItPanel + .sl-panel > .sl-panel__content-wrapper {
+.open-api-container .TryItPanel + .sl-panel > .sl-panel__content-wrapper {
   background-color: #2D2B55;
 }
 
-.sl-panel__titlebar { 
-  background-color: #E0E6F0;  
+.open-api-container .sl-stack.sl-stack--vertical.sl-items-stretch.sl-stack--6 .sl-panel .sl-panel__titlebar { 
+  background-color: #2D2B55;
+  border-bottom-width: 0.1px;
+  border-bottom-color: #6B7280;
 }   
 
-.sl-code-viewer__scroller {
-  background-color: #EBEEF5;
+.open-api-container .sl-panel__titlebar span {
+  color: #E2E8F0;
+}
+
+.open-api-container .sl-panel__titlebar button:hover {
+  background-color: #2D2B55;
+}
+
+.open-api-container .sl-panel__titlebar button:active {
+  background-color: #2D2B55;
+}
+
+.open-api-container .sl-panel__titlebar button {
+  color: #E2E8F0;
+}
+
+.open-api-container .sl-code-viewer__scroller {
+  background-color: #2D2B55;
 } 
 
-.TryItPanel + .sl-panel .sl-code-viewer__scroller  {
+.open-api-container .TryItPanel + .sl-panel .sl-code-viewer__scroller  {
   background-color: #2D2B55;
 }
 
+.open-api-container .sl-code-viewer__scroller span {
+  color: #E2E8F0 !important;
+} 
+
 .open-api-container .sl-sticky.sl-inset-y-0.sl-bg-canvas-100 > a {
   display: none;
 }
@@ -317,10 +391,10 @@
 }
 
 .open-api-container .HttpService .sl-stack.sl-stack--vertical {
-  border-width: 1px;
+  border-width: 0.1px;
   border-radius: 4px;
 }
 
 .open-api-container .HttpService .sl-stack.sl-stack--vertical .sl-panel__content-wrapper .sl-panel__content div div {
   border-width: 0px;
-}
+}