Doc: Add a dark offline CSS

Which can be used by Qt Creator and Assistant.

Task-number: QTBUG-97125
Task-number: QTCREATORBUG-26557
Change-Id: I03e5ac0a15f84101c73887724693e9eb27670754
Reviewed-by: Topi Reiniö <topi.reinio@qt.io>
Reviewed-by: Jarek Kobus <jaroslaw.kobus@qt.io>

3 files changed, 777 insertions, 3 deletions

diff --git a/doc/global/html-header-offline.qdocconf b/doc/global/html-header-offline.qdocconf
index d84f38fef8..4b87e3c792 100644
--- a/doc/global/html-header-offline.qdocconf
+++ b/doc/global/html-header-offline.qdocconf
@@ -1,10 +1,12 @@
 #Default HTML header for QDoc builds.
 
 #specify the CSS file used by this template
-HTML.stylesheets = template/style/offline.css
+HTML.stylesheets = template/style/offline.css \
+                   template/style/offline-dark.css
 
 #for including files into the qch file
-qhp.extraFiles += style/offline.css
+qhp.extraFiles += style/offline.css \
+                  style/offline-dark.css
 
 HTML.headerstyles = \
     "  <link rel=\"stylesheet\" type=\"text/css\" href=\"style/offline.css\" />\n"
diff --git a/doc/global/qt-html-templates-offline.qdocconf b/doc/global/qt-html-templates-offline.qdocconf
index 0d49376de6..cbd896f655 100644
--- a/doc/global/qt-html-templates-offline.qdocconf
+++ b/doc/global/qt-html-templates-offline.qdocconf
@@ -8,7 +8,8 @@ defines                  += offlinedocs
 #uncomment if navigation bar is not wanted
 #HTML.nonavigationbar      = "true"
 
-HTML.stylesheets = template/style/offline.css
+HTML.stylesheets = template/style/offline.css \
+                   template/style/offline-dark.css
 HTML.extraimages += template/images/ico_out.png \
                     template/images/ico_note.png \
                     template/images/ico_note_attention.png \
@@ -22,6 +23,7 @@ sourcedirs += includes
 
 #specify which files in the output directory should be packed into the qch file.
 qhp.extraFiles +=   style/offline.css \
+                    style/offline-dark.css \
                     images/ico_out.png \
                     images/ico_note.png \
                     images/ico_note_attention.png \
