Update YOLOv8.2 docs banner (#10294)

docs/overrides/main.html

@@ -3,10 +3,28 @@
 {% extends "base.html" %}
 
 {% block announce %}
-<div style="text-align: center;">
+<a
-    <a href="https://hub.ultralytics.com/signup?utm_source=docs&utm_medium=banner&utm_campaign=cloud_training_release"
+  href="https://github.com/ultralytics/ultralytics/releases/tag/v8.2.0"
-       style="color: #FFFFFF;" target="_blank">
+  target="_blank"
-        Introducing Ultralytics HUB Cloud Training! ☁️ Scalable. Simple. Smart. &nbsp; ➜
+  class="banner-wrapper"
+>
+  <img
+    src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/6627a6e4d47ce284268ea3b9_yolov82_release.svg"
+    loading="lazy"
+    alt="Ultralytics YOLOv8.2 Release"
+    class="banner-content desktop"
+  />
+  <img
+    src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/6627a163dd84c20540c5ea7a_yolov82_effects.svg"
+    loading="lazy"
+    alt="Ultralytics YOLOv8.2 Release"
+    class="banner-content mobile"
+  />
+  <img
+    src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/6627a163ab932e33983215d4_arrow_effects.svg"
+    loading="lazy"
+    alt="Ultralytics YOLOv8.2 Release Arrow"
+    class="banner-arrow"
+  />
 </a>
-</div>
 {% endblock %}

docs/overrides/stylesheets/style.css

@@ -49,9 +49,54 @@ div.highlight {
   max-height: 75vh;
 }
 
-/* Update the background of the banner (same as the one on the Ultralytics website) */
+/* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */
 .md-banner {
-  background-image: url(https://uploads-ssl.webflow.com/646dd1f1a3703e451ba81ecc/65e60cd6a4080bba757850a3_banner_ct.webp);
+  background-image: url(https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/6627a0cab2de939ad35939ed_banner_82.webp);
   background-size: cover;
   background-position: center;
 }
+
+.md-banner__inner {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.banner-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: 64px;
+}
+
+.banner-content {
+  max-height: 64px;
+}
+
+.banner-content.desktop {
+  display: none;
+}
+
+.banner-arrow {
+  display: none;
+  max-height: 80px;
+  margin-left: -16px;
+  transition: transform ease-in-out 0.5s;
+}
+
+.banner-wrapper:hover > .banner-arrow {
+  transform: translateX(8px);
+}
+
+@media screen and (min-width: 768px) {
+  .banner-content.mobile {
+    display: none;
+  }
+  .banner-content.desktop {
+    display: revert;
+  }
+  .banner-arrow {
+    display: revert;
+  }
+}
+/* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */