Sync main branch with 4.5.0 branch

en/docs/assets/css/blue-palette-alt1.css

@@ -9,7 +9,6 @@
     --md-accent-fg-color--transparent: #0339821a;
     --md-accent-bg-color: #fff;
     --md-accent-bg-color--light: #ffffffb3;
-    --md-banner: url(../img/wso2-micro-integrator-hero-image.webp) no-repeat right top;
     --md-hjs-color: #00f;
     --md-primary-heder-fg-color: var(--md-primary-fg-color);
     --md-typeset-a-hover-color: #ff7300;
@@ -70,25 +69,17 @@
     color: var( --md-hjs-color);
 }
 .banner-link {
-    width: 800px;
+    width: 480px;
     height: 363px;
-}
-@media (min-width: 768px){
-    .banner-link {
-        width: 480px;
-        height: 363px;
-        margin-left: 50px;
-        margin-right: 200px;
-    }
+    margin-left: 50px;
+    margin-right: 200px;
 }
 .md-header__button {
     color: var(--md-primary-heder-fg-color);
 
 }
-
 .md-content a {
     color: var(--md-typeset-a-color);
-    font-weight: bold;
 }
 
 .md-content a:hover {
@@ -101,7 +92,6 @@
 
 .md-nav__link--active {
     color: var(--md-nav-link-color);
-    font-weight: bold;
 }
 
 .md-tabs__link:hover {
@@ -110,5 +100,4 @@
 
 .md-tabs__link--active {
     color: var(--md-nav-link-color);
-    font-weight: bold;
 }

en/docs/assets/css/config-catalog.css

@@ -1,7 +1,7 @@
 .mb-config-catalog {
     display: table;
     width: 100%;
-    max-width: 900px;
+    max-width: 770px;
 }
 
 .hide-toc .mb-config-catalog {
@@ -26,29 +26,16 @@
     order: 0;
 }
 
-.md-typeset .superfences-tabs>input {
-    display: none
-}
-
-.mb-config-catalog .superfences-tabs .icon {
-    font-size: 0.64rem;
-}
-
-.mb-config-catalog .superfences-tabs > input:checked + label:after {
-    content: "Hide Example";
-    font-weight: 500;
-    font-size: 0.64rem;
-}
-
 .mb-config-catalog .superfences-tabs>input+label:after {
-    content: "Show Example";
-    font-weight: 500;
-    font-size: 0.64rem;
+    content: "View Sample";
+    cursor: pointer;
+    font-size: 16px;
 }
 
-.md-typeset .superfences-tabs > label:hover {
-    color: var(--md-nav-link-color);
+.mb-config-catalog .superfences-tabs>input:checked+label:after {
+    content: "Hide Sample";
     cursor: pointer;
+    font-size: 16px;
 }
 
 .mb-config-catalog .superfences-tabs .doc-wrapper {
@@ -101,9 +88,9 @@
     border-bottom: 1px solid #eee;
 }
 
-/* .mb-config-catalog>section.title>.mb-config-example {
+.mb-config-catalog>section.title>.mb-config-example {
     display: none;
-} */
+}
 
 .mb-config-catalog .mb-config-example code,
 .mb-config-catalog .mb-config-example pre {
@@ -142,7 +129,7 @@
     margin: 0 .29412em;
     padding: .07353em .3em;
     border-radius: .2rem;
-    background-color: var(--md-accent-fg-color);
+    background-color: var(--md-primary-fg-color--light);
     color: #fff;
     font-size: 75%;
 }
@@ -168,7 +155,7 @@
 .mb-config-catalog .mb-config .param>.param-name {
     display: table-cell;
     vertical-align: top;
-    border-left: 2px solid var(--md-accent-fg-color);
+    border-left: 2px solid var(--md-primary-fg-color--light);
     box-sizing: border-box;
     position: relative;
     padding: 1.7em 0;
@@ -190,15 +177,15 @@
     display: inline-block;
     width: 2px;
     height: 8px;
-    background-color: var(--md-accent-fg-color);
+    background-color: var(--md-primary-fg-color--light);
     margin: -4px 10px 0;
     vertical-align: middle;
 }
 
 .mb-config-catalog .mb-config .param>.param-name>span::after {
     content: '';
     position: absolute;
-    border-top: 2px solid var(--md-accent-fg-color);
+    border-top: 2px solid var(--md-primary-fg-color--light);
     width: 10px;
     left: 0;
     top: 2.3em;
@@ -225,7 +212,7 @@
     display: block;
     position: absolute;
     left: -2px;
-    border-left: 3px solid var(--md-default-bg-color);
+    border-left: 3px solid #fff;
     top: 36px;
     background-color: #fff;
     bottom: 0;
@@ -234,7 +221,7 @@
 .mb-config-catalog .mb-config .param>.param-info {
     display: table-cell;
     width: 100%;
-    border-bottom: 1px solid rgba(159, 159, 159, 0.52);;
+    border-bottom: 1px solid #eee;
     padding: 10px 10px 10px 0;
     box-sizing: border-box;
     word-break: break-word;
@@ -249,9 +236,10 @@
 }
 
 html .md-typeset .superfences-tabs>label {
-    color: var(--md-primary-fg-color-header-text);
+    color: var(--md-primary-fg-color);
     font-weight: normal;
-    padding: 0.6rem;
+    padding: 20px;
+    border-bottom: 0.05rem dashed var(--md-primary-fg-color--light);
 }
 
 .md-typeset .superfences-tabs {
@@ -262,7 +250,7 @@ html .md-typeset .superfences-tabs>label {
     border: 0.05rem solid rgba(0,0,0,.07);
 }
 .md-typeset .superfences-tabs {
-    border: 0.05rem solid rgba(159, 159, 159, 0.52);
+    border: 0.05rem dashed var(--md-primary-fg-color--light);
     border-radius: 5px;
 }
 

en/docs/assets/css/copy-page.css

@@ -0,0 +1,179 @@
+/* Copy Page Feature CSS - Styled to match React implementation */
+
+.copy-page-container {
+    display: inline-block;
+    position: relative;
+    float: right;
+    margin-left: 0.5rem;
+}
+
+/* Main button - behaves like md-content__button */
+.copy-page-button {
+    display: inline-block;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    color: var(--md-default-fg-color--light);
+    transition: color 0.25s;
+}
+
+.copy-page-button:hover {
+    color: var(--md-default-fg-color);
+}
+
+/* Hide text span if any remains, though we will remove it in JS */
+.copy-page-button span:not(.md-icon) {
+    display: none;
+}
+
+/* Dropdown menu */
+.copy-page-menu {
+    position: absolute;
+    top: calc(100% + 8px);
+    /* Open downwards */
+    bottom: auto;
+    right: 0 !important;
+    left: auto !important;
+    transform: none !important;
+    min-width: 240px;
+    padding: 0.5rem;
+    background-color: var(--md-default-bg-color);
+    border: 1px solid var(--md-default-fg-color--lighter);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 101;
+    display: none;
+}
+
+.copy-page-menu.active {
+    display: block;
+}
+
+/* Dropdown items */
+.copy-page-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.5rem 0.625rem;
+    font-size: 0.75rem;
+    color: var(--md-default-fg-color);
+    background: none;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    text-align: left;
+    transition: background-color 0.15s ease;
+}
+
+.copy-page-item:hover {
+    background-color: var(--md-default-bg-color--lighter);
+}
+
+.copy-page-item svg:first-child {
+    flex-shrink: 0;
+    color: var(--md-default-fg-color--light);
+}
+
+.copy-page-item-text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+}
+
+.copy-page-item-title {
+    font-weight: 500;
+    color: var(--md-default-fg-color);
+}
+
+.copy-page-item-desc {
+    font-size: 0.65rem;
+    color: var(--md-default-fg-color--light);
+    margin-top: 0.125rem;
+}
+
+.copy-page-external-icon {
+    flex-shrink: 0;
+    color: var(--md-default-fg-color--lighter);
+    margin-left: auto;
+}
+
+.copy-page-divider {
+    height: 1px;
+    background-color: var(--md-default-fg-color--lighter);
+    margin: 0.5rem 0;
+    opacity: 0.5;
+}
+
+/* Chevron rotation */
+.copy-page-chevron-icon {
+    transition: transform 0.2s;
+}
+
+.copy-page-button[aria-expanded="true"] .copy-page-chevron-icon {
+    transform: rotate(180deg);
+}
+
+/* Mobile Backdrop */
+.copy-page-backdrop {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .copy-page-container {
+        position: fixed;
+        float: none;
+        top: auto;
+        bottom: 1rem;
+        left: 0.5rem;
+        right: auto;
+        z-index: 100;
+    }
+
+    .copy-page-button {
+        width: 3rem;
+        height: 3rem;
+        padding: 0;
+        border-radius: 50%;
+        justify-content: center;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    }
+
+    .copy-page-button span,
+    .copy-page-chevron-icon {
+        display: none;
+    }
+
+    .copy-page-backdrop.active {
+        display: block;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 999;
+    }
+
+    .copy-page-menu.active {
+        position: fixed;
+        top: auto;
+        bottom: 0;
+        left: 0 !important;
+        right: 0 !important;
+        min-width: unset;
+        width: 100%;
+        border-radius: 16px 16px 0 0;
+        max-height: 70vh;
+        overflow-y: auto;
+        padding: 1rem;
+        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
+        z-index: 1000;
+    }
+
+    .copy-page-item {
+        padding: 0.875rem 1rem;
+    }
+}