diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js index c3243993c1..06513c9c66 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js @@ -302,8 +302,18 @@ function umbTreeDirective($q, $rootScope, treeService, notificationsService, use // TODO: This is called constantly because as a method in a template it's re-evaluated pretty much all the time // it would be better if we could cache the processing. The problem is that some of these things are dynamic. - + var css = []; + if (node == $scope.currentNode) { + css.push("current"); + } + if (node.hasChildren) { + css.push("has-children"); + } + if (node.deleteAnimations) { + css.push("umb-tree-item--deleted"); + } + if (node.cssClasses) { _.each(node.cssClasses, function (c) { css.push(c); diff --git a/src/Umbraco.Web.UI.Client/src/less/buttons.less b/src/Umbraco.Web.UI.Client/src/less/buttons.less index f1e132dce3..2440aaa738 100644 --- a/src/Umbraco.Web.UI.Client/src/less/buttons.less +++ b/src/Umbraco.Web.UI.Client/src/less/buttons.less @@ -193,15 +193,15 @@ input[type="button"] { } // Info appears as a neutral blue .btn-info { - .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight, @btnInfoType); + .buttonBackground(@sand-5, @blueDark, @blueExtraDark, @u-white); } // Made for Umbraco, 2019 .btn-action { - .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight, @btnInfoType); + .buttonBackground(@blueExtraDark, @blueDark, @pinkLight, @u-white); } // Made for Umbraco, 2019, used for buttons that has to stand back. .btn-transparent { - .buttonBackground(@btnWhiteBackground, @btnWhiteBackgroundHighlight, @btnWhiteType); + .buttonBackground(@btnWhiteBackground, @btnWhiteBackgroundHighlight, @btnWhiteType, @btnWhiteTypeHover); } // Inverse appears as dark gray .btn-inverse { @@ -242,9 +242,9 @@ input[type="button"] { // outlined .btn-outline { border: 1px solid; - border-color: @gray-8; + border-color: @blueExtraDark; background: @white; - color: @ui-light-type; + color: @blueExtraDark; padding: 5px 13px; transition: all .2s linear; } diff --git a/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less b/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less index 4d57f20063..a144336a54 100644 --- a/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less +++ b/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less @@ -207,14 +207,14 @@ a, a:hover{ clear: both; font-weight: normal; line-height: 20px; - color: #343434; + color: black; white-space: nowrap; cursor:pointer; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a { color: #000000; - background: #f8f8f8; + background: #e4e0dd; } /****************************/ diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less index fc6baead4e..3257d7b93f 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less @@ -31,5 +31,5 @@ } .umb-dashboard__header .umb-tabs-nav .umb-tab > a { - padding-bottom: 21px; + padding-bottom: 25px; } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less index b2fb1fa6d6..aabc4c4506 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less @@ -16,19 +16,22 @@ border-bottom: 1px solid @gray-9; height: @editorHeaderHeight; box-sizing: border-box; - color: @ui-light-active-type; -} - -.umb-language-picker__toggle:hover { - //background: @gray-10; - color:@ui-light-active-type-hover; + color: @ui-option-type; } .umb-language-picker__expand { - //color: @gray-6; font-size: 14px; } +.umb-language-picker__toggle:hover { + background: @ui-option-hover; + color:@ui-option-type-hover; + .umb-language-picker__expand { + color: @ui-option-type-hover; + } +} + + .umb-language-picker__dropdown { width: 100%; background: @white; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less index d091c1a442..bb54b254df 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less @@ -115,6 +115,14 @@ input.umb-editor-header__name-input:disabled { } a.umb-editor-header__close-split-view { + + display: flex; + justify-content: center; + align-items: center; + position: relative; + height: 69px; + width: 69px; + font-size: 20px; color: @gray-6; text-decoration: none !important; @@ -144,22 +152,28 @@ a.umb-editor-header__close-split-view:hover { height: 30px; text-decoration: none !important; font-size: 13px; - color: @gray-4; - background-color: @white; + //color: @gray-4; + color: @ui-action-disgrete-type; + //background-color: @white; } a.umb-variant-switcher__toggle { - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + transition: color 0.2s ease-in-out; &:hover { - background-color: @gray-10; + //background-color: @gray-10; + color: @ui-action-disgrete-type-hover; + .umb-variant-switcher__expand { + color: @ui-action-disgrete-type-hover; + } } } .umb-variant-switcher__expand { - color: @gray-7; + color: @ui-action-disgrete-type; margin-top: 3px; margin-left: 5px; margin-right: -5px; + transition: color 0.2s ease-in-out; } .umb-variant-switcher__item { @@ -167,27 +181,30 @@ a.umb-variant-switcher__toggle { justify-content: space-between; align-items: center; border-bottom: 1px solid @gray-9; + &:hover .umb-variant-switcher__name-wrapper { + + } } .umb-variant-switcher__item:last-child { border-bottom: none; } +.umb-variant-switcher_item--current { + color: @ui-light-active-type; +} .umb-variant-switcher_item--current .umb-variant-switcher__name-wrapper { - background-color: @gray-10; - border-left: 2px solid @ui-active; + //background-color: @gray-10; + border-left: 4px solid @ui-active; } .umb-variant-switcher__item:hover, -.umb-variant-switcher__item:focus, -.umb-variant-switcher__name-wrapper:hover, -.umb-variant-switcher__name-wrapper:focus { - background-color: @gray-10; +.umb-variant-switcher__item:focus { outline: none; } .umb-variant-switcher_item--not-allowed:not(.umb-variant-switcher_item--current) .umb-variant-switcher__name-wrapper:hover { - background-color: @white !important; + //background-color: @white !important; cursor: default; } @@ -217,7 +234,12 @@ a.umb-variant-switcher__toggle { .umb-variant-switcher__split-view { font-size: 13px; display: none; - padding: 8px 20px; + padding: 16px 20px; + + &:hover { + background-color: @ui-option-hover; + color: @ui-option-type-hover; + } } // container @@ -229,7 +251,7 @@ a.umb-variant-switcher__toggle { bottom: @editorFooterHeight; left: 0; overflow: auto; - background: @gray-10; + background: @brownGrayLight; } .umb-editor-wrapper.-no-footer .umb-editor-container { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less index 15296a6aaa..40a0cc41e3 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less @@ -23,7 +23,7 @@ .icon { font-size: 18px; vertical-align: middle; - color: @gray-3; + //color: @gray-3; } } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-root.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-root.less index 72a008b8b6..a3529d5504 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-root.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-root.less @@ -14,7 +14,6 @@ margin: 0; width: 100%; display: flex; - color: @gray-2; } .umb-options { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less index 38860e6d22..905b3abb87 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less @@ -14,7 +14,7 @@ a, a:hover { outline: none; text-decoration: none; - + // TODO: => confirm not in use // &.noSpr { // background-position: 0 @@ -28,10 +28,11 @@ visibility: hidden; text-decoration: none; font-size: 12px; - transition: opacity 120ms ease; + transition: color 120ms; &:hover { - opacity: .7; + //opacity: .7; + color: @ui-option-type-hover; } } @@ -93,17 +94,36 @@ body.touch .umb-tree { display: flex; flex-wrap: nowrap; align-items: center; - - &.active { - background: @gray-10; + + color: @ui-option-type; + a { + color: @ui-option-type; } - + + // active is equivilant to selected, its the item that is begin affected by the actions performed in the right-click-dialog. + &.active { + background: @ui-selected; + color: @ui-selected-type; + a { + color: @ui-selected-type; + } + } + &:hover { - background: @gray-10; - + background: @ui-option-hover; + + color: @ui-option-type-hover; + a { + color: @ui-option-type-hover; + } + > .umb-options { visibility: visible; } + + .umb-tree-icon { + color: @ui-option-type-hover; + } } } @@ -273,7 +293,8 @@ body.touch .umb-tree { .umb-tree-icon { vertical-align: middle; margin: 0 13px 0 0; - color: @gray-1; + //color: @gray-1; + color: @ui-option-type; font-size: 20px; &.blue { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less index d432310dab..c1f099c2a5 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less @@ -21,8 +21,10 @@ height: @editorHeaderHeight; position: relative; + color: @ui-active-type; + &:hover { - color: @ui-light-active-type-hover !important; + color: @ui-active-type-hover !important; } &::after { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less index 0472deabf6..5db66da974 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less @@ -40,7 +40,7 @@ &:hover { color:@ui-action-hover; text-decoration: none; - border-color: @ui-active-hover; + border-color: @ui-active-type-hover; } } @@ -429,8 +429,8 @@ input.umb-group-builder__group-sort-value { &:hover { text-decoration: none; - color:@ui-active-hover; - border-color:@ui-active-hover; + color:@ui-active-type-hover; + border-color:@ui-active-type-hover; } } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less index 3d1af014c7..233441c5d9 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less @@ -71,12 +71,12 @@ margin-right: 5px; font-size: 13px; font-weight: bold; - color: @ui-action-disgrete; + color: @ui-action-disgrete-type; cursor: pointer; } .umb-node-preview__action:hover { - color: @ui-action-disgrete-hover; + color: @ui-action-disgrete-type-hover; text-decoration: none; opacity: 1; } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less index 2a5b98df30..f22d8b3a16 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less @@ -55,7 +55,7 @@ border-bottom-color: @ui-active; } &:hover { - border-bottom-color: @ui-active-hover; + border-bottom-color: @ui-active-type-hover; } */ &::after { diff --git a/src/Umbraco.Web.UI.Client/src/less/listview.less b/src/Umbraco.Web.UI.Client/src/less/listview.less index 2271703540..c22e57b639 100644 --- a/src/Umbraco.Web.UI.Client/src/less/listview.less +++ b/src/Umbraco.Web.UI.Client/src/less/listview.less @@ -3,14 +3,6 @@ .umb-listview{width: auto !important;} -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus, -.dropdown-submenu:hover > a, -.dropdown-submenu:focus > a { - color: @black; - background: @gray-10; -} - .umb-listview table { border: 1px solid @gray-8; } diff --git a/src/Umbraco.Web.UI.Client/src/less/mixins.less b/src/Umbraco.Web.UI.Client/src/less/mixins.less index 02654459a1..a9f10bb196 100644 --- a/src/Umbraco.Web.UI.Client/src/less/mixins.less +++ b/src/Umbraco.Web.UI.Client/src/less/mixins.less @@ -515,7 +515,7 @@ // Button backgrounds // ------------------ -.buttonBackground(@startColor, @hoverColor: @startColor, @textColor: #fff) { +.buttonBackground(@startColor, @hoverColor: @startColor, @textColor: #fff, @textColorHover: @textColor) { // gradientBar will set the background to a pleasing blend of these, to support IE<=9 //.gradientBar(@startColor, @endColor, @textColor); @@ -533,7 +533,7 @@ // in these cases the gradient won't cover the background, so we override &:hover, &:focus, &:active, &.active { - color: @textColor; + color: @textColorHover; background-color: @hoverColor; } diff --git a/src/Umbraco.Web.UI.Client/src/less/navs.less b/src/Umbraco.Web.UI.Client/src/less/navs.less index d9656f194b..0101113670 100644 --- a/src/Umbraco.Web.UI.Client/src/less/navs.less +++ b/src/Umbraco.Web.UI.Client/src/less/navs.less @@ -233,6 +233,12 @@ .dropdown-menu > li > a { padding: 8px 20px; + color: @ui-option-type; +} + +.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a { + color: @ui-option-type-hover; + background: @ui-option-hover; } .nav-tabs .dropdown-menu { diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index a0d32ee92e..c0364f4ad8 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -243,8 +243,8 @@ transition: all 150ms ease-in-out; &:hover { - color: @ui-action-disgrete-hover; - border-color: @ui-action-disgrete-hover; + color: @ui-action-disgrete-type-hover; + border-color: @ui-action-disgrete-type-hover; } } diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less index a836912041..dd5788fa11 100644 --- a/src/Umbraco.Web.UI.Client/src/less/variables.less +++ b/src/Umbraco.Web.UI.Client/src/less/variables.less @@ -75,6 +75,9 @@ @gray-9: #E9E9EB; @gray-10: #F3F3F5; +@sand-2: hsl(50, 20%, 97%);// added 2019 +@sand-5: #f3efe9;// added 2019 + // Additional Icon Colours @brownIcon: #795548; @@ -110,26 +113,37 @@ @pinkLight: #f5c1bc;// added 2019 @brown: #9d8057;// added 2019 @brownLight: #e4e0dd;// added 2019 -@claus: #f6efe7; -@claus2: #f2ebe6; -@claus3: #535963; //#56777A -@claus4: #819a9e; +@brownGrayLight: #f3f2f1;// added 2019 +//@claus: #f6efe7; +//@claus2: #f2ebe6; +//@claus3: #535963; //#56777A +//@claus4: #819a9e; //@claus5: #2152A3;// blueMid -@claus6: #02A191; +//@claus6: #02A191; //@clausSoftRed: #D93F4C; // todo //@clausRed:#D42054;// todo. -@u-greyLight: #f2ebe6;// added 2019 +//@u-greyLight: #f2ebe6;// added 2019 @u-white: #f9f7f4;// added 2019 +@u-black: black;// added 2019 // UI colors // ------------------------- +@ui-option-type: @blueExtraDark; +@ui-option-hover: @sand-2; +@ui-option-type-hover: @blueMid; + //@ui-active: #346ab3; @ui-active: @pinkLight; @ui-active-type: @blueExtraDark; -@ui-active-hover: @blueMid; +@ui-active-type-hover: @blueMid; + +@ui-selected: @blue; +@ui-selected-hover: @blueMid; +@ui-selected-type: @u-white; +@ui-selected-type-hover: @u-white; @ui-light-border: @pinkLight; @ui-light-type: @gray-4; @@ -139,16 +153,17 @@ @ui-light-active-type: @blueExtraDark; @ui-light-active-type-hover: @blueMid; -@ui-selected: @blueMid;//not used jet. -@ui-selected-hover: @blueMid;//not used jet. @ui-action: @blueMid; @ui-action-hover: @blueMid; -@ui-action-disgrete: @gray-4; -@ui-action-disgrete-hover: @blueMid; +@ui-action-disgrete: white; +@ui-action-disgrete-hover: @brownLight; -@type-white: @u-white; +@ui-action-disgrete-type: @gray-4; +@ui-action-disgrete-type-hover: @blueMid; + +@type-white: @white; @type-black: @blueNight; @ui-btn: @blueExtraDark; @@ -157,7 +172,7 @@ @ui-btn-positive: @green; @ui-btn-positive-hover: @green; -@ui-btn-positive-type: @u-white; +@ui-btn-positive-type: @white; @ui-btn-negative: @red; @ui-btn-negative-hover: @red; @@ -313,10 +328,12 @@ @btnPrimaryBackgroundHighlight: @green; @btnInfoType: @ui-btn-type;// updated 2019 +@btnInfoTypeHover: @ui-btn-type;// updated 2019 @btnInfoBackground: @ui-btn;// updated 2019 @btnInfoBackgroundHighlight: @ui-btn-hover;// updated 2019 -@btnWhiteType: @black;// updated 2019 +@btnWhiteType: @blueExtraDark;// updated 2019 +@btnWhiteTypeHover: @ui-action-hover;// updated 2019 @btnWhiteBackground: @white;// updated 2019 @btnWhiteBackgroundHighlight: @white;// updated 2019 diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html index adde101baa..e97eabf17f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html @@ -6,7 +6,7 @@ - - @@ -36,16 +36,16 @@ type="button"> - - - - diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html index edf04d5297..4861aac8a4 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html @@ -54,7 +54,7 @@ -
+