浏览代码

HUE-6077 [frontend] Unify colors throughout

Johan Ahlen 8 年之前
父节点
当前提交
5c876f8

+ 1 - 1
desktop/core/src/desktop/static/desktop/css/httperrors.css

@@ -14,4 +14,4 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 See the License for the specific language governing permissions and
 limitations under the License.
 limitations under the License.
- */#httperror .error-code{margin:0;padding-bottom:30px;color:#CCC;text-align:center;font-weight:200;font-size:150px;line-height:150px}#httperror .error-box{padding:20px 35px 20px;margin-bottom:50px}
+ */#httperror .error-code{margin:0;padding-bottom:30px;color:#C8C8C8;text-align:center;font-weight:200;font-size:150px;line-height:150px}#httperror .error-box{padding:20px 35px 20px;margin-bottom:50px}

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/login.css


+ 1 - 1
desktop/core/src/desktop/static/desktop/less/components/hue-clearable.less

@@ -18,7 +18,7 @@
 
 
 .clearable {
 .clearable {
   background: url(/static/desktop/art/clearField.png) no-repeat right -10px center;
   background: url(/static/desktop/art/clearField.png) no-repeat right -10px center;
-  border: 1px solid #999;
+  border: 1px solid @cui-gray-600;
   padding: 3px 18px 3px 4px;
   padding: 3px 18px 3px 4px;
   border-radius: 3px;
   border-radius: 3px;
 }
 }

+ 3 - 3
desktop/core/src/desktop/static/desktop/less/components/hue-demi-modal.less

@@ -26,7 +26,7 @@
   padding: 0;
   padding: 0;
   background-color: @cui-white;
   background-color: @cui-white;
   min-height: 210px;
   min-height: 210px;
-  border: 1px solid #CCC;
+  border: 1px solid @cui-gray-400;
   -webkit-border-bottom-right-radius: 0px;
   -webkit-border-bottom-right-radius: 0px;
   -webkit-border-bottom-left-radius: 0px;
   -webkit-border-bottom-left-radius: 0px;
   -moz-border-radius-bottomright: 0px;
   -moz-border-radius-bottomright: 0px;
@@ -45,7 +45,7 @@
 
 
   & .modal-header {
   & .modal-header {
     padding: 9px 15px;
     padding: 9px 15px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid @cui-gray-100;
   }
   }
 
 
   & .modal-header .close {
   & .modal-header .close {
@@ -81,5 +81,5 @@
 }
 }
 
 
 .demi-modal-chevron:hover {
 .demi-modal-chevron:hover {
-  background-color: #F6F6F6;
+  background-color: @cui-gray-050;
 }
 }

+ 4 - 4
desktop/core/src/desktop/static/desktop/less/components/hue-filechooser.less

@@ -19,7 +19,7 @@
 .jHueFilechooserActions {
 .jHueFilechooserActions {
   margin-top: 14px;
   margin-top: 14px;
   padding-top: 10px;
   padding-top: 10px;
-  border-top: 1px dashed #EEEEEE;
+  border-top: 1px dashed @cui-gray-100;
 }
 }
 
 
 .pathChooser, .pathChooserKo, .pathFolderChooserKo {
 .pathChooser, .pathChooserKo, .pathFolderChooserKo {
@@ -36,14 +36,14 @@
 }
 }
 
 
 .filechooser-tree .editable-breadcrumbs:hover {
 .filechooser-tree .editable-breadcrumbs:hover {
-  background-color: #F0F0F0;
+  background-color: @cui-gray-050;
 }
 }
 
 
 .filechooser-tree .editable-breadcrumb-input {
 .filechooser-tree .editable-breadcrumb-input {
   margin-left: 12px;
   margin-left: 12px;
   margin-bottom: 0;
   margin-bottom: 0;
   border-radius: 2px;
   border-radius: 2px;
-  border: 1px solid #EEE;
+  border: 1px solid @cui-gray-100;
   -webkit-box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   box-shadow: none;
@@ -56,5 +56,5 @@
 }
 }
 
 
 .filechooser-tree .hueBreadcrumb > li:last-child > a {
 .filechooser-tree .hueBreadcrumb > li:last-child > a {
-  color: #666;
+  color: @cui-gray-800;
 }
 }

