Merge pull request #3457 from ArmDeveloperEcosystem/adsv5

Adsv5

Author: pareenaverma

assets/css/content-pages.css

@@ -5,10 +5,31 @@
     top:5px;
 }
 
+.left-nav-pane a.a-tab {
+    display: block;
+    line-height: 0;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.left-nav-pane a.a-tab + a.a-tab {
+    margin-top: -1px !important;
+}
+
 
  /* Tab color on left */
- .tab-row {
+.left-nav-pane .tab-row {
     background-color: var(--arm-dark-grey);
+    display: flex;
+    gap: 0 !important;
+    line-height: normal;
+    margin: 0 !important;
+    padding: 0 !important;
+    row-gap: 0 !important;
+}
+
+.left-nav-pane a.a-tab + a.a-tab .tab-row {
+    margin-top: -1px !important;
 }
 html[theme='dark'] .tab-row {
     background-color: var(--arm-black); /* rgba(163, 168, 174,1); #2A2B2D; */
@@ -26,8 +47,11 @@ html[theme='dark'] .tab-row.active {
 .tab-right-card {
     border-style: solid;
     border-width: 1px;
+    box-sizing: border-box;
     width: 100%;
     margin-left: 10px;
+    margin-top: 0;
+    margin-bottom: 0;
 
     border-color: var(--arm-dark-grey);
     background-color: var(--arm-black);
@@ -61,6 +85,7 @@ html[theme='dark'] .tab-right-card > h6 {
 .tab-right-card-header {
     margin: 10px;
     font-size:1em;
+    line-height: 1.2;
 }
 
 /* Force a 2-line clamp for masthead title */
@@ -87,7 +112,7 @@ a:hover {
     border-color: var(--arm-green);
 }
 .tab-row.inactive:hover h6 {
-    color: var(--arm-green); }
+    color: var(--lp-hover-text); }
 
 
 
@@ -103,14 +128,15 @@ p.github-link        {
     margin-bottom: 0px;
 
     color: var(--arm-web-safe-blue);
+    line-height: 1.25;
     text-decoration: none;
 }
 
 html[theme='dark'] p.github-link        { 
     color: var(--arm-light-blue);
 }
 html[theme='dark'] p.github-link:hover {
-    color: var(--arm-green);
+    color: var(--lp-hover-text);
 }
 
 div.github-div {
@@ -133,6 +159,16 @@ html[theme='dark'] div.github-div {
 
 }
 
+div.github-div > a {
+    display: block;
+    margin: 0;
+    padding: 0;
+}
+
+div.github-div > a + a {
+    margin-top: 8px;
+}
+
 
 
 /* Multi-tool page styling (like for docker)
@@ -170,11 +206,11 @@ html[theme='dark'] .multi-tool-selection-title {
 }
 ads-card.multi-install-card:hover .multi-tool-selection-title{
     transition: color 0.3s ease-in-out;
-    color: var(--arm-green);
+    color: var(--lp-hover-text);
 }
 html[theme='dark'] ads-card.multi-install-card:hover .multi-tool-selection-title {
     transition: color 0.3s ease-in-out;
-    color: var(--arm-green);
+    color: var(--lp-hover-text);
 }
 
 
@@ -258,7 +294,7 @@ html[theme='dark'] .incorrect-explain {color: #e86868} /* 27% lighter than arm's
     text-decoration: none;
 }
 .social-icons a:hover {
-    color: var(--arm-green);
+    color: var(--lp-hover-text);
 }
 
 
@@ -342,11 +378,11 @@ html[theme='dark'] ads-expansion-panel.generated-summary-faq__panel {
     text-decoration: none;
 }
 .share-icon:hover {
-    fill: var(--arm-green);
+    fill: var(--lp-hover-text);
     cursor: pointer;
   }
 #link-copied-success {
-    color: var(--arm-green);
+    color: var(--lp-hover-text);
     background-color: var(--arm-black);
     border-radius: 10px;
     padding-left:8px;

assets/css/content.css

@@ -196,7 +196,7 @@ div.answer label {
     --ads-horizontal-tabs-tab-color-active: var(--arm-orange);
     --ads-horizontal-tabs-underline-color: var(--arm-orange);
 
-    --ads-horizontal-tabs-tab-color-hover: var(--arm-green);
+    --ads-horizontal-tabs-tab-color-hover: var(--lp-hover-text);
     --ads-horizontal-tabs-tab-content-background-color: var(--arm-color-footing);
 }
 

assets/css/cross-page.css

@@ -46,6 +46,19 @@
 /* UNIVERSAL */
 /****************************************************/
 
+/* Local ADS v5 accent experiment */
+:root {
+    --lp-accent-primary: #6023DE;   /* ADS UI Violet 65 */
+    --lp-accent-secondary: #D1BAFC; /* ADS UI Violet 04 */
+    --lp-hover-text: #D9D9D9;       /* ADS UI Gray 35 */
+
+    /* Keep existing site styles working while testing the v5 palette. */
+    --arm-green: var(--lp-accent-primary);
+    --arm-light-blue: var(--lp-accent-secondary);
+    --arm-web-safe-blue: var(--lp-accent-secondary);
+    --arm-blue: var(--lp-accent-secondary);
+}
+
 /* ADS FIXES */
 /***************************************************/
 /* Font size hardcoding to fix ADS */
@@ -87,47 +100,50 @@ ads-button {
     /* primary */
     --ads-button-background-color-primary-hover: var(--arm-green);
     --ads-button-border-color-primary-hover: var(--arm-green);
+    --ads-button-color-primary-hover: var(--lp-hover-text);
 
     /* secondary */
     --ads-button-border-color-secondary-hover: var(--arm-green);
-    --ads-button-color-secondary-hover: var(--arm-green);
+    --ads-button-color-secondary-hover: var(--lp-hover-text);
 
     /* tertiary */
     --ads-button-border-color-tertiary-hover: var(--arm-green);
-    --ads-button-color-tertiary-hover: var(--arm-green);
+    --ads-button-color-tertiary-hover: var(--lp-hover-text);
 }
 ads-cta-button {
       /* primary */
       --ads-cta-button-background-color-primary-hover: var(--arm-green);
       --ads-cta-button-border-color-primary-hover: var(--arm-green);
+      --ads-cta-button-color-primary-hover: var(--lp-hover-text);
 
       /* secondary */
       --ads-cta-button-border-color-secondary-hover: var(--arm-green);
-      --ads-cta-button-color-secondary-hover: var(--arm-green);
+      --ads-cta-button-color-secondary-hover: var(--lp-hover-text);
 
       /* tertiary */
       --ads-cta-button-border-color-tertiary-hover: var(--arm-green);
-      --ads-cta-button-color-tertiary-hover: var(--arm-green);  
+      --ads-cta-button-color-tertiary-hover: var(--lp-hover-text);
 }
 
 /* button, form submit syntax */
 input[type="submit"]:hover {
     background-color: var(--arm-green);
     border-color: var(--arm-green);
+    color: var(--lp-hover-text);
     box-shadow: none;
 }
 ads-tag {
     --ads-tag-border-color-hover: var(--arm-green);
-    --ads-tag-color-hover: var(--arm-green);
+    --ads-tag-color-hover: var(--lp-hover-text);
 }
 
 /* Remove text decorations on all a links when highlighted */
 a:hover {
     text-decoration: none;
-    color: var(--arm-green);
+    color: var(--lp-hover-text);
 }
 ads-cta-link {
-    --ads-cta-link-color-hover: var(--arm-green);
+    --ads-cta-link-color-hover: var(--lp-hover-text);
 }
 ads-search {
     --ads-search-border-color-hover: var(--arm-green);
@@ -194,7 +210,6 @@ arm-top-navigation:not(:defined) {
     background-color: #010101;  
 }
 
-
 /* Fix Masthead Height */
 #expanded-masthead  {
         background-color: transparent;
@@ -218,9 +233,26 @@ ads-masthead {
 
 
 ads-breadcrumbs {
-    --ads-breadcrumb-color: var(--arm-green);
-    --ads-breadcrumbs-link-color: var(--arm-green);
-    --ads-breadcrumbs-link-color-visited: var(--arm-green);
+    --ads-breadcrumb-color: var(--lp-accent-secondary);
+    --ads-breadcrumb-current-color: white;
+    --ads-breadcrumb-hover-color: var(--lp-hover-text);
+    --ads-breadcrumbs-link-color: var(--lp-accent-secondary);
+    --ads-breadcrumbs-link-color-hover: var(--lp-hover-text);
+    --ads-breadcrumbs-link-color-visited: var(--lp-accent-secondary);
+    --ads-breadcrumbs-current-color: white;
+}
+
+#breadcrumb-element ads-breadcrumb[current] {
+    --ads-breadcrumb-color: white;
+    --ads-breadcrumb-current-color: white;
+    --ads-breadcrumbs-current-color: white;
+    color: white;
+}
+
+#breadcrumb-element ads-breadcrumb:not([current]):hover {
+    --ads-breadcrumb-color: var(--lp-hover-text);
+    --ads-breadcrumbs-link-color: var(--lp-hover-text);
+    color: var(--lp-hover-text);
 }
 
 
@@ -251,8 +283,8 @@ ads-breadcrumbs {
     border-style: solid;
     border-width: 1px;
     border-radius: 0px;
-    border-color: rgba(149, 214, 0, 0.25); /* var(--arm-green) with 25% transparency */
-    border-color: rgba(0, 193, 222, 0.25); /* var(--arm-light-blue) with 25% transparency */
+    border-color: rgba(96, 35, 222, 0.25); /* var(--lp-accent-primary) with 25% transparency */
+    border-color: rgba(209, 186, 252, 0.25); /* var(--lp-accent-secondary) with 25% transparency */
 
     padding-left: 4px;
     padding-right: 4px;
@@ -296,7 +328,7 @@ ads-breadcrumbs {
     margin: -1px;
     z-index: -1;
     border-radius: inherit;
-    background: linear-gradient(90deg, #95D629, #20C1DE);
+    background: linear-gradient(90deg, var(--lp-accent-primary), var(--lp-accent-secondary));
     opacity: 0;
     transition: opacity 0.3s ease; 
 }
@@ -323,7 +355,7 @@ ads-breadcrumbs {
     margin: -2px;
     z-index: -1;
     border-radius: inherit;
-    background: linear-gradient(90deg, #95D629, #20C1DE );
+    background: linear-gradient(90deg, var(--lp-accent-primary), var(--lp-accent-secondary));
     opacity: 0;
     transition: opacity 0.3s ease; 
 }
@@ -381,7 +413,7 @@ html[theme='light'] body {
 /* Mobile background */
 @media (max-width: 768px) {
     html[theme='dark'] body {
-        background-image: url("/img/bg-img-736x800.webp"); 
+        background-image: url("/img/bg-img-736x800-purple.webp");
         background-color: var(--arm-color-footing);      
         background-position: 0% 100%;
         background-attachment: fixed;
@@ -391,7 +423,7 @@ html[theme='light'] body {
 /* Laptop background */
 @media (min-width: 768px) {
     html[theme='dark'] body {
-        background-image: url("/img/bg-img-1920x1600.webp");
+        background-image: url("/img/bg-img-1920x1600-purple.webp");
         background-color: var(--arm-color-footing);      
         background-position: 0% 100%;
         background-attachment: fixed;
@@ -402,7 +434,7 @@ html[theme='light'] body {
 /* Large Monitor background */
 @media (min-width: 1400px) {
     html[theme='dark'] body {
-        background-image: url("/img/bg-img-2500x1700.webp");
+        background-image: url("/img/bg-img-2500x1700-purple.webp");
         background-color: var(--arm-color-footing);      
         background-position: 0% 100%;
         background-attachment: fixed;

assets/css/demo.css

@@ -173,7 +173,7 @@
     font-size: 14px!important;
 }
 #reset-demo-txt:hover {
-    color: var(--arm-green);
+    color: var(--lp-hover-text);
 }
 #ping-info, #traffic-info, #terms-of-use {
     float: left;

assets/css/feedback.css

@@ -16,40 +16,17 @@
 }
 .rating label {
     color: white;
+    cursor: pointer;
     position: relative;
 }
-/*
-.rating label:hover,
-.rating label:hover ~ label, 
-.rating input:checked + label,
-.rating input:checked + label ~ label {
-	color: pink!important; 
-}
-*/
-.rating label:hover:before,
-.rating label:hover ~ label:before,
-.rating input:checked + label:before,
-.rating input:checked + label ~ label:before {
-  content: "\f005"; /* fa-star */
-  font-family: "Font Awesome 6 Pro";
-  font-weight: 900;
-  font-size: 2rem; /* fa-2x */
-  color: white!important;
-  position: absolute;
-  left: 0;
-  top: 0;
-  margin-top:-8px;
-}
-
 
-/*
-.rating i.fa-star::before {
-    content: "\f005";
-
-    padding-right:5px;
-    color: white;
+.rating label:hover i,
+.rating label:hover ~ label i,
+.rating input:checked + label i,
+.rating input:checked + label ~ label i {
+    font-family: "Font Awesome 6 Pro";
+    font-weight: 900;
 }
-*/
 
 
 /****************************************************/
@@ -85,4 +62,4 @@ html[theme='dark'] #error-text {color: hsl(0, 73.9%, 60%);} /* 10% lighter than
 }
 #feedback-3-thanks.smooth-open {
     opacity:1
-}
+}