Move code example component style to custom.css

Author: FileEX

web/src/components/CodeExamplesSection.astro

@@ -75,90 +75,6 @@ if (codeExamples.length === 0 && !examplesRequired) {
   )}
 </div>
 
-<style>
-.oop-indicator {
-  display: inline-block;
-  padding: 0.2rem 0.5rem;
-  background-color: var(--sl-color-accent-low);
-  border-radius: 0.5rem;
-  font-size: 0.8rem;
-  margin-left: 0.2rem;
-}
-
-.tab-buttons {
-  display: flex;
-  gap: 1rem;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-.tab-buttons.has-scrollbar {
-  padding-bottom: 1rem;
-}
-
-.tab-btn {
-  padding: 0.4rem 0.8rem;
-  margin: 0;
-  border: 1px solid var(--sl-color-gray-4);
-  background: none;
-  border-radius: 10px;
-  cursor: pointer;
-  color: var(--sl-color-text);
-  transition: background-color 0.2s ease;
-}
-
-.tab-btn.active {
-  color: white;
-  font-weight: bold;
-}
-
-.tab-header {
-  padding: 0.5rem 1rem;
-  color: var(--sl-color-text);
-  text-transform: capitalize;
-}
-
-.tab-body {
-  margin: 0;
-  padding: 1rem;
-  color: var(--sl-color-text);
-}
-
-.tab-content {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--sl-color-bg-nav);
-  box-shadow: 0.2rem 0.2rem 0.2rem #0000005b;
-}
-
-.side-client {
-  background-color: var(--color-type-client-background);
-  border-color: var(--color-type-client);
-}
-
-.side-client.active {
-  background-color: var(--color-type-client-background-high);
-}
-
-.side-server {
-  background-color: var(--color-type-server-background);
-  border-color: var(--color-type-server);
-}
-
-.side-server.active {
-  background-color: var(--color-type-server-background-high);
-}
-
-.side-shared {
-  background-color: var(--color-type-shared-background);
-  border-color: var(--color-type-shared);
-}
-
-.side-shared.active {
-  background-color: var(--color-type-shared-background-high);
-}
-</style>
-
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     const buttons = document.querySelectorAll('.tab-btn');

web/src/styles/custom.css

@@ -48,17 +48,6 @@
     margin-bottom: 0;
 }
 
-/* Styling for "Client-side / Server-side / Shared" */
-.side-shared {
-    color: var(--color-type-shared);
-}
-.side-client {
-    color: var(--color-type-client);
-}
-.side-server {
-    color: var(--color-type-server);
-}
-
 .mta-keyword-link {
     color: inherit;
     text-decoration: none;
@@ -95,4 +84,86 @@
 .added-updated-description-box-body {
     margin: 0;
     padding: 1rem 1rem;
+}
+
+.oop-indicator {
+  display: inline-block;
+  padding: 0.2rem 0.5rem;
+  background-color: var(--sl-color-accent-low);
+  border-radius: 0.5rem;
+  font-size: 0.8rem;
+  margin-left: 0.2rem;
+}
+
+.tab-buttons {
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.tab-buttons.has-scrollbar {
+  padding-bottom: 1rem;
+}
+
+.tab-btn {
+  padding: 0.4rem 0.8rem;
+  margin: 0;
+  border: 1px solid var(--sl-color-gray-4);
+  background: none;
+  border-radius: 10px;
+  cursor: pointer;
+  color: var(--sl-color-text);
+  transition: background-color 0.2s ease;
+}
+
+.tab-btn.active {
+  color: white;
+  font-weight: bold;
+}
+
+.tab-header {
+  padding: 0.5rem 1rem;
+  color: var(--sl-color-text);
+  text-transform: capitalize;
+}
+
+.tab-body {
+  margin: 0;
+  padding: 1rem;
+  color: var(--sl-color-text);
+}
+
+.tab-content {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--sl-color-bg-nav);
+  box-shadow: 0.2rem 0.2rem 0.2rem #0000005b;
+}
+
+.side-client {
+  background-color: var(--color-type-client-background);
+  border-color: var(--color-type-client);
+}
+
+.side-client.active {
+  background-color: var(--color-type-client-background-high);
+}
+
+.side-server {
+  background-color: var(--color-type-server-background);
+  border-color: var(--color-type-server);
+}
+
+.side-server.active {
+  background-color: var(--color-type-server-background-high);
+}
+
+.side-shared {
+  background-color: var(--color-type-shared-background);
+  border-color: var(--color-type-shared);
+}
+
+.side-shared.active {
+  background-color: var(--color-type-shared-background-high);
 }