diff --git a/doc/global/template/style/offline-dark.css b/doc/global/template/style/offline-dark.css
new file mode 100644
index 0000000000..559811b529
--- /dev/null
+++ b/doc/global/template/style/offline-dark.css
@@ -0,0 +1,770 @@
+body {
+    font: normal 400 14px/1.2 Arial;
+    margin-top: 50px;
+    font-family: Arial, Helvetica;
+    text-align: left;
+    margin-left: 5px;
+    margin-right: 5px;
+    background-color: #2E2F30;
+    color: #d0d0d0
+}
+
+p {
+    line-height: 20px
+}
+
+img {
+    margin-left: 0px;
+    max-width: 800px;
+    height: auto;
+    filter: brightness(85%);
+}
+
+.content .border img {
+    box-shadow:3px 3px 8px 3px rgba(200,200,200,0.5)
+}
+
+.content .border .player {
+    box-shadow:3px 3px 8px 3px rgba(200,200,200,0.5)
+}
+
+.content .indexboxcont li {
+     font: normal bold 13px/1 Verdana
+ }
+
+.content .normallist li {
+     font: normal 13px/1 Verdana
+ }
+
+.descr {
+    margin-top: 35px;
+    margin-bottom: 45px;
+    margin-left: 5px;
+    text-align: left;
+    vertical-align: top;
+}
+
+.name {
+    max-width: 75%;
+    font-weight: 100;
+}
+
+tt {
+    text-align: left
+}
+
+/*
+-----------
+links
+-----------
+*/
+
+a:link {
+    color: #9a9ef9;
+    text-decoration: none;
+    text-align: left;
+}
+
+a.qa-mark:target:before {
+    content: "***";
+    color: #ff0000;
+}
+
+a:hover {
+    color: #9a9ef9;
+    text-decoration:underline;
+    text-align: left;
+}
+
+a:visited {
+    color: #9a9ef9;
+    text-align: left;
+}
+
+a:visited:hover {
+    color: #9a9ef9;
+    text-align: left;
+}
+
+/*
+-----------
+offline viewing: HTML links display an icon
+-----------
+*/
+
+a[href*="http://"]::before,
+a[href*="ftp://"]::before,
+a[href*="https://"]::before {
+    content: url(../images/ico_out.png);
+    padding-right: 5px;
+}
+
+.video a {
+    background: none;
+}
+
+.flags {
+    text-decoration: none;
+    text-height: 24px;
+}
+
+.flags:target {
+    background-color: #FFFFD6;
+}
+
+/*
+-------------------------------
+NOTE styles
+-------------------------------
+*/
+.admonition {
+    padding: 5px 0 5px 40px;
+    border: #404142 1px solid;
+}
+
+.admonition.note, .admonition.important {
+    background: #353637 3px 6px no-repeat url(../images/ico_note.png);
+}
+
+.admonition.warning {
+    background: #353637 3px 6px no-repeat url(../images/ico_note_attention.png);
+}
+/*
+-------------------------------
+Top navigation
+-------------------------------
+*/
+
+.qtref {
+    display: block;
+    position: relative;
+    height: 15px;
+    z-index: 1;
+    font-size: 11px;
+    padding-right: 10px;
+    float: right;
+}
+
+.naviNextPrevious {
+    clear: both;
+    display: block;
+    position: relative;
+    text-align: right;
+    top: -30px;
+    float: right;
+    height: 20px;
+    z-index: 1;
+    padding-right: 10px;
+    padding-top: 2px;
+    vertical-align: top;
+    margin: 0px;
+}
+
+.naviNextPrevious > a:first-child {
+     background-image: url(../images/btn_prev.png);
+     background-repeat: no-repeat;
+     background-position: left;
+     padding-left: 20px;
+     height: 20px;
+     padding-left: 20px;
+ }
+
+.naviNextPrevious > a:last-child {
+     background-image: url(../images/btn_next.png);
+     background-repeat: no-repeat;
+     background-position: right;
+     padding-right: 20px;
+     height: 20px;
+     margin-left: 30px;
+ }
+
+.naviSeparator { display: none }
+/*
+-----------
+footer and license
+-----------
+*/
+
+.footer {
+    text-align: left;
+    padding-top: 45px;
+    padding-left: 5px;
+    margin-top: 45px;
+    margin-bottom: 45px;
+    font-size: 10px;
+    border-top: 1px solid #404142;
+}
+
+.footer p {
+    line-height: 14px;
+    font-size: 11px;
+    padding: 0;
+    margin: 0;
+}
+
+.footer a[href*="http://"], a[href*="ftp://"], a[href*="https://"] {
+    font-weight: bold;
+}
+
+.footerNavi {
+    width: auto;
+    text-align: right;
+    margin-top: 50px;
+    z-index: 1;
+}
+
+.navigationbar {
+    display: block;
+    position: relative;
+    border-top: 1px solid #404142;
+    border-bottom: 1px solid #404142;
+    background-color: #353637;
+    z-index: 1;
+    height: 20px;
+    padding-left: 7px;
+    margin: 0px;
+    padding-top: 2px;
+    margin-left: -5px;
+    margin-right: -5px;
+}
+
+.navigationbar .first {
+     background: url(../images/home.png);
+     background-position: left;
+     background-repeat: no-repeat;
+     padding-left: 20px;
+ }
+
+.navigationbar ul {
+     margin: 0px;
+     padding: 0px;
+ }
+
+  .navigationbar ul li {
+      list-style-type: none;
+      padding-top: 2px;
+      padding-left: 4px;
+      margin: 0;
+      height: 20px;
+  }
+
+.navigationbar li {
+     float: left
+ }
+
+  .navigationbar li a, .navigationbar td a {
+      display: block;
+      text-decoration: none;
+      background: url(../images/arrow_bc.png);
+      background-repeat: no-repeat;
+      background-position: right;
+      padding-right: 17px;
+  }
+
+table.buildversion {
+      float: right;
+      margin-top: -18px !important;
+}
+
+.navigationbar table {
+      border-radius: 0;
+      border: 0 none;
+      background-color: #F2F2F2;
+      margin: 0;
+}
+
+.navigationbar table td {
+    padding: 0;
+    border: 0 none;
+}
+
+#buildversion {
+    font-style: italic;
+    float: right;
+    margin-right: 5px;
+}
+
+#buildversion a {
+    background: none;
+}
+
+/*
+
+/* table of content
+no display
+*/
+
+/*
+-----------
+headers
+-----------
+*/
+
+@media screen {
+    .title {
+        color: #d0d0d0;
+        font-size: 20px;
+        font-weight: normal;
+        left: 0;
+        padding-bottom: 15px;
+        padding-left: 10px;
+        padding-top: 15px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        background-color: #2E2F30;
+        border-bottom: 1px #404142 solid;
+        font-weight: bold;
+        margin-left: 0px;
+        margin-right: 0px;
+    }
+    .subtitle, .small-subtitle {
+        display: block;
+        clear: left;
+    }
+}
+
+h1 {
+    margin: 0
+}
+
+h2, p.h2 {
+    font: 500 16px/1.2 Arial;
+    font-weight: 100;
+    background-color: #353637;
+    padding: 4px;
+    margin-bottom: 15px;
+    margin-top: 30px;
+    border-top: #404142 1px solid;
+    border-bottom: #404142 1px solid;
+    max-width: 99%;
+}
+
+h2:target {
+    background-color: #F2F3D4;
+}
+
+h3 {
+    font: 500 14px/1.2 Arial;
+    font-weight: 100;
+    text-decoration: underline;
+    margin-bottom: 15px;
+    margin-top: 30px;
+}
+
+h3.fn, span.fn {
+    border-width: 1px;
+    border-style: solid;
+    border-color: #404142;
+    -moz-border-radius: 7px 7px 7px 7px;
+    -webkit-border-radius: 7px 7px 7px 7px;
+    border-radius: 7px 7px 7px 7px;
+    background-color: #353637;
+    word-spacing: 3px;
+    padding: 5px 5px;
+    text-decoration: none;
+    font-weight: bold;
+    max-width: 75%;
+    font-size: 14px;
+    margin: 0px;
+    margin-top: 30px;
+}
+.fngroup h3.fngroupitem {
+    margin-bottom: 5px;
+}
+h3.fn code {
+    float: right;
+}
+h3.fn:target {
+    background-color: #F6F6D6;
+}
+
+.name {
+    color: #d0d0d0
+}
+
+.type {
+    color: #a4a6a8
+}
+
+/*
+-----------------
+table styles
+-----------------
+*/
+
+.table img {
+    border: none;
+    margin-left: 0px;
+    -moz-box-shadow: 0px 0px 0px #2E2F30;
+    -webkit-box-shadow: 0px 0px 0px #2E2F30;
+    box-shadow: 0px 0px 0px #2E2F30;
+}
+
+/* table with border alternative colors*/
+
+table, pre, .LegaleseLeft {
+    -moz-border-radius: 7px 7px 7px 7px;
+    -webkit-border-radius: 7px 7px 7px 7px;
+    border-radius: 7px 7px 7px 7px;
+    background-color: #353637;
+    border: 1px solid #404142;
+    border-collapse: separate;
+    margin-bottom: 25px;
+    margin-left: 15px;
+    font-size: 12px;
+    line-height: 1.2;
+}
+
+ table tr.even {
+     background-color: #2E2F30;
+     color: #a4a6a8;
+ }
+
+ table tr.odd {
+     background-color: #353637;
+     color: #a4a6a8;
+ }
+
+ table tr:target {
+     background-color: #F6F6D6;
+ }
+
+ table thead {
+     text-align: left;
+     padding-left: 20px;
+     background-color: #2E2F30;
+     border-left: none;
+     border-right: none;
+ }
+
+  table thead th {
+      padding-top: 5px;
+      padding-left: 10px;
+      padding-bottom: 5px;
+      border-bottom: 2px solid #404142;
+      padding-right: 10px;
+  }
+
+ table th {
+     text-align: left;
+     padding-left: 20px;
+ }
+
+ table td {
+     padding: 3px 15px 3px 20px;
+     border-bottom: #404142 dotted 1px;
+ }
+
+ table p {
+     margin: 0px
+ }
+
+.LegaleseLeft {
+    font-family: monospace;
+    white-space: pre-wrap;
+}
+/* table bodless & white*/
+
+.borderless {
+    border-radius: 0px 0px 0px 0px;
+    background-color: #2E2F30;
+    border: 1px solid #2E2F30;
+}
+
+.borderless tr {
+     background-color: #2E2F30;
+     color: #d0d0d0;
+ }
+
+.borderless td {
+     border: none;
+     border-bottom: #2E2F30 dotted 1px;
+ }
+
+/*
+-----------
+List
+-----------
+*/
+
+ul {
+    margin-top: 10px;
+}
+
+li {
+    margin-bottom: 10px;
+    padding-left: 8px;
+    list-style: outside;
+    text-align: left;
+}
+
+ ul > li {
+    list-style-type: square;
+ }
+
+ol {
+    margin: 10px;
+    padding: 0;
+}
+
+ol.A > li {
+    list-style-type: upper-alpha;
+}
+
+ol.a > li{
+    list-style-type: lower-alpha;
+}
+
+ol > li {
+     margin-left: 30px;
+     padding-left: 8px;
+     list-style-type: decimal;
+}
+
+ol.A > li {
+    list-style-type: upper-alpha;
+}
+
+ol.a > li {
+    list-style-type: lower-alpha;
+}
+
+ol.i > li {
+    list-style-type: lower-roman;
+}
+
+ol.I > li {
+    list-style-type: upper-roman;
+}
+
+.centerAlign {
+    text-align: left
+}
+
+.cpp, .LegaleseLeft {
+    display: block;
+    margin: 10px;
+    overflow: auto;
+    padding: 20px 20px 20px 20px;
+}
+
+.js {
+    display: block;
+    margin: 10px;
+    overflow: auto;
+    padding: 20px 20px 20px 20px;
+}
+
+.memItemLeft {
+    padding-right: 3px
+}
+
+.memItemRight {
+    padding: 3px 15px 3px 0
+}
+
+.qml {
+    display: block;
+    margin: 10px;
+    overflow: auto;
+    padding: 20px 20px 20px 20px;
+}
+
+.qmlextra {
+    padding-left: 5px;
+    float: right;
+    color: #254117;
+}
+
+.rightAlign {
+    padding: 3px 5px 3px 10px;
+    text-align: right;
+}
+
+.qmldoc {
+    margin-left: 15px
+}
+
+.flowList {
+  padding: 25px
+}
+.flowList dd {
+  display: inline-block;
+  margin-left: 10px;
+  width: 255px;
+  line-height: 1.15em;
+  overflow-x: hidden;
+  text-overflow: ellipsis
+}
+.alphaChar {
+  font-size: 2em;
+  position: relative
+}
+/*
+-----------
+Content table
+-----------
+*/
+
+@media screen {
+    .toc {
+        float: right;
+        clear: right;
+        vertical-align: top;
+        -moz-border-radius: 7px 7px 7px 7px;
+        -webkit-border-radius: 7px 7px 7px 7px;
+        border-radius: 7px 7px 7px 7px;
+        background: #353637;
+        background-position: top;
+        background-repeat: repeat-x;
+        border: 1px solid #404142;
+        padding-left: 5px;
+        padding-bottom: 10px;
+        height: auto;
+        width: 200px;
+        text-align: left;
+        margin-left: 20px;
+        margin-top: 5px;
+    }
+}
+
+
+.toc h3 {
+    text-decoration: none
+}
+
+.toc h3 {
+    font: 500 14px/1.2 Arial;
+    font-weight: 100;
+    padding: 0px;
+    margin: 0px;
+    padding-top: 5px;
+    padding-left: 5px;
+}
+
+.toc ul {
+    padding-left: 10px;
+    padding-right: 5px;
+}
+
+.toc ul li {
+     margin-left: 15px;
+     marker-offset: 0px;
+     margin-bottom: 8px;
+     padding-left: 0px;
+ }
+
+.toc .level1 {
+    border: none
+}
+
+.toc .level2 {
+    border: none;
+    margin-left: 25px;
+}
+
+.level3 {
+    border: none;
+    margin-left: 30px;
+}
+
+.clearfix {
+    clear: both
+}
+
+/*
+-----------
+Landing page
+-----------
+*/
+
+.col-group {
+    white-space: nowrap;
+    vertical-align: top;
+}
+
+
+.landing h2 {
+    background-color: transparent;
+    border: none;
+    margin-bottom: 0px;
+    font-size: 18px;
+}
+
+.landing a, .landing li {
+    font-size: 13px;
+    font-weight: bold !important;
+}
+
+.col-1 {
+    display: inline-block;
+    white-space: normal;
+    width: 70%;
+    height: 100%;
+    float: left;
+}
+
+.col-2 {
+    display: inline-block;
+    white-space: normal;
+    width: 20%;
+    margin-left: 5%;
+    position: relative;
+    top: -20px;
+}
+
+.col-1 h1 {
+     margin: 20px 0 0 0;
+ }
+
+.col-1 h2 {
+    font-size: 18px;
+    font-weight: bold !important;
+}
+
+.landingicons {
+    display: inline-block;
+    width: 100%;
+}
+
+.icons1of3 {
+    display: inline-block;
+    width: 33.3333%;
+    float: left;
+}
+
+.icons1of3 h2, .doc-column h2 {
+    font-size: 15px;
+    margin: 0px;
+    padding: 0px;
+}
+
+div.multi-column {
+    position: relative;
+}
+
+div.multi-column div {
+    display: -moz-inline-box;
+    display: inline-block;
+    vertical-align: top;
+    margin-top: 1em;
+    margin-right: 4em;
+    width: 24em;
+}
+
+.mainContent .video {
+  width:40%;
+  max-width:640px;
+  margin: 15px 0 0 15px;
+  position:relative;
+  display:table
+}
+
+.mainContent .video iframe {
+  width:100%;
+  height:100%;
+  position:absolute;
+  top:0;
+  left:0
+}