+ 2 - 2
desktop/core/src/desktop/static/desktop/less/components/hue-scroll-anchor.less

@@ -17,7 +17,7 @@
 */
 */
 
 
 .hueAnchor {
 .hueAnchor {
-  color: #FFFFFF;
+  color: @cui-white;
   opacity: 0.65;
   opacity: 0.65;
   filter: alpha(opacity=65);
   filter: alpha(opacity=65);
   position: fixed;
   position: fixed;
@@ -25,7 +25,7 @@
   -webkit-border-radius: 6px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   border-radius: 6px;
-  background-color: #333333;
+  background-color: @cui-gray-800;
   padding: 10px;
   padding: 10px;
   padding-left: 14px;
   padding-left: 14px;
   padding-right: 14px;
   padding-right: 14px;

+ 6 - 6
desktop/core/src/desktop/static/desktop/less/components/hue-selector.less

@@ -17,14 +17,14 @@
 */
 */
 
 
 .jHueSelector {
 .jHueSelector {
-  border: 1px solid #F1F1F1;
+  border: 1px solid @cui-gray-050;
   padding: 0;
   padding: 0;
   margin: 0;
   margin: 0;
   width: 300px;
   width: 300px;
 }
 }
 
 
 .jHueSelectorHeader {
 .jHueSelectorHeader {
-  background-color: #F1F1F1;
+  background-color: @cui-gray-050;
   padding: 4px;
   padding: 4px;
 }
 }
 
 
@@ -45,11 +45,11 @@
   width: 100px;
   width: 100px;
   height: 20px;
   height: 20px;
   min-height: 20px;
   min-height: 20px;
-  border: 1px solid #CCCCCC;
+  border: 1px solid @cui-gray-400;
   border-radius: 10px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -moz-border-radius: 10px;
-  color: #555555;
+  color: @cui-gray-800;
   font-size: 10px;
   font-size: 10px;
   padding-left: 4px;
   padding-left: 4px;
 }
 }
@@ -70,7 +70,7 @@
 }
 }
 
 
 .jHueSelector li.selectorDivider {
 .jHueSelector li.selectorDivider {
-  border-bottom: 1px solid #E5E5E5;
+  border-bottom: 1px solid @cui-gray-100;
   padding: 4px;
   padding: 4px;
-  color: #338BB8;
+  color: @hue-primary-color-dark;
 }
 }

+ 3 - 3
desktop/core/src/desktop/static/desktop/less/components/hue-tables.less

@@ -249,7 +249,7 @@ td.details {
 }
 }
 
 
 .paging_full_numbers span.paginate_button {
 .paging_full_numbers span.paginate_button {
-  background-color: #ddd;
+  background-color: @cui-gray-300;
 }
 }
 
 
 .paging_full_numbers span.paginate_button:hover {
 .paging_full_numbers span.paginate_button:hover {
@@ -431,7 +431,7 @@ table.display tr.gradeX {
 }
 }
 
 
 table.display tr.gradeU {
 table.display tr.gradeU {
-  background-color: #ddd;
+  background-color: @cui-gray-300;
 }
 }
 
 
 div.box {
 div.box {
@@ -470,6 +470,6 @@ div.box {
 }
 }
 
 
 .table tr.locked td.unlockable:hover .fa-unlock, .table tr td.lockable:hover .fa-lock {
 .table tr.locked td.unlockable:hover .fa-unlock, .table tr td.lockable:hover .fa-lock {
-  color: #666;
+  color: @cui-gray-800;
   display: block;
   display: block;
 }
 }

+ 4 - 1
desktop/core/src/desktop/static/desktop/less/httperrors.less

@@ -16,11 +16,14 @@
  limitations under the License.
  limitations under the License.
 */
 */
 
 
+@import (reference) "cui/colors.less";
+@import (reference) "hue-mixins.less";
+
 #httperror {
 #httperror {
   .error-code {
   .error-code {
     margin: 0;
     margin: 0;
     padding-bottom: 30px;
     padding-bottom: 30px;
-    color: #CCC;
+    color: @cui-gray-400;
     text-align: center;
     text-align: center;
     font-weight: 200;
     font-weight: 200;
     font-size: 150px;
     font-size: 150px;

+ 5 - 5
desktop/core/src/desktop/static/desktop/less/hue-assist.less

@@ -786,11 +786,11 @@
   height: 100%;
   height: 100%;
 
 
   th {
   th {
-    border-right: 1px solid #e5e5e5;
+    border-right: 1px solid @cui-gray-200;
   }
   }
 
 
   td {
   td {
-    border-right: 1px solid #e5e5e5;
+    border-right: 1px solid @cui-gray-200;
     white-space: nowrap;
     white-space: nowrap;
   }
   }
 
 
@@ -800,16 +800,16 @@
   }
   }
 
 
   .fixed-header-row {
   .fixed-header-row {
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid @cui-gray-200;
   }
   }
 
 
   .fixed-first-cell {
   .fixed-first-cell {
-    border-right: 1px solid #e5e5e5;
+    border-right: 1px solid @cui-gray-200;
     margin-left: -1px;
     margin-left: -1px;
 
 
     thead th {
     thead th {
       height: 23px;
       height: 23px;
-      border-bottom: 1px solid #e5e5e5 !important;
+      border-bottom: 1px solid @cui-gray-200 !important;
     }
     }
   }
   }
 }
 }

