From abee9948018b5a5b4c8987c37bd42f7f5979a911 Mon Sep 17 00:00:00 2001 From: Amiee Lo Date: Thu, 26 Mar 2020 19:28:27 -0700 Subject: [PATCH 1/3] changed UI colors for dashboard --- .../Dashboard/Shared/MainLayout.razor | 2 +- .../wwwroot/css/site.css | 143 +++++++++--------- 2 files changed, 72 insertions(+), 73 deletions(-) diff --git a/src/Microsoft.Tye.Hosting/Dashboard/Shared/MainLayout.razor b/src/Microsoft.Tye.Hosting/Dashboard/Shared/MainLayout.razor index 3288d7ce..da1d6e68 100644 --- a/src/Microsoft.Tye.Hosting/Dashboard/Shared/MainLayout.razor +++ b/src/Microsoft.Tye.Hosting/Dashboard/Shared/MainLayout.razor @@ -10,7 +10,7 @@ Tell us what you think!
- About + About
diff --git a/src/Microsoft.Tye.Hosting/wwwroot/css/site.css b/src/Microsoft.Tye.Hosting/wwwroot/css/site.css index f3da6425..c688595a 100644 --- a/src/Microsoft.Tye.Hosting/wwwroot/css/site.css +++ b/src/Microsoft.Tye.Hosting/wwwroot/css/site.css @@ -9,7 +9,7 @@ a, .btn-link { } #bg-info-link{ - background-color: #1a90d4; + background-color: #3d699b; } .btn-primary { color: #fff; @@ -33,92 +33,91 @@ app { flex: 1; } - .main .top-row { - background-color: #303030; - border-bottom: 1px solid #d6d5d5; - justify-content: flex-end; - } +.main .top-row { + background-color:#6b7c8c; + border-bottom: 1px solid #d6d5d5; + justify-content: flex-end; +} - .main .top-row > a, .main .top-row .btn-link { - white-space: nowrap; - margin-left: 1.5rem; - } +.main .top-row > a, .main .top-row .btn-link { + white-space: nowrap; + margin-left: 1.5rem; +} - .main .top-row a:first-child { - overflow: hidden; - text-overflow: ellipsis; - } +.main .top-row a:first-child { + overflow: hidden; + text-overflow: ellipsis; +} .sidebar { - background-image: linear-gradient(180deg, #000 0%, #333 50%); + background-color: #f8f9fa; } - .sidebar .top-row { - background-color: #303030; - } +.sidebar .top-row { + background-color: #6b7c8c; +} - .sidebar .navbar-brand { - font-size: 1.1rem; - } +.sidebar .navbar-brand { + font-size: 1.1rem; +} - .sidebar .oi { - width: 2rem; - font-size: 1.1rem; - vertical-align: text-top; - top: -2px; - } +.sidebar .oi { + width: 2rem; + font-size: 1.1rem; + vertical-align: text-top; + top: -2px; +} - .sidebar .nav-item, top-nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; - } +.sidebar .nav-item, top-nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; +} + +.sidebar .nav-item:first-of-type { + padding-top: 1rem; +} - .sidebar .nav-item:first-of-type { - padding-top: 1rem; - } - - .sidebar .nav-item:last-of-type { - padding-bottom: 1rem; - } - - .sidebar .nav-item a, .top-nav-item a { - color: #d7d7d7; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - background-color: #3371e3; - } - - .sidebar .nav-item a.active, .top-nav-item a.active { - background-color: #0366d6; - color: white; - } - - .sidebar .nav-item a:hover, .top-nav-item a:hover { - background-color: rgba(255,255,255,0.1); - transition: 0.3s; - color: white; - } +.sidebar .nav-item:last-of-type { + padding-bottom: 1rem; +} + +.sidebar .nav-item a, .top-nav-item a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + background-color: #3371e3; +} + +.sidebar .nav-item a.active, .top-nav-item a.active { + background-color: #3d699b; + color: white; +} + +.sidebar .nav-item a:hover, .top-nav-item a:hover { + background-color: rgb(156, 158, 160); + transition: 0.3s; + color: white; +} button.navbar-toggler { color: white; background-color: #303030; } - button.navbar-toggler:hover { - color: #3371e3; - background-color: #3371e3; - transition: 0.3s; - } +button.navbar-toggler:hover { + color: #3371e3; + background-color: #3371e3; + transition: 0.3s; +} .top-nav-item a { padding-left: 2rem; padding-right: 2rem; text-decoration: none; - background-color: #303030; - border: 1px solid rgba(255,255,255,.1); + border: 1px solid #a2a2a2; border-radius: .25rem; } @@ -154,12 +153,12 @@ button.navbar-toggler { z-index: 1000; } - #blazor-error-ui .dismiss { - cursor: pointer; - position: absolute; - right: 0.75rem; - top: 0.5rem; - } +#blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; +} @media (max-width: 767.98px) { .main .top-row:not(.auth) { From 1d09fe119a5b2541e8a09df99acc6f45792c20fa Mon Sep 17 00:00:00 2001 From: Amiee Lo Date: Thu, 26 Mar 2020 19:42:49 -0700 Subject: [PATCH 2/3] updated colors to match when opening logs --- src/Microsoft.Tye.Hosting/wwwroot/css/site.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Microsoft.Tye.Hosting/wwwroot/css/site.css b/src/Microsoft.Tye.Hosting/wwwroot/css/site.css index c688595a..d0c13452 100644 --- a/src/Microsoft.Tye.Hosting/wwwroot/css/site.css +++ b/src/Microsoft.Tye.Hosting/wwwroot/css/site.css @@ -82,13 +82,13 @@ app { } .sidebar .nav-item a, .top-nav-item a { - color: #d7d7d7; + color: white; border-radius: 4px; height: 3rem; display: flex; align-items: center; line-height: 3rem; - background-color: #3371e3; + background-color: #3d699b; } .sidebar .nav-item a.active, .top-nav-item a.active { From 0f0ee3387643741cf9a2ab8d7a77cee504a5360b Mon Sep 17 00:00:00 2001 From: Amiee Lo Date: Thu, 26 Mar 2020 19:47:50 -0700 Subject: [PATCH 3/3] made nav text white --- src/Microsoft.Tye.Hosting/wwwroot/css/site.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Microsoft.Tye.Hosting/wwwroot/css/site.css b/src/Microsoft.Tye.Hosting/wwwroot/css/site.css index d0c13452..169ceb6a 100644 --- a/src/Microsoft.Tye.Hosting/wwwroot/css/site.css +++ b/src/Microsoft.Tye.Hosting/wwwroot/css/site.css @@ -119,6 +119,7 @@ button.navbar-toggler:hover { text-decoration: none; border: 1px solid #a2a2a2; border-radius: .25rem; + color: white; } .content {