Decrease opacity and for non-active schema/response tabs

PaloAltoNetworks · Sep 26, 2022 · 4d5da14 · 4d5da14
1 parent fdbc413
commit 4d5da14
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/styles.module.css b/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/styles.module.css
@@ -12,14 +12,19 @@
   height: 2.5rem;
   margin-top: 0 !important;
   margin-right: 0.5rem;
-  border: 1px solid var(--openapi-code-dim-dark);
+  border: 1px solid var(--ifm-color-primary);
   border-radius: var(--ifm-global-radius);
+  color: var(--ifm-color-primary);
   font-weight: var(--ifm-font-weight-normal);
-  color: var(--openapi-code-dim-dark);
+}
+
+.tabItem:not(.responseTabActive) {
+  opacity: 0.65;
 }
 
 .tabItem:hover {
-  color: var(--ifm-color-emphasis-500) !important;
+  opacity: 1;
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 .tabItem:last-child {
@@ -74,8 +79,7 @@
 }
 
 .responseTabActive {
-  border: 1px solid var(--ifm-color-primary);
-  color: var(--ifm-color-primary);
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 .responseSchemaContainer {

diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/styles.module.css b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/styles.module.css
@@ -12,14 +12,19 @@
   height: 1.8rem;
   margin-top: 0 !important;
   margin-right: 0.5rem;
-  border: 1px solid var(--openapi-code-dim-dark);
+  border: 1px solid var(--ifm-color-primary);
   border-radius: var(--ifm-global-radius);
-  color: var(--openapi-code-dim-dark);
+  color: var(--ifm-color-primary);
   font-size: 12px;
 }
 
+.tabItem:not(.schemaTabActive) {
+  opacity: 0.65;
+}
+
 .tabItem:hover {
-  color: var(--ifm-color-emphasis-500) !important;
+  opacity: 1;
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 .tabItem:last-child {
@@ -49,9 +54,8 @@
   display: none;
 }
 
-.tabItem.schemaTabActive {
-  border: 1px solid var(--ifm-color-primary);
-  color: var(--ifm-color-primary);
+.schemaTabActive {
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 .schemaTabLabel {