+ 7 - 7
desktop/core/src/desktop/static/desktop/less/hue-autocomplete.less

@@ -35,7 +35,7 @@
   max-height: 250px;
   max-height: 250px;
   overflow: hidden;
   overflow: hidden;
 
 
-  border: 1px solid #DDD;
+  border: 1px solid @cui-gray-300;
   border-radius: 2px;
   border-radius: 2px;
   background-color: @cui-white;
   background-color: @cui-white;
   .hue-box-shadow-bottom();
   .hue-box-shadow-bottom();
@@ -53,7 +53,7 @@
 .autocompleter-header {
 .autocompleter-header {
   .flex(0 0 20px);
   .flex(0 0 20px);
   padding: 5px;
   padding: 5px;
-  background-color: #F9F9F9;
+  background-color: @cui-gray-050;
   line-height: 20px;
   line-height: 20px;
   font-size: 14px;
   font-size: 14px;
   overflow: hidden;
   overflow: hidden;
@@ -127,7 +127,7 @@
   right: 0;
   right: 0;
   top: 3px;
   top: 3px;
   padding-right: 3px;
   padding-right: 3px;
-  color: #737373;
+  color: @cui-gray-700;
   white-space: nowrap;
   white-space: nowrap;
 }
 }
 
 
@@ -152,7 +152,7 @@
 
 
 .autocompleter-details-contents .details-attribute,
 .autocompleter-details-contents .details-attribute,
 .autocompleter-details-contents .details-popularity {
 .autocompleter-details-contents .details-popularity {
-  color: #737373;
+  color: @cui-gray-700;
   display: inline-block;
   display: inline-block;
 }
 }
 
 
@@ -169,13 +169,13 @@
 
 
 .autocompleter-details-contents .details-comment {
 .autocompleter-details-contents .details-comment {
   margin-top: 5px;
   margin-top: 5px;
-  color: #737373;
+  color: @cui-gray-700;
   font-style: italic;
   font-style: italic;
 }
 }
 
 
 .autocompleter-details-contents .details-code {
 .autocompleter-details-contents .details-code {
-  background-color: #F9F9F9;
+  background-color: @cui-gray-050;
   padding:3px;
   padding:3px;
-  color: #737373;
+  color: @cui-gray-700;
   font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;direction: ltr;
   font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;direction: ltr;
 }
 }

