Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #1330 from ONLYOFFICE/fix/info-tips

Browse source 
Fix/info tips
This commit is contained in:
Julia Radzhabova 2021-11-18 00:42:58 +03:00 committed by GitHub
parent 36ae2eeb07 30eed54eba
commit 5f8a26cd82
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 132 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/forms/resources/less/common.less
View file

@ -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;
}
}

5
apps/common/main/lib/controller/Themes.js
View file

@ -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",

1
apps/common/main/resources/less/colors-table-classic.less
View file

@ -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;

1
apps/common/main/resources/less/colors-table-dark.less
View file

@ -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%);

5
apps/common/main/resources/less/colors-table-ie-fix.less
View file

@ -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;

2
apps/common/main/resources/less/colors-table.less
View file

@ -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
// -------------------------

140
apps/common/main/resources/less/synchronize-tip.less
View file

@ -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 {