From 19f16c3b1fefadfd71d2de523fd13561ffeb69aa Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Tue, 26 May 2020 18:02:21 +0200
Subject: [PATCH] Theme backoffice docs for v8 to clearly differentiate it from
 the v7 docs (#8010)

---
 src/Umbraco.Web.UI.Docs/gulpfile.js  |  4 +--
 src/Umbraco.Web.UI.Docs/umb-docs.css | 39 +++++++++++++++++-----------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/Umbraco.Web.UI.Docs/gulpfile.js b/src/Umbraco.Web.UI.Docs/gulpfile.js
index 789e2b7845..a3e596ecad 100644
--- a/src/Umbraco.Web.UI.Docs/gulpfile.js
+++ b/src/Umbraco.Web.UI.Docs/gulpfile.js
@@ -16,7 +16,7 @@ gulp.task('docs', [], function (cb) {
     var options = {
         html5Mode: false,
         startPage: '/api',
-        title: "Umbraco Backoffice UI API Documentation",
+        title: "Umbraco 8 Backoffice UI API Documentation",
         dest: './api',
         styles: ['./umb-docs.css'],
         image: "https://our.umbraco.com/assets/images/logo.svg"
@@ -53,4 +53,4 @@ gulp.task('open:docs', function (cb) {
     gulp.src(__filename)
     .pipe(open(options));
     cb();
-});
\ No newline at end of file
+});
diff --git a/src/Umbraco.Web.UI.Docs/umb-docs.css b/src/Umbraco.Web.UI.Docs/umb-docs.css
index 0f2e3e7f74..b748a0a609 100644
--- a/src/Umbraco.Web.UI.Docs/umb-docs.css
+++ b/src/Umbraco.Web.UI.Docs/umb-docs.css
@@ -4,7 +4,7 @@ html {
 }
 body {
     font-family: 'Segoe UI', Tahoma, Helvetica, sans-serif;
-    
+
 }
 
 .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
@@ -33,37 +33,43 @@ body {
     font-family: inherit;
 }
 
+.navbar .container{
+    min-height: inherit;
+    display: flex;
+    align-items: center;
+}
+
 .navbar .brand {
     display: block;
-    float: left;
-    padding: 10px 20px 10px;
-    margin-left: -20px;
-    font-size: 20px;
-    font-weight: 200;
-    color: rgba(0,0,0,.8);
+    color: white;
     text-shadow: none;
 }
 
 .navbar-fixed-top .navbar-inner {
     min-height: 50px;
-    background: #a3db78;
+    background: #3544b1;
 }
 
 .form-search .well {
-    background-color: #f5fbf1;
+    background-color: #f7f7f7;
 }
 
 .form-search > ul.nav > li.module {
-    background-color: #daf0c9;
+    background-color: #3544b1;
 }
 
-.breadcrumb {    
-    background-color: #f5fbf1;
+.form-search > ul.nav > li.module a {
+    color: white;
 }
 
-a {
-    color: #f36f21;
+.form-search > ul.nav > li.section {
+    background-color: #ccc;
 }
+
+.breadcrumb {
+    background-color: #f7f7f7;
+}
+
 a:hover {
     text-decoration: none;
     color: rgba(0,0,0,.8);
@@ -87,9 +93,12 @@ a:hover {
     color: #000;
 }
 
+.form-search > ul.nav > li.module > a:hover{
+    color: #fff;
+}
+
 .header img {
     width: 50px;
-    margin-top: 5px;
 }
 
 .content .methods code {