Add new version fo Wagtail Space docs banner. Fix #6089 (#7956)

* Add new version fo Wagtail Space docs banner. Fix #6089

* Fix closing date

Co-authored-by: Matt Westcott <matthew@torchbox.com>

docs/_static/css/custom.css

@@ -53,12 +53,11 @@ details {
 }
 
 /* Wagtail Space */
-a.wagtailspace {
+.wagtailspace {
   background: #00676a;
   color: white;
-  padding: 15px;
   border-radius: 6px;
-  margin-bottom: 1.25em;
+  margin-bottom: 2em;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -69,34 +68,31 @@ a.wagtailspace {
   width: 56px;
 }
 
-.wagtailspace div {
+.wagtailspace a {
+  display: flex;
+  color: inherit;
+  padding: 15px;
   text-align: left;
   flex-grow: 2;
+  border: 0;
 }
 
 .wagtailspace strong {
   font-size: 1.25em;
 }
 
-.wagtailspace .close {
-  margin-left: 1em;
-  margin-bottom: 1em;
+.wagtailspace .wagtailspace-close {
+  padding: 10px;
+  width: 56px;
   cursor: pointer;
   font-weight: bold;
-  font-size: 1.25em;
+  font-size: 1.5em;
+  color: inherit;
+  border: 0;
+  background: none;
 }
 
 /* Bounce the UFO on hover  */
-@-webkit-keyframes bounce {
-  0%,
-  100% {
-    -webkit-transform: translateY(0);
-  }
-  50% {
-    -webkit-transform: translateY(-5px);
-  }
-}
-
 @keyframes bounce {
   0%,
   100% {
@@ -107,15 +103,10 @@ a.wagtailspace {
   }
 }
 
-a.wagtailspace:hover svg {
-  -webkit-animation-duration: 0.5s;
+.wagtailspace a:hover svg {
   animation-duration: 0.5s;
-  -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
-  -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: bounce;
   animation-name: bounce;
 }

docs/_templates/layout.html

@@ -6,6 +6,7 @@
 {% block extrahead %}
 <link rel="stylesheet" href="{{ docsearch_base ~ 'docsearch.min.css' }}"/>
 <link rel="stylesheet" href="{{ pathto('_static/css/docsearch.overrides.css', 1) }}" />
+<link rel="stylesheet" href="{{ pathto('_static/css/custom.css', 1) }}" />
 {% endblock %}
 
 {% block search %}

docs/conf.py

@@ -309,7 +309,6 @@ texinfo_documents = [
 
 
 def setup(app):
-    app.add_css_file('css/custom.css')
     app.add_js_file('js/banner.js')
 
     github_doc_root = 'https://github.com/wagtail/wagtail/tree/main/docs/'