|
@@ -16,6 +16,7 @@
|
|
|
limitations under the License.
|
|
limitations under the License.
|
|
|
*/
|
|
*/
|
|
|
@import (reference) "cui/colors.less";
|
|
@import (reference) "cui/colors.less";
|
|
|
|
|
+@import (reference) "hue-attributes.less";
|
|
|
@import "hue-assist.less";
|
|
@import "hue-assist.less";
|
|
|
|
|
|
|
|
html {
|
|
html {
|
|
@@ -65,7 +66,7 @@ body {
|
|
|
display: -ms-flexbox;
|
|
display: -ms-flexbox;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
- background-color: #338BB8;
|
|
|
|
|
|
|
+ background-color: @hue-primary-color-dark;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
z-index: 1049;
|
|
z-index: 1049;
|
|
|
}
|
|
}
|
|
@@ -105,10 +106,10 @@ body {
|
|
|
width: 400px;
|
|
width: 400px;
|
|
|
right: 10px;
|
|
right: 10px;
|
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
|
- border-radius: 2px;
|
|
|
|
|
- background-color: #FFF;
|
|
|
|
|
- -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
|
|
|
|
|
- box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
|
|
|
|
|
|
|
+ border-radius: @hue-panel-border-radius;
|
|
|
|
|
+ background-color: @cui-white;
|
|
|
|
|
+
|
|
|
|
|
+ .hue-box-shadow-top;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.notification-history {
|
|
.notification-history {
|
|
@@ -144,43 +145,27 @@ body {
|
|
|
background-image: none;
|
|
background-image: none;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
-
|
|
|
|
|
- -webkit-transition-duration: 0.2s;
|
|
|
|
|
- -mos-transition-duration: 0.2s;
|
|
|
|
|
- -ms-transition-duration: 0.2s;
|
|
|
|
|
- transition-duration: 0.2s;
|
|
|
|
|
- -webkit-transition-property: background-color, color;
|
|
|
|
|
- -moz-transition-property: background-color, color;
|
|
|
|
|
- -ms-transition-property: background-color, color;
|
|
|
|
|
- transition-property: background-color, color;
|
|
|
|
|
|
|
+ .hue-ease-transition(~"background-color, color");
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.compose-action .btn:hover {
|
|
.compose-action .btn:hover {
|
|
|
background-color: rgba(240, 240, 240, 0.92);
|
|
background-color: rgba(240, 240, 240, 0.92);
|
|
|
- color: #338BB8;
|
|
|
|
|
|
|
+ color: @hue-primary-color-dark;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.jobs-badge {
|
|
.jobs-badge {
|
|
|
- color: #338BB8;
|
|
|
|
|
|
|
+ color: @hue-primary-color-dark;
|
|
|
background-color: #f9f9f9;
|
|
background-color: #f9f9f9;
|
|
|
float: right;
|
|
float: right;
|
|
|
margin-left: 4px;
|
|
margin-left: 4px;
|
|
|
padding: 1px 5px;
|
|
padding: 1px 5px;
|
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
-
|
|
|
|
|
- -webkit-transition-duration: 0.2s;
|
|
|
|
|
- -mos-transition-duration: 0.2s;
|
|
|
|
|
- -ms-transition-duration: 0.2s;
|
|
|
|
|
- transition-duration: 0.2s;
|
|
|
|
|
- -webkit-transition-property: background-color, color;
|
|
|
|
|
- -moz-transition-property: background-color, color;
|
|
|
|
|
- -ms-transition-property: background-color, color;
|
|
|
|
|
- transition-property: background-color, color;
|
|
|
|
|
|
|
+ .hue-ease-transition(~"background-color, color");
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.compose-action .btn:hover .jobs-badge {
|
|
.compose-action .btn:hover .jobs-badge {
|
|
|
- background-color: #338BB8;
|
|
|
|
|
|
|
+ background-color: @hue-primary-color-dark;
|
|
|
color: rgba(240, 240, 240, 0.92);
|
|
color: rgba(240, 240, 240, 0.92);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -210,7 +195,7 @@ body {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.compose-action .dropdown-menu i {
|
|
.compose-action .dropdown-menu i {
|
|
|
- color: #338BB8;
|
|
|
|
|
|
|
+ color: @hue-primary-color-dark;
|
|
|
height: 18px;
|
|
height: 18px;
|
|
|
width: 18px;
|
|
width: 18px;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
@@ -290,7 +275,7 @@ body {
|
|
|
-ms-flex: 0;
|
|
-ms-flex: 0;
|
|
|
flex: 0;
|
|
flex: 0;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
- background-color: #FFF;
|
|
|
|
|
|
|
+ background-color: @cui-white;
|
|
|
min-width: 250px;
|
|
min-width: 250px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -327,7 +312,7 @@ body {
|
|
|
|
|
|
|
|
.left-nav {
|
|
.left-nav {
|
|
|
position:absolute;
|
|
position:absolute;
|
|
|
- background-color: #338BB8;
|
|
|
|
|
|
|
+ background-color: @hue-primary-color-dark;
|
|
|
color: #f9f9f9;
|
|
color: #f9f9f9;
|
|
|
z-index: 1048;
|
|
z-index: 1048;
|
|
|
top: 0;
|
|
top: 0;
|
|
@@ -361,11 +346,8 @@ body {
|
|
|
|
|
|
|
|
.left-nav-menu li:not(.header) {
|
|
.left-nav-menu li:not(.header) {
|
|
|
background-color: transparent;
|
|
background-color: transparent;
|
|
|
- -webkit-transition: 0.4s background-color;
|
|
|
|
|
- -moz-transition: 0.4s background-color;
|
|
|
|
|
- -ms-transition: 0.4s background-color;
|
|
|
|
|
- transition: 0.4s background-color;
|
|
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
|
+ .hue-ease-transition(background-color);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.left-nav-menu li:not(.header):hover {
|
|
.left-nav-menu li:not(.header):hover {
|
|
@@ -376,10 +358,7 @@ body {
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
letter-spacing: 1px;
|
|
letter-spacing: 1px;
|
|
|
color: #f9f9f9;
|
|
color: #f9f9f9;
|
|
|
- -webkit-transition: 0.4s color;
|
|
|
|
|
- -moz-transition: 0.4s color;
|
|
|
|
|
- -ms-transition: 0.4s color;
|
|
|
|
|
- transition: 0.4s color;
|
|
|
|
|
|
|
+ .hue-ease-transition(color);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.left-nav-menu li:not(.header):hover a {
|
|
.left-nav-menu li:not(.header):hover a {
|
|
@@ -392,8 +371,7 @@ body {
|
|
|
|
|
|
|
|
.left-nav-visible {
|
|
.left-nav-visible {
|
|
|
width: 200px;
|
|
width: 200px;
|
|
|
- -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.18);
|
|
|
|
|
- box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
|
|
|
|
|
|
|
+ .hue-box-shadow-top;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.left-nav-drop {
|
|
.left-nav-drop {
|
|
@@ -402,7 +380,7 @@ body {
|
|
|
bottom: 0;
|
|
bottom: 0;
|
|
|
left: 0;
|
|
left: 0;
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
- background-color: #338BB8;
|
|
|
|
|
|
|
+ background-color: @hue-primary-color-dark;
|
|
|
width: 0;
|
|
width: 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -423,11 +401,8 @@ body {
|
|
|
|
|
|
|
|
.inactive-action,
|
|
.inactive-action,
|
|
|
.inactive-action a {
|
|
.inactive-action a {
|
|
|
- -webkit-transition: color 0.2s ease;
|
|
|
|
|
- -moz-transition: color 0.2s ease;
|
|
|
|
|
- -ms-transition: color 0.2s ease;
|
|
|
|
|
- transition: color 0.2s ease;
|
|
|
|
|
color: #999;
|
|
color: #999;
|
|
|
|
|
+ .hue-ease-transition(color);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.inactive-action:hover {
|
|
.inactive-action:hover {
|
|
@@ -441,7 +416,7 @@ body {
|
|
|
|
|
|
|
|
.inactive-action:not(.disabled):hover,
|
|
.inactive-action:not(.disabled):hover,
|
|
|
.inactive-action:not(.disabled):hover > a {
|
|
.inactive-action:not(.disabled):hover > a {
|
|
|
- color: #338bb8 !important;
|
|
|
|
|
|
|
+ color: @hue-primary-color-dark !important;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.inactive-action:focus {
|
|
.inactive-action:focus {
|
|
@@ -449,15 +424,12 @@ body {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.blue {
|
|
.blue {
|
|
|
- color: #338BB8 !important;
|
|
|
|
|
|
|
+ color: @hue-primary-color-dark !important;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.black-link {
|
|
.black-link {
|
|
|
color: #444;
|
|
color: #444;
|
|
|
- -webkit-transition: color 0.2s ease;
|
|
|
|
|
- -moz-transition: color 0.2s ease;
|
|
|
|
|
- -ms-transition: color 0.2s ease;
|
|
|
|
|
- transition: color 0.2s ease;
|
|
|
|
|
|
|
+ .hue-ease-transition(color);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.black-link:active,
|
|
.black-link:active,
|
|
@@ -467,7 +439,7 @@ body {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.black-link:hover {
|
|
.black-link:hover {
|
|
|
- color: #338BB8;
|
|
|
|
|
|
|
+ color: @hue-primary-color-dark;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
h1 {
|
|
h1 {
|
|
@@ -552,7 +524,7 @@ a:visited {
|
|
|
.hamburger-inner::before, .hamburger-inner::after {
|
|
.hamburger-inner::before, .hamburger-inner::after {
|
|
|
width: 24px;
|
|
width: 24px;
|
|
|
height: 3px;
|
|
height: 3px;
|
|
|
- background-color: #FFF;
|
|
|
|
|
|
|
+ background-color: @cui-white;
|
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
transition-property: -webkit-transform;
|
|
transition-property: -webkit-transform;
|
|
@@ -602,10 +574,9 @@ a:visited {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-context-menu, .hue-popover-bottom {
|
|
.hue-context-menu, .hue-popover-bottom {
|
|
|
- border-radius: 2px;
|
|
|
|
|
- background-color: #FFF;
|
|
|
|
|
- -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.18);
|
|
|
|
|
- box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
|
|
|
|
|
|
|
+ border-radius: @hue-panel-border-radius;
|
|
|
|
|
+ background-color: @cui-white;
|
|
|
|
|
+ .hue-box-shadow-top;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-popover {
|
|
.hue-popover {
|
|
@@ -618,7 +589,7 @@ a:visited {
|
|
|
left: 0;
|
|
left: 0;
|
|
|
z-index: 1060;
|
|
z-index: 1060;
|
|
|
padding: 1px;
|
|
padding: 1px;
|
|
|
- background-color: #fff;
|
|
|
|
|
|
|
+ background-color: @cui-white;
|
|
|
-webkit-background-clip: padding-box;
|
|
-webkit-background-clip: padding-box;
|
|
|
background-clip: padding-box;
|
|
background-clip: padding-box;
|
|
|
border: 1px solid transparent;
|
|
border: 1px solid transparent;
|
|
@@ -632,7 +603,7 @@ a:visited {
|
|
|
bottom: -6px;
|
|
bottom: -6px;
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
margin-left: -6px;
|
|
margin-left: -6px;
|
|
|
- border-top-color: #338BB8;
|
|
|
|
|
|
|
+ border-top-color: @hue-primary-color-dark;
|
|
|
border-bottom-width: 0;
|
|
border-bottom-width: 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -640,7 +611,7 @@ a:visited {
|
|
|
bottom: 1px;
|
|
bottom: 1px;
|
|
|
margin-left: -3px;
|
|
margin-left: -3px;
|
|
|
content: "";
|
|
content: "";
|
|
|
- border-top-color: #338BB8;
|
|
|
|
|
|
|
+ border-top-color: @hue-primary-color-dark;
|
|
|
border-bottom-width: 0;
|
|
border-bottom-width: 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -652,7 +623,7 @@ a:visited {
|
|
|
top: 50%;
|
|
top: 50%;
|
|
|
left: -6px;
|
|
left: -6px;
|
|
|
margin-top: -6px;
|
|
margin-top: -6px;
|
|
|
- border-right-color: #338BB8;
|
|
|
|
|
|
|
+ border-right-color: @hue-primary-color-dark;
|
|
|
border-left-width: 0;
|
|
border-left-width: 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -660,7 +631,7 @@ a:visited {
|
|
|
bottom: -3px;
|
|
bottom: -3px;
|
|
|
left: 1px;
|
|
left: 1px;
|
|
|
content: "";
|
|
content: "";
|
|
|
- border-right-color: #338BB8;
|
|
|
|
|
|
|
+ border-right-color: @hue-primary-color-dark;
|
|
|
border-left-width: 0;
|
|
border-left-width: 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -673,7 +644,7 @@ a:visited {
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
margin-left: -6px;
|
|
margin-left: -6px;
|
|
|
border-top-width: 0;
|
|
border-top-width: 0;
|
|
|
- border-bottom-color: #338BB8;
|
|
|
|
|
|
|
+ border-bottom-color: @hue-primary-color-dark;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-popover.hue-popover-bottom .hue-popover-arrow::after {
|
|
.hue-popover.hue-popover-bottom .hue-popover-arrow::after {
|
|
@@ -681,7 +652,7 @@ a:visited {
|
|
|
margin-left: -3px;
|
|
margin-left: -3px;
|
|
|
content: "";
|
|
content: "";
|
|
|
border-top-width: 0;
|
|
border-top-width: 0;
|
|
|
- border-bottom-color: #338BB8;
|
|
|
|
|
|
|
+ border-bottom-color: @hue-primary-color-dark;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-popover.hue-popover-left {
|
|
.hue-popover.hue-popover-left {
|
|
@@ -693,7 +664,7 @@ a:visited {
|
|
|
right: -6px;
|
|
right: -6px;
|
|
|
margin-top: -3px;
|
|
margin-top: -3px;
|
|
|
border-right-width: 0;
|
|
border-right-width: 0;
|
|
|
- border-left-color: #338BB8;
|
|
|
|
|
|
|
+ border-left-color: @hue-primary-color-dark;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-popover.hue-popover-left .hue-popover-arrow::after {
|
|
.hue-popover.hue-popover-left .hue-popover-arrow::after {
|
|
@@ -701,7 +672,7 @@ a:visited {
|
|
|
bottom: -3px;
|
|
bottom: -3px;
|
|
|
content: "";
|
|
content: "";
|
|
|
border-right-width: 0;
|
|
border-right-width: 0;
|
|
|
- border-left-color: #338BB8;
|
|
|
|
|
|
|
+ border-left-color: @hue-primary-color-dark;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-popover-title {
|
|
.hue-popover-title {
|
|
@@ -710,7 +681,7 @@ a:visited {
|
|
|
padding: 6px 10px;
|
|
padding: 6px 10px;
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
font-size: 0.9rem;
|
|
font-size: 0.9rem;
|
|
|
- background-color: #fff;
|
|
|
|
|
|
|
+ background-color: @cui-white;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-popover-title:empty {
|
|
.hue-popover-title:empty {
|
|
@@ -731,24 +702,21 @@ a:visited {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-popover-top {
|
|
.hue-popover-top {
|
|
|
- border-radius: 2px;
|
|
|
|
|
- background-color: #FFF;
|
|
|
|
|
- -webkit-box-shadow: 0 -2px 8px rgba(0,0,0,.18);
|
|
|
|
|
- box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.18), 0 -2px 8px 0 rgba(0, 0, 0, 0.13);
|
|
|
|
|
|
|
+ border-radius: @hue-panel-border-radius;
|
|
|
|
|
+ background-color: @cui-white;
|
|
|
|
|
+ .hue-box-shadow-bottom;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-popover-right {
|
|
.hue-popover-right {
|
|
|
- border-radius: 2px;
|
|
|
|
|
- background-color: #FFF;
|
|
|
|
|
- -webkit-box-shadow: 2px 0 8px rgba(0,0,0,.18);
|
|
|
|
|
- box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.18), 2px 0 8px 0 rgba(0, 0, 0, 0.13);
|
|
|
|
|
|
|
+ border-radius: @hue-panel-border-radius;
|
|
|
|
|
+ background-color: @cui-white;
|
|
|
|
|
+ .hue-box-shadow-right;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-popover-left {
|
|
.hue-popover-left {
|
|
|
- border-radius: 2px;
|
|
|
|
|
- background-color: #FFF;
|
|
|
|
|
- -webkit-box-shadow: -2px 0 8px rgba(0,0,0,.18);
|
|
|
|
|
- box-shadow: -2px 0 6px 0 rgba(0, 0, 0, 0.18), -2px 0 8px 0 rgba(0, 0, 0, 0.13);
|
|
|
|
|
|
|
+ border-radius: @hue-panel-border-radius;
|
|
|
|
|
+ background-color: @cui-white;
|
|
|
|
|
+ .hue-box-shadow-left;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-inner-drop-down {
|
|
.hue-inner-drop-down {
|
|
@@ -777,7 +745,7 @@ a:visited {
|
|
|
text-decoration: none;
|
|
text-decoration: none;
|
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
- transition: background-color .3s;
|
|
|
|
|
|
|
+ .hue-ease-transition(background-color);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-context-menu > li > a {
|
|
.hue-context-menu > li > a {
|
|
@@ -792,7 +760,7 @@ a:visited {
|
|
|
text-decoration: none;
|
|
text-decoration: none;
|
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
- transition: background-color .3s;
|
|
|
|
|
|
|
+ .hue-ease-transition(background-color);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-context-menu > li > .disabled {
|
|
.hue-context-menu > li > .disabled {
|
|
@@ -814,7 +782,7 @@ a:visited {
|
|
|
.hue-inner-drop-down > li.active,
|
|
.hue-inner-drop-down > li.active,
|
|
|
.hue-context-menu > li.active,
|
|
.hue-context-menu > li.active,
|
|
|
.hue-context-menu > li > a:not(.disabled):hover {
|
|
.hue-context-menu > li > a:not(.disabled):hover {
|
|
|
- background-color: #DBE8F1;
|
|
|
|
|
|
|
+ background-color: @hue-primary-color-light;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hue-context-menu > li > .disabled > i {
|
|
.hue-context-menu > li > .disabled > i {
|