+ 7 - 7
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -97,7 +97,7 @@
 .hueCheckbox {
 .hueCheckbox {
   width: 15px;
   width: 15px;
   height: 15px;
   height: 15px;
-  border: 1px solid #CCCCCC;
+  border: 1px solid @cui-gray-400;
   margin-top: 2px !important;
   margin-top: 2px !important;
   padding: 0 !important;
   padding: 0 !important;
   display: block !important;
   display: block !important;
@@ -105,17 +105,17 @@
 }
 }
 
 
 .hueCheckbox.disabled {
 .hueCheckbox.disabled {
-  border: 1px solid #DDDDDD;
-  background-color: #FEFEFE;
+  border: 1px solid @cui-gray-300;
+  background-color: @cui-gray-050;
   cursor: not-allowed;
   cursor: not-allowed;
 }
 }
 
 
 .hueCheckbox:hover {
 .hueCheckbox:hover {
-  border-color: #999999;
+  border-color: @cui-gray-600;
 }
 }
 
 
 .hueCheckbox.disabled:hover {
 .hueCheckbox.disabled:hover {
-  border-color: #DDDDDD;
+  border-color: @cui-gray-300;
 }
 }
 
 
 .hueCheckboxText {
 .hueCheckboxText {
@@ -171,8 +171,8 @@
 
 
 .hue-ace-location {
 .hue-ace-location {
   position: absolute;
   position: absolute;
-  background-color: #DBE8F1;
-  border: 1px solid #DBE8F1;
+  background-color: @hue-primary-color-light;
+  border: 1px solid @hue-primary-color-light;
   border-radius: 1px;
   border-radius: 1px;
   margin-left: -1px;
   margin-left: -1px;
   margin-top: -1px;
   margin-top: -1px;

+ 2 - 2
desktop/core/src/desktop/static/desktop/less/hue-helpers.less

@@ -28,13 +28,13 @@
 
 
 pre, .like-pre {
 pre, .like-pre {
   border: none;
   border: none;
-  border-left: 5px solid #DDD;
+  border-left: 5px solid @cui-gray-300;
   border-radius: 0;
   border-radius: 0;
   padding: 9.5px;
   padding: 9.5px;
   margin: 0 0 10px;
   margin: 0 0 10px;
   font-size: 12px;
   font-size: 12px;
   line-height: 20px;
   line-height: 20px;
-  background-color: #f5f5f5;
+  background-color: @cui-gray-050;
   color: #444;
   color: #444;
   font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
   font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
 }
 }

+ 2 - 10
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -444,11 +444,7 @@ a:visited {
   padding: 18px 24px 0 0;
   padding: 18px 24px 0 0;
   display: inline-block;
   display: inline-block;
   cursor: pointer;
   cursor: pointer;
-  transition-property: opacity, -webkit-filter;
-  transition-property: opacity, filter;
-  transition-property: opacity, filter, -webkit-filter;
-  transition-duration: 0.15s;
-  transition-timing-function: linear;
+  .hue-ease-transition(~"opacity, filter, -webkit-filter");
   font: inherit;
   font: inherit;
   color: inherit;
   color: inherit;
   text-transform: none;
   text-transform: none;
@@ -487,11 +483,7 @@ a:visited {
   background-color: @hue-primary-color-dark;
   background-color: @hue-primary-color-dark;
   border-radius: 4px;
   border-radius: 4px;
   position: absolute;
   position: absolute;
-  transition-property: -webkit-transform;
-  transition-property: transform;
-  transition-property: transform, -webkit-transform;
-  transition-duration: 0.15s;
-  transition-timing-function: ease;
+  .hue-ease-transition(~"transform, -webkit-transform");
 }
 }
 
 
 .hamburger-inner::before, .hamburger-inner::after {
 .hamburger-inner::before, .hamburger-inner::after {

+ 11 - 11
desktop/core/src/desktop/static/desktop/less/hue3-extra.less

@@ -32,10 +32,10 @@
 }
 }
 
 
 .subnav {
 .subnav {
-  background-color: #EEEEEE;
-  background-image: -moz-linear-gradient(center top, #F5F5F5 0%, #EEEEEE 100%);
+  background-color: @cui-gray-100;
+  background-image: -moz-linear-gradient(center top, @cui-gray-050 0%, @cui-gray-100 100%);
   background-repeat: repeat-x;
   background-repeat: repeat-x;
-  border: 1px solid #E5E5E5;
+  border: 1px solid @cui-gray-200;
   border-radius: 4px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -moz-border-radius: 4px;
@@ -48,32 +48,32 @@
 }
 }
 
 
 .subnav .nav > li > a {
 .subnav .nav > li > a {
-  border-left: 1px solid #F5F5F5;
+  border-left: 1px solid @cui-gray-050;
   border-radius: 0;
   border-radius: 0;
   -webkit-border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   -moz-border-radius: 0;
-  border-right: 1px solid #E5E5E5;
+  border-right: 1px solid @cui-gray-200;
   margin: 0;
   margin: 0;
   padding-bottom: 11px;
   padding-bottom: 11px;
   padding-top: 11px;
   padding-top: 11px;
 }
 }
 
 
 .subnav .nav > li > a:hover {
 .subnav .nav > li > a:hover {
-  border-right: 1px solid #E5E5E5;
-  border-left: 1px solid #F5F5F5;
+  border-right: 1px solid @cui-gray-200;
+  border-left: 1px solid @cui-gray-050;
 }
 }
 
 
 .subnav .nav > .active > a, .subnav .nav > .active > a:hover {
 .subnav .nav > .active > a, .subnav .nav > .active > a:hover {
-  background-color: #E9E9E9;
+  background-color: @cui-gray-100;
   border-left: 0 none;
   border-left: 0 none;
-  border-right-color: #DDDDDD;
+  border-right-color: @cui-gray-300;
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05) inset;
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05) inset;
-  color: #777777;
+  color: @cui-gray-700;
   padding-left: 13px;
   padding-left: 13px;
 }
 }
 
 
 .subnav .nav > .active > a .caret, .subnav .nav > .active > a:hover .caret {
 .subnav .nav > .active > a .caret, .subnav .nav > .active > a:hover .caret {
-  border-top-color: #777777;
+  border-top-color: @cui-gray-700;
 }
 }
 
 
 .subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a:hover {
 .subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a:hover {

+ 7 - 7
desktop/core/src/desktop/static/desktop/less/login.less

@@ -31,14 +31,14 @@
   display: block;
   display: block;
   margin: auto;
   margin: auto;
   margin-bottom: 50px;
   margin-bottom: 50px;
-  background: #FFFFFF;
+  background: @cui-white;
   border: 1px solid #E0E2E3;
   border: 1px solid #E0E2E3;
   border-radius: 4px;
   border-radius: 4px;
   a {
   a {
     white-space: normal;
     white-space: normal;
   }
   }
   .logo {
   .logo {
-    background-color: #FFF;
+    background-color: @cui-white;
     width: 70px;
     width: 70px;
     height: 70px;
     height: 70px;
     text-align: center;
     text-align: center;
@@ -51,7 +51,7 @@
     margin-bottom: 35px;
     margin-bottom: 35px;
   }
   }
   .empty-logo {
   .empty-logo {
-    background-color: #FFF;
+    background-color: @cui-white;
     width: 70px;
     width: 70px;
     height: 70px;
     height: 70px;
   }
   }
@@ -86,7 +86,7 @@
       padding: 0;
       padding: 0;
       border: none;
       border: none;
       box-shadow: none;
       box-shadow: none;
-      background: #FFFFFF;
+      background: @cui-white;
       height: 45px;
       height: 45px;
       font-size: 16px;
       font-size: 16px;
       color: #9e9e9e;
       color: #9e9e9e;
@@ -116,7 +116,7 @@
 }
 }
 
 
 :-webkit-autofill, :-webkit-autofill:focus {
 :-webkit-autofill, :-webkit-autofill:focus {
-  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
+  -webkit-box-shadow: 0 0 0 1000px white inset !important;
   -webkit-text-fill-color: #9e9e9e !important;
   -webkit-text-fill-color: #9e9e9e !important;
 }
 }
 
 
@@ -146,7 +146,7 @@
   margin-left: auto;
   margin-left: auto;
   margin-right: auto;
   margin-right: auto;
   width: 100%;
   width: 100%;
-  background-color: #FAFAFA;
+  background-color: @cui-gray-050;
 }
 }
 
 
 @media screen and (max-width: 800px) {
 @media screen and (max-width: 800px) {
@@ -175,7 +175,7 @@
 }
 }
 
 
 #login-modal {
 #login-modal {
-  padding: 0px !important;
+  padding: 0 !important;
   box-shadow: none;
   box-shadow: none;
   background: transparent;
   background: transparent;
   border: none;
   border: none;

部分文件因为文件数量过多而无法显示