Usability improvements and minor style changes in textboxes

docs/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## Version 0.4.0 - May 19th 2020
+
+- Usability improvements and minor style changes in textboxes.
+
+<img src="./images/index/docfx-search.gif" alt="Search highlights" class="small-image"/>
+
+<br/>
+<br/>
+
+<img src="./images/index/docfx-filter.gif" alt="Filter highlights" class="small-image"/>
+
+
 ## Version 0.3.1 - January 13th 2020
 
 - Minor update in styles and shadows.

docs/index.md

@@ -5,7 +5,20 @@ override of the default template so you need to enable both in the `docfx.json`.
 
 The colors were chosen using <https://material.io/tools/color>.
 
-![DocFX Material Site](./images/material-site.png)
+![DocFX Material Site](./images/index/docfx-screenshot.png)
+
+## Usability improvements
+
+- Highlight on search box
+
+<img src="./images/index/docfx-search.gif" alt="Search highlights" class="small-image"/>
+
+<br/>
+<br/>
+
+- Highlight on filter box
+
+<img src="./images/index/docfx-filter.gif" alt="Filter highlights" class="small-image"/>
 
 ## Install
 

material/styles/main.css

@@ -4,8 +4,11 @@
   --header-ft-color: #fff;
   --highlight-light: #5e92f3;
   --highlight-dark: #003c8f;
+  --accent-dim: #eee;
   --font-color: #34393e;
-  --custom-box-shadow: 0 1px 2px 0 rgba(61, 65, 68, 0.06), 0 1px 3px 1px rgba(61, 65, 68, 0.16);
+  --card-box-shadow: 0 1px 2px 0 rgba(61, 65, 68, 0.06), 0 1px 3px 1px rgba(61, 65, 68, 0.16);
+  --under-box-shadow: 0 4px 4px -2px #eee;
+  --search-box-shadow: 0px 0px 5px 0px rgba(255,255,255,1);
 }
 
 body {
@@ -104,9 +107,9 @@ article h4 {
 .navbar {
   border: none;
   /* Both navbars use box-shadow */
-  -webkit-box-shadow: var(--custom-box-shadow);
-  -moz-box-shadow: var(--custom-box-shadow);
-  box-shadow: var(--custom-box-shadow);
+  -webkit-box-shadow: var(--card-box-shadow);
+  -moz-box-shadow: var(--card-box-shadow);
+  box-shadow: var(--card-box-shadow);
 }
 
 .subnav {
@@ -143,8 +146,31 @@ article h4 {
 }
 
 .navbar-form .form-control {
+  border: 0;
+  border-radius: 0;
+}
+
+.navbar-form .form-control:hover {
+  box-shadow: var(--search-box-shadow);
+}
+
+.toc-filter > input:hover {
+  box-shadow: var(--under-box-shadow);
+}
+
+/* NAVBAR TOGGLED (small screens) */
+
+.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
+  border: none;
+}
+.navbar-inverse .navbar-toggle {
+  box-shadow: var(--card-box-shadow);
   border: none;
-  border-radius: 20px;
+}
+
+.navbar-inverse .navbar-toggle:focus,
+.navbar-inverse .navbar-toggle:hover {
+  background-color: var(--header-ft-color);
 }
 
 /* SIDEBAR */
@@ -175,8 +201,8 @@ article h4 {
 }
 
 .toc-filter > input {
-  border: 2px solid #ddd;
-  border-radius: 20px;
+  border: none;
+  border-bottom: 2px solid var(--accent-dim);
 }
 
 .toc-filter > .filter-icon {
@@ -200,7 +226,7 @@ article h4 {
   color: inherit;
   background-color: inherit;
   border: none;
-  box-shadow: var(--custom-box-shadow);
+  box-shadow: var(--card-box-shadow);
 }
 
 .alert > p {
@@ -249,5 +275,25 @@ pre {
   background-color: #fffaef;
   border-radius: 4px;
   border: none;
-  box-shadow: var(--custom-box-shadow);
+  box-shadow: var(--card-box-shadow);
 }
+
+/* STYLE FOR IMAGES */
+
+.article .small-image {
+  margin-top: 15px;
+  box-shadow: var(--card-box-shadow);
+  max-width: 350px;
+}
+
+.article .medium-image {
+  margin-top: 15px;
+  box-shadow: var(--card-box-shadow);
+  max-width: 550px;
+}
+
+.article .large-image {
+  margin-top: 15px;
+  box-shadow: var(--card-box-shadow);
+  max-width: 700px;
+}