Merge pull request #871 from ONLYOFFICE/feature/pr27-fix-bug-50284
Feature/pr27 fix bug 50284
This commit is contained in:
commit
b622569a09
|
@ -229,4 +229,6 @@
|
|||
|
||||
// Canvas
|
||||
// ---------------------------
|
||||
@canvas-background: var(--canvas-background);
|
||||
@canvas-content-background: var(--canvas-content-background);
|
||||
@canvas-page-border: var(--canvas-page-border);
|
||||
|
|
|
@ -15,13 +15,22 @@
|
|||
--background-toolbar: #404040;
|
||||
--border-toolbar: #2a2a2a;
|
||||
--highlight-button-hover: #e0e0e0;
|
||||
--highlight-header-button-hover: rgba(255,255,255,.05);
|
||||
--canvas-background: #666666;
|
||||
/*--canvas-content-background: #fff;*/
|
||||
--canvas-page-border: #555;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
@ -32,8 +41,8 @@
|
|||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
background: #f0f0f0;
|
||||
background: var(--canvas-background, #f0f0f0);
|
||||
background: #e2e2e2;
|
||||
background: var(--canvas-background, #e2e2e2);
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
|
@ -73,12 +82,13 @@
|
|||
height: 12px;
|
||||
border-radius: 3px;
|
||||
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 {
|
||||
background: #f7f7f7;
|
||||
background: var(--background-toolbar, #f7f7f7);
|
||||
background: #f1f1f1;
|
||||
background: var(--background-toolbar, #f1f1f1);
|
||||
border-bottom: 1px solid #cbcbcb;
|
||||
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
|
||||
height: 46px;
|
||||
|
@ -94,8 +104,8 @@
|
|||
}
|
||||
|
||||
.loadmask > .sktoolbar li {
|
||||
background: #ccc;
|
||||
background: var(--highlight-button-hover, #ccc);
|
||||
background: #d8dadc;
|
||||
background: var(--highlight-button-hover, #d8dadc);
|
||||
border-radius: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
@ -124,15 +134,15 @@
|
|||
width: 794px;
|
||||
margin: 46px auto;
|
||||
height: 100%;
|
||||
border: 1px solid #ccc;
|
||||
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
|
||||
border: 1px solid #bbbec2;
|
||||
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.loadmask > .placeholder > .line {
|
||||
height: 15px;
|
||||
margin: 30px 80px;
|
||||
background: #e2e2e2;
|
||||
background: rgba(0,0,0,.05);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
|
|
|
@ -19,8 +19,8 @@
|
|||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
background: #f0f0f0;
|
||||
background: var(--canvas-background, #f0f0f0);
|
||||
background: #e2e2e2;
|
||||
background: var(--canvas-background, #e2e2e2);
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
|
@ -60,12 +60,13 @@
|
|||
height: 12px;
|
||||
border-radius: 3px;
|
||||
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 {
|
||||
background: #f7f7f7;
|
||||
background: var(--background-toolbar, #f7f7f7);
|
||||
background: #f1f1f1;
|
||||
background: var(--background-toolbar, #f1f1f1);
|
||||
border-bottom: 1px solid #cbcbcb;
|
||||
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
|
||||
height: 46px;
|
||||
|
@ -81,8 +82,8 @@
|
|||
}
|
||||
|
||||
.loadmask > .sktoolbar li {
|
||||
background: #ccc;
|
||||
background: var(--highlight-button-hover, #ccc);
|
||||
background: #d8dadc;
|
||||
background: var(--highlight-button-hover, #d8dadc);
|
||||
border-radius: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
@ -111,15 +112,15 @@
|
|||
width: 794px;
|
||||
margin: 46px auto;
|
||||
height: 100%;
|
||||
border: 1px solid #ccc;
|
||||
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
|
||||
border: 1px solid #bbbec2;
|
||||
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.loadmask > .placeholder > .line {
|
||||
height: 15px;
|
||||
margin: 30px 80px;
|
||||
background: #e2e2e2;
|
||||
background: rgba(0,0,0,.05);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
|
|
|
@ -149,23 +149,33 @@
|
|||
--big-icon-background-image: ~"url(@{app-image-const-path}/iconsbig.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 {
|
||||
.safari {
|
||||
--big-icon-background-image: ~"url(@{safari-fix-base-path}/iconsbig.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 {
|
||||
--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)";
|
||||
|
||||
&.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 {
|
||||
--big-icon-background-image: ~"url(@{app-image-const-path}/iconsbig@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);
|
||||
|
@ -185,12 +195,16 @@
|
|||
|
||||
// Skeleton of document
|
||||
|
||||
#editor-container {
|
||||
background-color: @canvas-background;
|
||||
}
|
||||
|
||||
.doc-placeholder {
|
||||
background: #fbfbfb;
|
||||
background: @canvas-content-background;
|
||||
width: 794px;
|
||||
margin: 46px auto;
|
||||
height: 100%;
|
||||
border: 1px solid #bebebe;
|
||||
border: 1px solid @canvas-page-border;
|
||||
padding-top: 50px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
@ -202,7 +216,7 @@
|
|||
> .line {
|
||||
height: 15px;
|
||||
margin: 30px 80px;
|
||||
background: #e2e2e2;
|
||||
background: fade(#000, 5%);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
@ -20,7 +20,15 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
|
@ -31,8 +39,8 @@
|
|||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
background: #f0f0f0;
|
||||
background: var(--canvas-background, #f0f0f0);
|
||||
background: #e2e2e2;
|
||||
background: var(--canvas-background, #e2e2e2);
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
|
@ -72,12 +80,13 @@
|
|||
height: 12px;
|
||||
border-radius: 3px;
|
||||
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 {
|
||||
background: #f7f7f7;
|
||||
background: var(--background-toolbar, #f7f7f7);
|
||||
background: #f1f1f1;
|
||||
background: var(--background-toolbar, #f1f1f1);
|
||||
height: 46px;
|
||||
padding: 10px 6px;
|
||||
box-sizing: content-box;
|
||||
|
@ -91,8 +100,8 @@
|
|||
}
|
||||
|
||||
.loadmask > .sktoolbar li {
|
||||
background: #ccc;
|
||||
background: var(--highlight-button-hover, #ccc);
|
||||
background: #d8dadc;
|
||||
background: var(--highlight-button-hover, #d8dadc);
|
||||
border-radius: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
@ -117,8 +126,8 @@
|
|||
|
||||
.loadmask > .skformula {
|
||||
height: 24px;
|
||||
background: #f7f7f7;
|
||||
background: var(--background-toolbar, #f7f7f7);
|
||||
background: #f1f1f1;
|
||||
background: var(--background-toolbar, #f1f1f1);
|
||||
}
|
||||
|
||||
.loadmask > .skformula ul {
|
||||
|
@ -158,8 +167,8 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 0;
|
||||
border: 1px solid #ccc;
|
||||
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
|
||||
border: 1px solid #bbbec2;
|
||||
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
|
||||
white-space: nowrap;
|
||||
|
||||
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
|
||||
|
|
|
@ -18,8 +18,8 @@
|
|||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
background: #f0f0f0;
|
||||
background: var(--canvas-background, #f0f0f0);
|
||||
background: #e2e2e2;
|
||||
background: var(--canvas-background, #e2e2e2);
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
|
@ -60,11 +60,12 @@
|
|||
border-radius: 3px;
|
||||
margin: 0 10px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
|
||||
}
|
||||
|
||||
.loadmask > .sktoolbar {
|
||||
background: #f7f7f7;
|
||||
background: var(--background-toolbar, #f7f7f7);
|
||||
background: #f1f1f1;
|
||||
background: var(--background-toolbar, #f1f1f1);
|
||||
height: 46px;
|
||||
padding: 10px 6px;
|
||||
box-sizing: content-box;
|
||||
|
@ -78,8 +79,8 @@
|
|||
}
|
||||
|
||||
.loadmask > .sktoolbar li {
|
||||
background: #ccc;
|
||||
background: var(--highlight-button-hover, #ccc);
|
||||
background: #d8dadc;
|
||||
background: var(--highlight-button-hover, #d8dadc);
|
||||
border-radius: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
@ -104,8 +105,8 @@
|
|||
|
||||
.loadmask>.skformula {
|
||||
height: 24px;
|
||||
background: #f7f7f7;
|
||||
background: var(--background-toolbar, #f7f7f7);
|
||||
background: #f1f1f1;
|
||||
background: var(--background-toolbar, #f1f1f1);
|
||||
}
|
||||
|
||||
.loadmask>.skformula ul {
|
||||
|
@ -145,8 +146,8 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 0;
|
||||
border: 1px solid #ccc;
|
||||
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
|
||||
border: 1px solid #bbbec2;
|
||||
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
|
||||
white-space: nowrap;
|
||||
|
||||
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
|
||||
|
|
|
@ -54,8 +54,8 @@
|
|||
|
||||
.selected {
|
||||
.listitem-icon {
|
||||
background-position-x: 0;
|
||||
background-position-x: @button-small-normal-icon-offset-x;
|
||||
background-position-x: -20px;
|
||||
background-position-x: @button-small-active-icon-offset-x;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue