opensourcemirror
/
cockpit
mirror of https://github.com/cockpit-project/cockpit.git
1
0
Fork 0
Code Issues Releases Wiki Activity

nav: Adjust color to match PF4's new dark nav 

PatternFly switched to recommending dark navigation based on a study
they performed.

Blog post: https://blog.patternfly.org/patternfly/how-do-different-patternfly-visual-themes-affect-navigation-performance-perception-and-preference/

PDF with results: https://drive.google.com/file/d/1gPfp7GJ8MaImbgaivL8NzlNeucsXUBDw/view

Closes #12896
This commit is contained in:
Garrett LeSage 2019-09-30 18:10:49 +02:00 committed by Martin Pitt
parent e6e158cca1
commit e897018370
3 changed files with 111 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
pkg/lib/page.css
View File

@ -293,24 +293,24 @@ input[type=number] {
--color-ct-brick-gold : #ffa763;
--color-ct-brick-red : #a53131;
--color-ct-nav : #292e34;
--color-ct-nav-sub : var(--pf-global--BackgroundColor--100);
--color-ct-nav-text : var(--pf-global--Color--100);
--color-ct-nav-active : var(--pf-global--BackgroundColor--150);
--color-ct-nav-active-text: var(--color-link);
--color-ct-nav-hover : var(--pf-global--BackgroundColor--150);
--color-ct-nav-hover-text : var(--color-link);
--color-ct-nav : #1b1b1b;
--color-ct-nav-sub : var(--pf-global--BackgroundColor--dark-300);
--color-ct-nav-text : var(--pf-global--BackgroundColor--light-300);
--color-ct-nav-active : var(--pf-global--BackgroundColor--dark-400);
--color-ct-nav-active-text: var(--pf-global--BackgroundColor--light-100);
--color-ct-nav-hover : var(--pf-global--BackgroundColor--dark-400);
--color-ct-nav-hover-text: var(--pf-global--BackgroundColor--light-100);
--color-ct-nav-border : var(--pf-global--BorderColor--100);
--color-ct-nav-cover-up : linear-gradient(to bottom, var(--color-ct-nav-sub), rgba(255,255,255, 0));
--color-ct-nav-cover-down : linear-gradient(to top, var(--color-ct-nav-sub), rgba(255,255,255, 0));
--color-ct-nav-cover-up : linear-gradient(to bottom, var(--color-ct-nav-sub), rgba(21,21,21, 0));
--color-ct-nav-cover-down : linear-gradient(to top, var(--color-ct-nav-sub), rgba(21,21,21, 0));
--color-ct-nav-main : var(--pf-global--BorderColor--300);
--color-ct-nav-main : #1b1b1b;
--color-ct-nav-main-text : var(--color-ct-nav-text);
--color-ct-nav-main-border : var(--pf-global--BorderColor--100);
--color-ct-nav-main-border : var(--pf-global--BackgroundColor--dark-200);
--color-ct-nav-main-active : var(--color-ct-nav-sub);
--color-ct-nav-main-active-text: var(--color-link);
--color-ct-nav-main-hover : var(--pf-global--BackgroundColor--200);
--color-ct-nav-main-hover-text : var(--pf-global--Color--300);
--color-ct-nav-main-active-text: var(--color-ct-nav-active-text);
--color-ct-nav-main-hover : var(--color-ct-nav-hover);
--color-ct-nav-main-hover-text : var(--color-ct-nav-hover-text);
--color-border: var(--pf-global--BorderColor--100);

50
pkg/shell/shell.less
View File

@ -943,8 +943,6 @@ It is less bad than using !important, at least.
font-size: var(--pf-global--FontSize--md);
margin: 0;
color: var(--pf-global--Color--light-100) !important;
/* Force better text rendering for dark bg */
text-shadow: 0 0;
}
.credential-unlocked {
@ -985,14 +983,44 @@ It is less bad than using !important, at least.
}
}
#host-apps .fa-info-circle {
color: var(--pf-global--info-color--100);
}
// Add color to nav icons
#host-apps .list-group-item {
.fa-info-circle {
color: var(--pf-global--info-color--100);
}
#host-apps .fa-exclamation-triangle {
color: var(--pf-global--warning-color--100);
}
.fa-exclamation-triangle {
color: var(--pf-global--warning-color--100);
}
#host-apps .fa-exclamation-circle {
color: var(--pf-global--danger-color--100);
}
.fa-exclamation-circle {
color: #f54f42;
}
// Add a background to shine through the icon's gaps
// (for better contrast, even when hovering / selected)
.fa {
// Set position for the icon sandwiching
position: relative;
// Add a shadow around the icon
text-shadow: 1px 0 1px var(--color-ct-nav), 0 1px 1px var(--color-ct-nav), -1px 0 1px var(--color-ct-nav), 0 -1px 1px var(--color-ct-nav);
// Move the icon up the stack
&::before {
z-index: 1;
position: relative;
}
// Fill the interior gaps
&::after {
position: absolute;
content: '';
background-color: var(--color-ct-nav);
border-radius: 3px;
top: 3px;
right: 5px;
bottom: 3px;
left: 5px;
}
}
}

109
pkg/shell/switcher.less
View File

@ -18,12 +18,8 @@
.area-ct-subnav {
background: var(--color-ct-nav-sub);
border-right: 1px solid var(--color-ct-nav-border);
-webkit-flex: none;
flex: none;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
position: relative;
z-index: 2;
@ -33,51 +29,80 @@
padding-left: 0;
padding-right: 0;
font-weight: bold;
color: var(--color-ct-nav-active-text);
background: var(--pf-global--BackgroundColor--dark-400);
}
> .search {
margin: 0.5rem 1rem;
margin: 1rem 1.5rem;
> input {
border: none;
> input.form-control {
background: var(--color-ct-nav);
border: 0 solid var(--color-ct-nav);
border-width: 2px 0;
color: var(--color-ct-nav-main-text) !important;
padding: 0 0.5rem 0 32px !important;
transition: var(--pf-global--Transition);
&::placeholder {
color: var(--color-ct-nav-text);
opacity: 0.8;
}
&:focus {
border-bottom-color: var(--color-ct-nav-main-text);
}
}
> span {
color: var(--color-subtle-copy);
> .form-control-feedback {
color: var(--color-ct-nav-text);
opacity: 0.7;
margin: 0.5rem;
right: auto;
width: 16px;
height: 16px;
left: 0;
transition: var(--pf-global--Transition);
}
&:after {
content: "";
position: absolute;
margin: 0 0.5rem;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--color-border);
> input.form-control:focus ~ .form-control-feedback {
color: var(--color-ct-nav-active-text);
opacity: 1;
}
}
.hint {
font-size: var(--pf-global--FontSize--xs);
font-size: var(--pf-global--FontSize--sm);
}
.list-group-item .hint {
opacity: 0.8;
}
.link-button.hint {
color: var(--pf-global--active-color--300);
}
.list-group {
border: none;
margin: 0.5rem 0;
margin: 1rem 0;
position: relative;
&:first-child {
margin-top: 0;
}
+ .list-group {
padding-top: calc(0.5rem + 1px);
padding-top: calc(1rem + 1px);
&::before {
border-top: 1px solid var(--pf-global--BorderColor--100);
border-top: 1px solid var(--pf-global--BorderColor--200);
content: '';
position: absolute;
top: 0;
right: 1.5rem;
left: 1.5rem;
opacity: 0.75;
}
}
}
@ -93,45 +118,43 @@
border: none;
z-index: 1;
a {
> a {
padding: 0.5rem 1.5rem;
display: block;
color: var(--color-ct-nav-text);
text-decoration: none;
}
&:focus,
> a:focus,
&:hover,
&.active {
/* Move hover & selected above overflow fade */
z-index: 3;
}
&:focus,
&:hover {
> a:focus,
&:hover > a {
background: var(--color-ct-nav-hover);
a {
color: var(--color-ct-nav-hover-text);
}
color: var(--color-ct-nav-hover-text);
}
&.active {
background: var(--color-ct-nav-active);
a {
> a {
color: var(--color-ct-nav-active-text);
font-weight: 500;
font-weight: 700;
}
}
}
.disabled {
color: var(--color-subtle-copy);
color: var(--color-ct-nav-text);
font-size: var(--pf-global--FontSize--sm);
&:focus,
&:hover {
color: var(--color-ct-nav-text);
background-color: initial;
cursor: default;
}
@ -169,7 +192,6 @@
.machine-dropdown {
position: relative;
-webkit-flex: none;
flex: none;
&:after {
@ -191,11 +213,11 @@
}
.host-apps {
-webkit-flex: 1 1 0;
flex: 1 1 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
scrollbar-color: var(--pf-global--Color--400) var(--pf-global--BackgroundColor--dark-200)
}
.area-ct-content {
@ -211,13 +233,11 @@
/* Desktop navigation */
@media screen and (min-width: 768px) {
.area-ct-navbar {
-webkit-flex: none;
flex: none;
min-width: 100%;
}
.area-ct-content {
-webkit-flex: auto;
flex: auto;
position: relative;
@ -242,14 +262,11 @@
.area-ct-body {
position: relative;
-webkit-flex: auto;
flex: auto;
z-index: 3;
display: -webkit-flex;
display: flex;
/* IE11 needs to have the flex-basis set to page max,
else it stretches too tall */
-webkit-flex-basis: 100%;
flex-basis: 100%;
}
@ -261,7 +278,6 @@
}
.nav-sidebar-wrap {
-webkit-flex: none;
flex: none;
z-index: 3;
@ -396,11 +412,9 @@
}
.area-ct-layout {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
-webkit-flex-flow: column;
flex-flow: column;
align-content: stretch;
}
@ -416,15 +430,11 @@
/* Mobile navigation */
@media screen and (max-width: 767px) {
/* Use native mobile fonts (when available) for nav & menu text */
.area-ct-navbar, .area-ct-body {
font-family: roboto, san francisco, helvetica light, noto, helvetica, sans-serif;
font-size: 14px;
align-content: stretch;
align-items: stretch;
a {
font-size: 14px !important;
padding: 12px 15px;
}
}
@ -587,11 +597,9 @@
> .list-group {
position: relative;
display: -webkit-flex;
display: flex;
li {
-webkit-flex: auto;
flex: auto;
}
}
@ -647,6 +655,7 @@
a {
background: var(--color-ct-nav-sub) !important;
font-weight: 600;
&:before {
bottom: 0 !important;
@ -709,7 +718,6 @@
}
.area-ct-subnav {
display: -webkit-flex !important;
display: flex !important;
align-self: end;
grid-area: navmenu;
@ -740,7 +748,6 @@
}
.host-apps {
-webkit-flex: auto;
flex: auto;
max-height: 100%;
}