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! diff --git a/src/Microsoft.Tye.Hosting/wwwroot/css/site.css b/src/Microsoft.Tye.Hosting/wwwroot/css/site.css index f3da6425..169ceb6a 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,93 +33,93 @@ 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: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:first-of-type { + padding-top: 1rem; +} + +.sidebar .nav-item:last-of-type { + padding-bottom: 1rem; +} + +.sidebar .nav-item a, .top-nav-item a { + color: white; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + background-color: #3d699b; +} + +.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; + color: white; } .content { @@ -154,12 +154,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) {