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

Merge pull request #871 from ONLYOFFICE/feature/pr27-fix-bug-50284

Browse source 
Feature/pr27 fix bug 50284
This commit is contained in:
maxkadushkin 2021-05-09 00:47:52 +03:00 committed by GitHub
parent 4c4c3f6c51 06b42d4d6d
commit b622569a09
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 89 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -229,4 +229,6 @@
// Canvas // Canvas
// --------------------------- // ---------------------------
@canvas-background: var(--canvas-background);
@canvas-content-background: var(--canvas-content-background); @canvas-content-background: var(--canvas-content-background);
@canvas-page-border: var(--canvas-page-border);

32
apps/documenteditor/main/index.html
View file

@ -15,13 +15,22 @@
--background-toolbar: #404040; --background-toolbar: #404040;
--border-toolbar: #2a2a2a; --border-toolbar: #2a2a2a;
--highlight-button-hover: #e0e0e0; --highlight-button-hover: #e0e0e0;
--highlight-header-button-hover: rgba(255,255,255,.05);
--canvas-background: #666666; --canvas-background: #666666;
/*--canvas-content-background: #fff;*/ /*--canvas-content-background: #fff;*/
--canvas-page-border: #555; --canvas-page-border: #555;
} }
.theme-classic-light { .theme-classic-light {
--highlight-button-hover: #d8dadc; }
.theme-light {
--background-toolbar: #f7f7f7;
/*--border-toolbar: #cbcbcb;*/
--highlight-button-hover: #ccc;
--highlight-header-button-hover: rgba(255,255,255,.15);
--canvas-background: #eee;
--canvas-page-border: #ccc;
} }
.loadmask { .loadmask {
@ -32,8 +41,8 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border: none; border: none;
background: #f0f0f0; background: #e2e2e2;
background: var(--canvas-background, #f0f0f0); background: var(--canvas-background, #e2e2e2);
z-index: 1001; z-index: 1001;
} }
@ -73,12 +82,13 @@
height: 12px; height: 12px;
border-radius: 3px; border-radius: 3px;
margin: 0 10px; margin: 0 10px;
background: rgba(255, 255, 255, 0.2); background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
} }
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #f7f7f7; background: #f1f1f1;
background: var(--background-toolbar, #f7f7f7); background: var(--background-toolbar, #f1f1f1);
border-bottom: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb;
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb); border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
height: 46px; height: 46px;
@ -94,8 +104,8 @@
} }
.loadmask > .sktoolbar li { .loadmask > .sktoolbar li {
background: #ccc; background: #d8dadc;
background: var(--highlight-button-hover, #ccc); background: var(--highlight-button-hover, #d8dadc);
border-radius: 3px; border-radius: 3px;
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -124,15 +134,15 @@
width: 794px; width: 794px;
margin: 46px auto; margin: 46px auto;
height: 100%; height: 100%;
border: 1px solid #ccc; border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc); border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
padding-top: 50px; padding-top: 50px;
} }
.loadmask > .placeholder > .line { .loadmask > .placeholder > .line {
height: 15px; height: 15px;
margin: 30px 80px; margin: 30px 80px;
background: #e2e2e2; background: rgba(0,0,0,.05);
overflow: hidden; overflow: hidden;
position: relative; position: relative;

21
apps/documenteditor/main/index.html.deploy
View file

@ -19,8 +19,8 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border: none; border: none;
background: #f0f0f0; background: #e2e2e2;
background: var(--canvas-background, #f0f0f0); background: var(--canvas-background, #e2e2e2);
z-index: 1001; z-index: 1001;
} }
@ -60,12 +60,13 @@
height: 12px; height: 12px;
border-radius: 3px; border-radius: 3px;
margin: 0 10px; margin: 0 10px;
background: rgba(255, 255, 255, 0.2); background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
} }
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #f7f7f7; background: #f1f1f1;
background: var(--background-toolbar, #f7f7f7); background: var(--background-toolbar, #f1f1f1);
border-bottom: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb;
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb); border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
height: 46px; height: 46px;
@ -81,8 +82,8 @@
} }
.loadmask > .sktoolbar li { .loadmask > .sktoolbar li {
background: #ccc; background: #d8dadc;
background: var(--highlight-button-hover, #ccc); background: var(--highlight-button-hover, #d8dadc);
border-radius: 3px; border-radius: 3px;
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -111,15 +112,15 @@
width: 794px; width: 794px;
margin: 46px auto; margin: 46px auto;
height: 100%; height: 100%;
border: 1px solid #ccc; border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc); border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
padding-top: 50px; padding-top: 50px;
} }
.loadmask > .placeholder > .line { .loadmask > .placeholder > .line {
height: 15px; height: 15px;
margin: 30px 80px; margin: 30px 80px;
background: #e2e2e2; background: rgba(0,0,0,.05);
overflow: hidden; overflow: hidden;
position: relative; position: relative;

28
apps/documenteditor/main/resources/less/app.less
View file

@ -149,23 +149,33 @@
--big-icon-background-image: ~"url(@{app-image-const-path}/iconsbig.png)"; --big-icon-background-image: ~"url(@{app-image-const-path}/iconsbig.png)";
--huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge.png)"; --huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge.png)";
--big-icon-background-image-width: 56px;
--huge-icon-background-image-width: 80px;
@safari-fix-base-path: "resources/img"; @safari-fix-base-path: "resources/img";
&.safari { .safari {
--big-icon-background-image: ~"url(@{safari-fix-base-path}/iconsbig.png)"; --big-icon-background-image: ~"url(@{safari-fix-base-path}/iconsbig.png)";
--huge-icon-background-image: ~"url(@{safari-fix-base-path}/iconshuge.png)"; --huge-icon-background-image: ~"url(@{safari-fix-base-path}/iconshuge.png)";
} }
--big-icon-background-image-width: 56px;
--huge-icon-background-image-width: 80px;
.pixel-ratio__1_5 { .pixel-ratio__1_5 {
--big-icon-background-image: ~"url(@{app-image-const-path}/iconsbig@1.5x.png)"; --big-icon-background-image: ~"url(@{app-image-const-path}/iconsbig@1.5x.png)";
--huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge@1.5x.png)"; --huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge@1.5x.png)";
&.safari {
--big-icon-background-image: ~"url(@{safari-fix-base-path}/iconsbig@1.5x.png)";
--huge-icon-background-image: ~"url(@{safari-fix-base-path}/iconshuge@1.5x.png)";
}
} }
.pixel-ratio__2 { .pixel-ratio__2 {
--big-icon-background-image: ~"url(@{app-image-const-path}/iconsbig@2x.png)"; --big-icon-background-image: ~"url(@{app-image-const-path}/iconsbig@2x.png)";
--huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge@2x.png)"; --huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge@2x.png)";
&.safari {
--big-icon-background-image: ~"url(@{safari-fix-base-path}/iconsbig@2x.png)";
--huge-icon-background-image: ~"url(@{safari-fix-base-path}/iconshuge@2x.png)";
}
} }
@huge-icon-background-image: var(--huge-icon-background-image); @huge-icon-background-image: var(--huge-icon-background-image);
@ -185,12 +195,16 @@
// Skeleton of document // Skeleton of document
#editor-container {
background-color: @canvas-background;
}
.doc-placeholder { .doc-placeholder {
background: #fbfbfb; background: @canvas-content-background;
width: 794px; width: 794px;
margin: 46px auto; margin: 46px auto;
height: 100%; height: 100%;
border: 1px solid #bebebe; border: 1px solid @canvas-page-border;
padding-top: 50px; padding-top: 50px;
position: absolute; position: absolute;
left: 0; left: 0;
@ -202,7 +216,7 @@
> .line { > .line {
height: 15px; height: 15px;
margin: 30px 80px; margin: 30px 80px;
background: #e2e2e2; background: fade(#000, 5%);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }

33
apps/spreadsheeteditor/main/index.html
View file

@ -20,7 +20,15 @@
} }
.theme-classic-light { .theme-classic-light {
--highlight-button-hover: #d8dadc; }
.theme-classic-light {
--background-toolbar: #f7f7f7;
/*--border-toolbar: #cbcbcb;*/
--highlight-button-hover: #ccc;
--highlight-header-button-hover: rgba(255,255,255,.15);
--canvas-background: #eee;
--canvas-page-border: #ccc;
} }
.loadmask { .loadmask {
@ -31,8 +39,8 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border: none; border: none;
background: #f0f0f0; background: #e2e2e2;
background: var(--canvas-background, #f0f0f0); background: var(--canvas-background, #e2e2e2);
z-index: 1001; z-index: 1001;
} }
@ -72,12 +80,13 @@
height: 12px; height: 12px;
border-radius: 3px; border-radius: 3px;
margin: 0 10px; margin: 0 10px;
background: rgba(255, 255, 255, 0.2); background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
} }
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #f7f7f7; background: #f1f1f1;
background: var(--background-toolbar, #f7f7f7); background: var(--background-toolbar, #f1f1f1);
height: 46px; height: 46px;
padding: 10px 6px; padding: 10px 6px;
box-sizing: content-box; box-sizing: content-box;
@ -91,8 +100,8 @@
} }
.loadmask > .sktoolbar li { .loadmask > .sktoolbar li {
background: #ccc; background: #d8dadc;
background: var(--highlight-button-hover, #ccc); background: var(--highlight-button-hover, #d8dadc);
border-radius: 3px; border-radius: 3px;
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -117,8 +126,8 @@
.loadmask > .skformula { .loadmask > .skformula {
height: 24px; height: 24px;
background: #f7f7f7; background: #f1f1f1;
background: var(--background-toolbar, #f7f7f7); background: var(--background-toolbar, #f1f1f1);
} }
.loadmask > .skformula ul { .loadmask > .skformula ul {
@ -158,8 +167,8 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 0; font-size: 0;
border: 1px solid #ccc; border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc); border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
white-space: nowrap; white-space: nowrap;
-webkit-animation: flickerAnimation 2s infinite ease-in-out; -webkit-animation: flickerAnimation 2s infinite ease-in-out;

21
apps/spreadsheeteditor/main/index.html.deploy
View file

@ -18,8 +18,8 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border: none; border: none;
background: #f0f0f0; background: #e2e2e2;
background: var(--canvas-background, #f0f0f0); background: var(--canvas-background, #e2e2e2);
z-index: 1001; z-index: 1001;
} }
@ -60,11 +60,12 @@
border-radius: 3px; border-radius: 3px;
margin: 0 10px; margin: 0 10px;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
} }
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #f7f7f7; background: #f1f1f1;
background: var(--background-toolbar, #f7f7f7); background: var(--background-toolbar, #f1f1f1);
height: 46px; height: 46px;
padding: 10px 6px; padding: 10px 6px;
box-sizing: content-box; box-sizing: content-box;
@ -78,8 +79,8 @@
} }
.loadmask > .sktoolbar li { .loadmask > .sktoolbar li {
background: #ccc; background: #d8dadc;
background: var(--highlight-button-hover, #ccc); background: var(--highlight-button-hover, #d8dadc);
border-radius: 3px; border-radius: 3px;
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -104,8 +105,8 @@
.loadmask>.skformula { .loadmask>.skformula {
height: 24px; height: 24px;
background: #f7f7f7; background: #f1f1f1;
background: var(--background-toolbar, #f7f7f7); background: var(--background-toolbar, #f1f1f1);
} }
.loadmask>.skformula ul { .loadmask>.skformula ul {
@ -145,8 +146,8 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 0; font-size: 0;
border: 1px solid #ccc; border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc); border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
white-space: nowrap; white-space: nowrap;
-webkit-animation: flickerAnimation 2s infinite ease-in-out; -webkit-animation: flickerAnimation 2s infinite ease-in-out;

4
apps/spreadsheeteditor/main/resources/less/advanced-settings.less
View file

@ -54,8 +54,8 @@
.selected { .selected {
.listitem-icon { .listitem-icon {
background-position-x: 0; background-position-x: -20px;
background-position-x: @button-small-normal-icon-offset-x; background-position-x: @button-small-active-icon-offset-x;
} }
} }