diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index c5e86ab..f9e67cd 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,5 +1,10 @@ # Changelog +## Version 0.5.0 - Aug 27th 2020 + +- Updated textbox style with rounded conrners and minor transition tweaks. +- Fixed hover on hamburger menu (small screens). + ## Version 0.4.0 - May 19th 2020 - Usability improvements and minor style changes in textboxes. diff --git a/docs/images/index/docfx-screenshot.png b/docs/images/index/docfx-screenshot.png index 18cf5c7..b30773a 100644 Binary files a/docs/images/index/docfx-screenshot.png and b/docs/images/index/docfx-screenshot.png differ diff --git a/docs/images/screenshot-1-shadow.png b/docs/images/screenshot-1-shadow.png deleted file mode 100644 index 0cb3872..0000000 Binary files a/docs/images/screenshot-1-shadow.png and /dev/null differ diff --git a/docs/images/screenshot-1.png b/docs/images/screenshot-1.png deleted file mode 100644 index 7b5ede6..0000000 Binary files a/docs/images/screenshot-1.png and /dev/null differ diff --git a/docs/images/screenshot-2-shadow.png b/docs/images/screenshot-2-shadow.png deleted file mode 100644 index 9f51aa5..0000000 Binary files a/docs/images/screenshot-2-shadow.png and /dev/null differ diff --git a/docs/images/screenshot-2.png b/docs/images/screenshot-2.png deleted file mode 100644 index d2544d6..0000000 Binary files a/docs/images/screenshot-2.png and /dev/null differ diff --git a/docs/index.md b/docs/index.md index 3c466f2..f581569 100644 --- a/docs/index.md +++ b/docs/index.md @@ -7,19 +7,6 @@ The colors were chosen using . ![DocFX Material Site](./images/index/docfx-screenshot.png) -## Usability improvements - -- Highlight on search box - -Search highlights - -
-
- -- Highlight on filter box - -Filter highlights - ## Install 1. Download the source or the zipped file from the [releases](https://github.com/ovasquez/docfx-material/releases). diff --git a/material/styles/main.css b/material/styles/main.css index 165a878..872709b 100644 --- a/material/styles/main.css +++ b/material/styles/main.css @@ -4,11 +4,12 @@ --header-ft-color: #fff; --highlight-light: #5e92f3; --highlight-dark: #003c8f; - --accent-dim: #eee; + --accent-dim: #e0e0e0; + --accent-super-dim: #f3f3f3; --font-color: #34393e; --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); + --search-box-shadow: 0 1px 2px 0 rgba(41, 45, 48, 0.36), 0 1px 3px 1px rgba(41, 45, 48, 0.46); + --transition: 350ms; } body { @@ -128,6 +129,7 @@ article h4 { background-color: var(--header-bg-color); border-bottom: 3px solid transparent; padding-bottom: 12px; + transition: 350ms; } .navbar-inverse .navbar-nav > li > a:focus, @@ -147,15 +149,13 @@ article h4 { .navbar-form .form-control { border: 0; - border-radius: 0; -} - -.navbar-form .form-control:hover { + border-radius: 4px; box-shadow: var(--search-box-shadow); + transition:var(--transition); } -.toc-filter > input:hover { - box-shadow: var(--under-box-shadow); +.navbar-form .form-control:hover { + background-color: var(--accent-dim); } /* NAVBAR TOGGLED (small screens) */ @@ -170,7 +170,7 @@ article h4 { .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover { - background-color: var(--header-ft-color); + background-color: var(--highlight-dark); } /* SIDEBAR */ @@ -196,13 +196,20 @@ article h4 { } .toc-filter { - padding: 10px; + padding: 5px; margin: 0; + box-shadow: var(--card-box-shadow); + transition:var(--transition); +} + +.toc-filter:hover { + background-color: var(--accent-super-dim); } .toc-filter > input { border: none; - border-bottom: 2px solid var(--accent-dim); + background-color: inherit; + transition: inherit; } .toc-filter > .filter-icon {