diff --git a/airflow/www/static/css/main.css b/airflow/www/static/css/main.css
index 54395603f501b..c5fae158a771a 100644
--- a/airflow/www/static/css/main.css
+++ b/airflow/www/static/css/main.css
@@ -86,12 +86,26 @@ div.container {
align-items: center;
}
-.brand-logo {
- width: 104px;
+.brand-logo-pinwheel {
+ width: 49px;
height: 40px;
overflow: visible !important; /* Allow for animation */
}
+.brand-logo-text {
+ width: 55px;
+ height: 40px;
+ overflow: visible !important; /* Allow for animation */
+}
+
+.brand-logo-divider {
+ width: 0;
+}
+
+.brand-logo-antidivider {
+ width: 5px;
+}
+
@keyframes pinSpin {
from {
transform: rotate(0) translateX(0);
@@ -105,7 +119,17 @@ div.container {
@media (prefers-reduced-motion: no-preference) {
.navbar-brand:hover .brand-logo-pinwheel {
transform-origin: 17.66px 17.66px;
- animation: pinSpin 1.5s linear;
+ animation: pinSpin 1.5s linear infinite;
+ }
+
+ .navbar-brand:hover .brand-logo-divider {
+ width: 5px;
+ transition: width 0.5s;
+ }
+
+ .navbar-brand:hover .brand-logo-antidivider {
+ width: 0;
+ transition: width 0.5s;
}
}
diff --git a/airflow/www/templates/appbuilder/navbar.html b/airflow/www/templates/appbuilder/navbar.html
index 0cab0eb0f1e3a..877b6a7cc39ab 100644
--- a/airflow/www/templates/appbuilder/navbar.html
+++ b/airflow/www/templates/appbuilder/navbar.html
@@ -29,20 +29,22 @@
-