diff --git a/apps/common/forms/resources/less/common.less b/apps/common/forms/resources/less/common.less index b0e148fe1..b6f40bd3b 100644 --- a/apps/common/forms/resources/less/common.less +++ b/apps/common/forms/resources/less/common.less @@ -233,19 +233,23 @@ &.colored { padding: 0 16px; height: 28px; + background-color: @background-accent-button-ie; background-color: @background-accent-button; border: 1px solid transparent; border-radius: 3px; + color: @text-contrast-background-ie !important; color: @text-contrast-background !important; font-weight: 700; &:hover:not(.disabled), .over:not(.disabled) { + background-color: @highlight-accent-button-hover-ie !important; background-color: @highlight-accent-button-hover !important; } &:active:not(.disabled), &.active:not(.disabled) { + background-color: @highlight-accent-button-pressed-ie !important; background-color: @highlight-accent-button-pressed !important; } } diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index d8752dbdd..df4b95e11 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -51,6 +51,8 @@ define([ "background-notification-badge", "background-scrim", "background-loader", + "background-accent-button", + "background-contrast-popover", "highlight-button-hover", "highlight-button-pressed", @@ -60,6 +62,8 @@ define([ "highlight-header-button-pressed", "highlight-toolbar-tab-underline", "highlight-text-select", + "highlight-accent-button-hover", + "highlight-accent-button-pressed", "border-toolbar", "border-divider", @@ -70,6 +74,7 @@ define([ "border-control-focus", "border-color-shading", "border-error", + "border-contrast-popover", "text-normal", "text-normal-pressed", diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less index bde3c12e6..20d3ec121 100644 --- a/apps/common/main/resources/less/colors-table-classic.less +++ b/apps/common/main/resources/less/colors-table-classic.less @@ -34,6 +34,7 @@ --border-control-focus: #848484; --border-color-shading: fade(#000, 20%); --border-error: #d9534f; + --border-contrast-popover: #444444; --text-normal: #444; --text-normal-pressed: #fff; diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less index 5221a62b9..e42d28150 100644 --- a/apps/common/main/resources/less/colors-table-dark.less +++ b/apps/common/main/resources/less/colors-table-dark.less @@ -35,6 +35,7 @@ --border-control-focus: #ccc; --border-color-shading: fade(#fff, 10%); --border-error: #f62211; + --border-contrast-popover: #666; --text-normal: fade(#fff, 80%); --text-normal-pressed: fade(#fff, 80%); diff --git a/apps/common/main/resources/less/colors-table-ie-fix.less b/apps/common/main/resources/less/colors-table-ie-fix.less index 1ff99159a..f9917964e 100644 --- a/apps/common/main/resources/less/colors-table-ie-fix.less +++ b/apps/common/main/resources/less/colors-table-ie-fix.less @@ -13,6 +13,8 @@ @background-scrim-ie: fade(#000, 20%); @background-loader-ie: fade(#000, 65%); @background-alt-key-hint-ie: #FFD938; +@background-accent-button-ie: #446995; +@background-contrast-popover-ie: #444444; @highlight-button-hover-ie: #d8dadc; @highlight-button-pressed-ie: #7d858c; @@ -22,6 +24,8 @@ @highlight-header-button-pressed-ie: fade(#000, 20%); @highlight-toolbar-tab-underline-ie: #444; @highlight-text-select-ie: #3494fb; +@highlight-accent-button-hover-ie: #375478; +@highlight-accent-button-pressed-ie: #293F59; @border-toolbar-ie: #cbcbcb; @border-divider-ie: #cbcbcb; @@ -32,6 +36,7 @@ @border-control-focus-ie: #848484; @border-color-shading-ie: fade(#000, 20%); @border-error-ie: #d9534f; +@border-contrast-popover-ie: #444444; @text-normal-ie: #444; @text-normal-pressed-ie: #fff; diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index c4f62364c..2e159caf3 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -48,6 +48,7 @@ --border-control-focus: #848484; --border-color-shading: fade(#000, 15%); --border-error: #f62211; + --border-contrast-popover: #444444; --text-normal: fade(#000, 80%); --text-normal-pressed: fade(#000, 80%); @@ -185,6 +186,7 @@ @border-control-focus: var(--border-control-focus); @border-color-shading: var(--border-color-shading); @border-error: var(--border-error); +@border-contrast-popover: var(--border-contrast-popover); // Text // ------------------------- diff --git a/apps/common/main/resources/less/synchronize-tip.less b/apps/common/main/resources/less/synchronize-tip.less index 7db99a439..31d26e68c 100644 --- a/apps/common/main/resources/less/synchronize-tip.less +++ b/apps/common/main/resources/less/synchronize-tip.less @@ -40,6 +40,8 @@ background-color: @header-background-color; color: @text-toolbar-header-ie; color: @text-toolbar-header; + border-color: @header-background-color-ie; + border-color: @header-background-color; .close { &:before, &:after { @@ -49,9 +51,15 @@ } } - .tip-arrow:after { + .tip-arrow:before { background-color: @header-background-color-ie; background-color: @header-background-color; + border-color: @header-background-color-ie !important; + border-color: @header-background-color !important; + } + .tip-arrow:after { + border-color: @header-background-color-ie !important; + border-color: @header-background-color !important; } } @@ -59,11 +67,19 @@ .asc-synchronizetip { background-color: @background-toolbar-ie; background-color: @background-toolbar; + border-color: @background-toolbar-ie; + border-color: @background-toolbar; } - .tip-arrow:after { + .tip-arrow:before { background-color: @background-toolbar-ie; background-color: @background-toolbar; + border-color: @background-toolbar-ie !important; + border-color: @background-toolbar !important; + } + .tip-arrow:after { + border-color: @background-toolbar-ie !important; + border-color: @background-toolbar !important; } } @@ -75,17 +91,29 @@ } .asc-synchronizetip { + background-color: @background-contrast-popover-ie; background-color: @background-contrast-popover; + color: @text-contrast-background-ie; color: @text-contrast-background; + border-color: @border-contrast-popover-ie; + border-color: @border-contrast-popover; .close { &:before, &:after { + background-color: @text-contrast-background-ie; background-color: @text-contrast-background; } } } - .tip-arrow:after { + .tip-arrow:before { + background-color: @background-contrast-popover-ie; background-color: @background-contrast-popover; + border-color: @border-contrast-popover-ie !important; + border-color: @border-contrast-popover !important; + } + .tip-arrow:after { + border-color: @border-contrast-popover-ie !important; + border-color: @border-contrast-popover !important; } .btn-div { @@ -165,14 +193,14 @@ &.right { .tip-arrow { - left: -13px; + left: -12px; top: 50%; margin-top: -7px; width: 16px; height: 15px; .box-shadow(0 0 8px -5px rgba(0, 0, 0, 0.2)); - &:after { + &:before { top: 0; left: 8px; width: 16px; @@ -186,10 +214,10 @@ top: 50%; margin-top: -7px; width: 16px; - height: 15px; + height: 16px; .box-shadow(0 0 8px -5px rgba(0, 0, 0, 0.2)); - &:after { + &:before { top: 0; left: -8px; width: 16px; @@ -206,7 +234,7 @@ height: 16px; .box-shadow(0 0 8px -5px rgba(0, 0, 0, 0.2)); - &:after { + &:before { top: -6px; left: 0; width: 16px; @@ -216,13 +244,13 @@ &.bottom { .tip-arrow { left: 50%; - top: -12px; + top: -11px; margin-left: -7px; - width: 16px; + width: 15px; height: 15px; .box-shadow(0 0 8px -5px rgba(0, 0, 0, 0.2)); - &:after { + &:before { top: 7px; left: 0; width: 16px; @@ -238,11 +266,17 @@ height: 15px; .box-shadow(0 -5px 8px -5px rgba(0, 0, 0, 0.2)); - &:after { + &:before { top: -7px; left: 7px; width: 16px; } + &:after { + top: 0px; + left: 4px; + border-top: @scaled-one-px-value-ie solid @background-notification-popover-ie; + border-top: @scaled-one-px-value solid @background-notification-popover; + } } } @@ -254,106 +288,148 @@ height: 15px; .box-shadow(0 -5px 8px -5px rgba(0, 0, 0, 0.2)); - &:after { + &:before { top: -7px; left: -7px; } + &:after { + top: 0px; + left: -4px; + border-top: @scaled-one-px-value-ie solid @background-notification-popover-ie; + border-top: @scaled-one-px-value solid @background-notification-popover; + } } } &.top-left { .tip-arrow { right: 0; - bottom: -15px; + bottom: -14px; width: 15px; height: 15px; .box-shadow(5px 0 8px -5px rgba(0, 0, 0, 0.2)); - &:after { + &:before { top: -8px; left: 8px; } + &:after { + top: -6px; + left: 0px; + border-right: @scaled-one-px-value-ie solid @background-notification-popover-ie; + border-right: @scaled-one-px-value solid @background-notification-popover; + } } } &.top-right { .tip-arrow { left: 0; - bottom: -15px; + bottom: -14px; width: 15px; height: 15px; .box-shadow(-5px 0 8px -5px rgba(0, 0, 0, 0.2)); - &:after { + &:before { top: -8px; left: -8px; .box-shadow(2px 2px 8px -1px rgba(0, 0, 0, 0.2)); } + &:after { + top: -6px; + left: 0px; + border-left: @scaled-one-px-value-ie solid @background-notification-popover-ie; + border-left: @scaled-one-px-value solid @background-notification-popover; + } } } &.bottom-left { .tip-arrow { right: 0; - top: -15px; + top: -14px; width: 15px; height: 15px; .box-shadow(8px 5px 8px -5px rgba(0, 0, 0, 0.2)); - &:after { + &:before { top: 8px; left: 8px; .box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2)); } + &:after { + top: 6px; + left: 0px; + border-right: @scaled-one-px-value-ie solid @background-notification-popover-ie; + border-right: @scaled-one-px-value solid @background-notification-popover; + } } } &.bottom-right { .tip-arrow { left: 0; - top: -15px; + top: -14px; width: 15px; height: 15px; .box-shadow(-8px 0 8px -5px rgba(0, 0, 0, 0.2)); - &:after { + &:before { top: 8px; left: -8px; .box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2)); } + &:after { + top: 6px; + left: 0px; + border-left: @scaled-one-px-value-ie solid @background-notification-popover-ie; + border-left: @scaled-one-px-value solid @background-notification-popover; + } } } &.right-top { .tip-arrow { - left: -15px; + left: -14px; bottom: 0; width: 15px; height: 15px; .box-shadow(0 5px 8px -5px rgba(0, 0, 0, 0.2)); - &:after { + &:before { top: 7px; left: 7px; width: 16px; } + &:after { + top: 0px; + left: 4px; + border-bottom: @scaled-one-px-value-ie solid @background-notification-popover-ie; + border-bottom: @scaled-one-px-value solid @background-notification-popover; + } } } &.left-top { .tip-arrow { - right: -15px; + right: -14px; bottom: 0; width: 15px; height: 13px; .box-shadow(-5px 8px 8px -5px rgba(0, 0, 0, 0.2)); - &:after { + &:before { bottom: -7px; left: -7px; //width: 15px; .box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2)); } + &:after { + top: -2px; + left: -4px; + border-bottom: @scaled-one-px-value-ie solid @background-notification-popover-ie; + border-bottom: @scaled-one-px-value solid @background-notification-popover; + } } } } @@ -365,6 +441,9 @@ background-color: @background-notification-popover; overflow: visible; + border: @scaled-one-px-value-ie solid @background-notification-popover-ie; + border: @scaled-one-px-value solid @background-notification-popover; + .bottom-right &, .right-bottom & { border-top-left-radius: 0; @@ -389,7 +468,7 @@ font-size: 11px; } -.asc-synchronizetip .tip-arrow:after { +.asc-synchronizetip .tip-arrow:before { content: ''; position: absolute; top: 5px; @@ -406,6 +485,15 @@ transform: rotate(45deg); .box-shadow(0 4px 8px -1px rgba(0, 0, 0, 0.2)); + border: @scaled-one-px-value-ie solid @background-notification-popover-ie; + border: @scaled-one-px-value solid @background-notification-popover; +} +.asc-synchronizetip .tip-arrow:after { + content: ''; + position: absolute; + background-color: transparent; + width: 15px; + height: 15px; } .asc-synchronizetip .show-link {