color corrections for pink theme
This commit is contained in:
Niels Lyngsø
+11
-1
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
/****************************/
|
||||
|
||||
@@ -31,5 +31,5 @@
|
||||
}
|
||||
|
||||
.umb-dashboard__header .umb-tabs-nav .umb-tab > a {
|
||||
padding-bottom: 21px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
.icon {
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
color: @gray-3;
|
||||
//color: @gray-3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -14,7 +14,6 @@
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
color: @gray-2;
|
||||
}
|
||||
|
||||
.umb-options {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
border-bottom-color: @ui-active;
|
||||
}
|
||||
&:hover {
|
||||
border-bottom-color: @ui-active-hover;
|
||||
border-bottom-color: @ui-active-type-hover;
|
||||
}
|
||||
*/
|
||||
&::after {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
<umb-editor-view ng-if="!page.loading">
|
||||
|
||||
<umb-variant-content-editors
|
||||
<umb-variant-content-editors
|
||||
page="page"
|
||||
content="content"
|
||||
culture="culture"
|
||||
@@ -17,9 +17,9 @@
|
||||
|
||||
<umb-editor-footer-content-left>
|
||||
|
||||
<umb-breadcrumbs
|
||||
ng-if="ancestors && ancestors.length > 0"
|
||||
ancestors="ancestors"
|
||||
<umb-breadcrumbs
|
||||
ng-if="ancestors && ancestors.length > 0"
|
||||
ancestors="ancestors"
|
||||
entity-type="content">
|
||||
</umb-breadcrumbs>
|
||||
|
||||
@@ -36,16 +36,16 @@
|
||||
type="button">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
alias="preview"
|
||||
<umb-button
|
||||
alias="preview"
|
||||
ng-if="!page.isNew && content.allowPreview && page.showPreviewButton"
|
||||
type="button"
|
||||
button-style="outline"
|
||||
button-style="info"
|
||||
action="preview(content)"
|
||||
label-key="buttons_showPage">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
<umb-button
|
||||
ng-if="page.showSaveButton"
|
||||
alias="save"
|
||||
type="button"
|
||||
@@ -56,12 +56,12 @@
|
||||
shortcut="ctrl+s"
|
||||
add-ellipsis="{{page.saveButtonEllipsis}}">
|
||||
</umb-button>
|
||||
|
||||
<umb-button-group
|
||||
ng-if="defaultButton && !content.trashed && !infiniteModel.infiniteMode"
|
||||
|
||||
<umb-button-group
|
||||
ng-if="defaultButton && !content.trashed && !infiniteModel.infiniteMode"
|
||||
button-style="success"
|
||||
default-button="defaultButton"
|
||||
sub-buttons="subButtons"
|
||||
default-button="defaultButton"
|
||||
sub-buttons="subButtons"
|
||||
state="page.buttonGroupState"
|
||||
direction="up"
|
||||
float="right">
|
||||
|
||||
+1
-1
@@ -54,7 +54,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div ng-if="splitViewOpen" style="margin-left: 20px;">
|
||||
<div ng-if="splitViewOpen">
|
||||
<a class="umb-editor-header__close-split-view" href="" ng-click="closeSplitView()">
|
||||
<i class="icon-delete"></i>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user