Support more notice blocks like important, tip and caution

Sphinx supports various notice blocks but the oslosphinx theme
does support only warning and note. openstackdoctheme used by
openstack-manuals project supports 'important', 'tip' and 'caution'
blocks. It would be nice if oslosphinx support these notices.
It reduces confusions on contributors to both types of projects.

Change-Id: I3e1db551b05fa681520763c24e2576f9ad5379d8

3 files changed, 50 insertions, 2 deletions

diff --git a/doc/source/index.rst b/doc/source/index.rst
index 543e0a8..a665e91 100644
--- a/doc/source/index.rst
+++ b/doc/source/index.rst
@@ -20,6 +20,14 @@ Release Notes
 
    history
 
+Development
+===========
+
+.. toctree::
+   :maxdepth: 1
+
+   theme_check
+
 Indices and tables
 ==================
 
diff --git a/doc/source/theme_check.rst b/doc/source/theme_check.rst
new file mode 100644
index 0000000..6ab5563
--- /dev/null
+++ b/doc/source/theme_check.rst
@@ -0,0 +1,25 @@
+===========
+Theme check
+===========
+
+This page is used to check the themes provided by oslosphinx.
+
+.. note::
+
+   A comment with additional information that explains a part of the text.
+
+.. important::
+
+   Something you must be aware of before proceeding.
+
+.. tip::
+
+   An extra but helpful piece of practical advice.
+
+.. Caution::
+
+   Helpful information that prevents the user from making mistakes.
+
+.. Warning::
+
+   Critical information about the risk of data loss or security issues.
diff --git a/oslosphinx/theme/openstack/static/nature.css b/oslosphinx/theme/openstack/static/nature.css
index 060ced8..aa80995 100644
--- a/oslosphinx/theme/openstack/static/nature.css
+++ b/oslosphinx/theme/openstack/static/nature.css
@@ -188,8 +188,8 @@ div.highlight{
 }
 
 div.note {
-    background-color: #eee;
-    border: 1px solid #ccc;
+    background-color: #edf2f7;
+    border: 1px solid #2a4e68;
 }
 
 div.seealso {
@@ -206,6 +206,21 @@ div.warning {
     border: 1px solid #f66;
 }
 
+div.important {
+    background-color: #feffbe;
+    border: 1px solid #d7aa16;
+}
+
+div.caution {
+    background-color: #eee;
+    border: 1px solid #ccc;
+}
+
+div.tip {
+    background-color: #eee;
+    border: 1px solid #ccc;
+}
+
 p.admonition-title {
     display: inline;
 }