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

[dark theme] support themes in loader

Browse source
This commit is contained in:
Maxim Kadushkin 2021-02-22 16:58:25 +03:00
parent b07a01bb0f
commit 78f9fa7637
10 changed files with 119 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,6 +10,16 @@
<!-- splash -->
<style type="text/css">
.theme-dark {
--toolbar-header-document: #2a2a2a;
--background-toolbar: #404040;
--border-toolbar: #2a2a2a;
--highlight-button-pressed: #606060;
--canvas-background: #666666;
/*--canvas-content-background: #fff;*/
--canvas-page-border: #555;
}
.loadmask {
left: 0;
top: 0;
@ -18,14 +28,14 @@
width: 100%;
overflow: hidden;
border: none;
background: #e2e2e2;
background: var(--canvas-background, #f0f0f0);
z-index: 1001;
}
.loadmask > .brendpanel {
width: 100%;
min-height: 28px;
background: #446995;
background: var(--toolbar-header-document, #446995);
}
.loadmask > .brendpanel > div {
@ -61,8 +71,8 @@
}
.loadmask > .sktoolbar {
background: #f1f1f1;
border-bottom: var(--scaled-one-px-value, 1px) solid #cfcfcf;
background: var(--background-toolbar, #f7f7f7);
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
height: 46px;
padding: 10px 6px;
box-sizing: content-box;
@ -76,7 +86,7 @@
}
.loadmask > .sktoolbar li {
background: #e2e2e2;
background: var(--highlight-button-pressed, #ccc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -100,11 +110,11 @@
}
.loadmask > .placeholder {
background: #fbfbfb;
background: var(--canvas-content-background, #fff);
width: 794px;
margin: 46px auto;
height: 100%;
border: var(--scaled-one-px-value, 1px) solid #bebebe;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
padding-top: 50px;
}

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

@ -19,7 +19,7 @@
width: 100%;
overflow: hidden;
border: none;
background: #e2e2e2;
background: var(--canvas-background, #f0f0f0);
z-index: 1001;
}
@ -27,6 +27,7 @@
width: 100%;
min-height: 28px;
background: #446995;
background: var(--toolbar-header-document, #446995);
}
.loadmask > .brendpanel > div {
@ -62,8 +63,8 @@
}
.loadmask > .sktoolbar {
background: #f1f1f1;
border-bottom: var(--scaled-one-px-value, 1px) solid #cfcfcf;
background: var(--background-toolbar, #f7f7f7);
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
height: 46px;
padding: 10px 6px;
box-sizing: content-box;
@ -77,7 +78,7 @@
}
.loadmask > .sktoolbar li {
background: #e2e2e2;
background: var(--highlight-button-pressed, #ccc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -101,11 +102,11 @@
}
.loadmask > .placeholder {
background: #fbfbfb;
background: var(--canvas-content-background, #fff);
width: 794px;
margin: 46px auto;
height: 100%;
border: var(--scaled-one-px-value, 1px) solid #bebebe;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
padding-top: 50px;
}

24
apps/presentationeditor/main/index.html
View file

@ -9,6 +9,16 @@
<!-- splash -->
<style type="text/css">
.theme-dark {
--toolbar-header-presentation: #2a2a2a;
--background-toolbar: #404040;
--border-toolbar: #2a2a2a;
--highlight-button-pressed: #606060;
--canvas-background: #666666;
/*--canvas-content-background: #fff;*/
--canvas-page-border: #555;
}
.loadmask {
left: 0;
top: 0;
@ -17,14 +27,14 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #e2e2e2;
background: var(--canvas-background, #f0f0f0);
z-index: 1001;
}
.loadmask > .brendpanel {
width: 100%;
min-height: 28px;
background: #aa5252;
background: var(--toolbar-header-presentation, #aa5252);
}
.loadmask > .brendpanel > div {
@ -60,8 +70,8 @@
}
.loadmask > .sktoolbar {
background: #f1f1f1;
border-bottom: var(--scaled-one-px-value, 1px) solid #cbcbcb;
background: var(--background-toolbar, #f7f7f7);
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
height: 46px;
padding: 10px 6px;
box-sizing: content-box;
@ -75,7 +85,7 @@
}
.loadmask > .sktoolbar li {
background: #ececec;
background: var(--highlight-button-pressed, #ccc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -136,8 +146,8 @@
position: absolute;
height: 100%;
width: 100%;
background: #fbfbfb;
border: var(--scaled-one-px-value, 1px) solid #dfdfdf;
background: var(--canvas-content-background, #fff);
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out;

14
apps/presentationeditor/main/index.html.deploy
View file

@ -19,14 +19,14 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #e2e2e2;
background: var(--canvas-background, #f0f0f0);
z-index: 1001;
}
.loadmask > .brendpanel {
width: 100%;
min-height: 28px;
background: #aa5252;
background: var(--toolbar-header-presentation, #aa5252);
}
.loadmask > .brendpanel > div {
@ -62,8 +62,8 @@
}
.loadmask > .sktoolbar {
background: #f1f1f1;
border-bottom: var(--scaled-one-px-value, 1px) solid #cbcbcb;
background: var(--background-toolbar, #f7f7f7);
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
height: 46px;
padding: 10px 6px;
box-sizing: content-box;
@ -77,7 +77,7 @@
}
.loadmask > .sktoolbar li {
background: #ececec;
background: var(--highlight-button-pressed, #ccc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -138,8 +138,8 @@
position: absolute;
height: 100%;
width: 100%;
background: #fbfbfb;
border: var(--scaled-one-px-value, 1px) solid #dfdfdf;
background: var(--canvas-content-background, #fff);
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out;

15
apps/presentationeditor/main/index.reporter.html
View file

@ -11,6 +11,13 @@
<!-- splash -->
<style>
.theme-dark {
--toolbar-header-presentation: #2a2a2a;
--canvas-background: #666666;
/*--canvas-content-background: #fff;*/
--canvas-page-border: #555;
}
.loadmask {
left: 0;
top: 0;
@ -19,14 +26,14 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
background: var(--canvas-background, #f0f0f0);
z-index: 10000;
}
.loadmask > .brendpanel {
width: 100%;
height: 56px;
background: #aa5252;
background: var(--toolbar-header-presentation, #aa5252);
}
.loadmask > .brendpanel > div {
@ -82,8 +89,8 @@
position: absolute;
height: 100%;
width: 100%;
background: #fbfbfb;
border: 1px solid #dfdfdf;
background: var(--canvas-content-background, #fff);
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out;

8
apps/presentationeditor/main/index.reporter.html.deploy
View file

@ -19,14 +19,14 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
background: var(--canvas-background, #f0f0f0);
z-index: 10000;
}
.loadmask > .brendpanel {
width: 100%;
height: 56px;
background: #aa5252;
background: var(--toolbar-header-presentation, #aa5252);
}
.loadmask > .brendpanel > div {
@ -82,8 +82,8 @@
position: absolute;
height: 100%;
width: 100%;
background: #fbfbfb;
border: 1px solid #dfdfdf;
background: var(--canvas-content-background, #fff);
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out;

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

@ -8,6 +8,17 @@
<!-- splash -->
<style type="text/css">
.theme-dark {
--toolbar-header-document: #2a2a2a;
--background-toolbar: #404040;
--background-normal: #333;
--border-toolbar: #2a2a2a;
--highlight-button-pressed: #606060;
--canvas-background: #666666;
/*--canvas-content-background: #fff;*/
--canvas-page-border: #555;
}
.loadmask {
left: 0;
top: 0;
@ -16,14 +27,14 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
background: var(--canvas-background, #f0f0f0);
z-index: 1001;
}
.loadmask > .brendpanel {
width: 100%;
min-height: 28px;
background: #40865c;
background: var(--toolbar-header-document, #40865c);
}
.loadmask > .brendpanel > div {
@ -59,7 +70,7 @@
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f7f7f7);
height: 46px;
padding: 10px 6px;
box-sizing: content-box;
@ -73,7 +84,7 @@
}
.loadmask > .sktoolbar li {
background: #e2e2e2;
background: var(--highlight-button-pressed, #ccc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -98,7 +109,7 @@
.loadmask > .skformula {
height: 24px;
background: #f1f1f1;
background: var(--background-toolbar, #f7f7f7);
}
.loadmask > .skformula ul {
@ -107,7 +118,7 @@
box-sizing: border-box;
border-style: solid;
border-width: var(--scaled-one-px-value, 1px);
border-color: #e1e1e1 transparent;
border-color: var(--border-toolbar, #cbcbcb) transparent;
}
.loadmask > .skformula li {
@ -116,10 +127,10 @@
height: 19px;
width: 100%;
margin-left: 20px;
background: #f7f7f7;
background: var(--background-normal, #fff);
border-style: solid;
border-width: var(--scaled-one-px-value, 1px);
border-color: transparent #e1e1e1;
border-color: transparent var(--border-toolbar, #cbcbcb);
}
.loadmask > .skformula li:first-child {
@ -128,11 +139,11 @@
}
.loadmask > .placeholder {
background: #fbfbfb;
background: var(--canvas-content-background, #fff);
width: 100%;
height: 100%;
font-size: 0;
border: 1px solid #dfdfdf;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
white-space: nowrap;
-webkit-animation: flickerAnimation 2s infinite ease-in-out;

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

@ -18,14 +18,14 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
background: var(--canvas-background, #f0f0f0);
z-index: 1001;
}
.loadmask > .brendpanel {
width: 100%;
min-height: 28px;
background: #40865c;
background: var(--toolbar-header-document, #40865c);
}
.loadmask > .brendpanel > div {
@ -61,7 +61,7 @@
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f7f7f7);
height: 46px;
padding: 10px 6px;
box-sizing: content-box;
@ -75,7 +75,7 @@
}
.loadmask > .sktoolbar li {
background: #e2e2e2;
background: var(--highlight-button-pressed, #ccc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -100,7 +100,7 @@
.loadmask>.skformula {
height: 24px;
background: #f1f1f1;
background: var(--background-toolbar, #f7f7f7);
}
.loadmask>.skformula ul {
@ -109,7 +109,7 @@
box-sizing: border-box;
border-style: solid;
border-width: var(--scaled-one-px-value, 1px);
border-color: #e1e1e1 transparent;
border-color: var(--border-toolbar, #cbcbcb) transparent;
}
.loadmask>.skformula li {
@ -118,10 +118,10 @@
height: 19px;
width: 100%;
margin-left: 20px;
background: #f7f7f7;
background: var(--background-normal, #fff);
border-style: solid;
border-width: var(--scaled-one-px-value, 1px);
border-color: transparent #e1e1e1;
border-color: transparent var(--border-toolbar, #cbcbcb);
}
.loadmask>.skformula li:first-child {
@ -130,7 +130,7 @@
}
.loadmask > .placeholder {
background: #fbfbfb;
background: var(--canvas-content-background, #fff);
width: 100%;
height: 100%;
font-size: 0;

27
apps/spreadsheeteditor/main/index_internal.html
View file

@ -8,6 +8,15 @@
<!-- splash -->
<style type="text/css">
.theme-dark {
--background-toolbar: #404040;
--background-normal: #333;
--border-toolbar: #2a2a2a;
--canvas-background: #666666;
--canvas-content-background: #fff;
--canvas-page-border: #555;
}
.loadmask {
left: 0;
top: 0;
@ -16,7 +25,7 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
background: var(--canvas-background, #f0f0f0);
z-index: 1001;
}
@ -29,7 +38,7 @@
.loadmask > .skformula {
height: 24px;
background: #f1f1f1;
background: var(--background-toolbar, #f7f7f7);
}
.loadmask > .skformula ul {
@ -37,8 +46,8 @@
font-size: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
border-color: #e1e1e1 transparent;
border-width: var(--scaled-one-px-value, 1px);
border-color: var(--border-toolbar, #cbcbcb) transparent;
}
.loadmask > .skformula li {
@ -47,10 +56,10 @@
height: 19px;
width: 100%;
margin-left: 20px;
background: #f7f7f7;
background: var(--background-normal, #fff);
border-style: solid;
border-width: 1px;
border-color: transparent #e1e1e1;
border-width: var(--scaled-one-px-value, 1px);
border-color: transparent var(--border-toolbar, #cbcbcb);
}
.loadmask > .skformula li:first-child {
@ -59,11 +68,11 @@
}
.loadmask > .placeholder {
background: #fbfbfb;
background: var(--canvas-content-background, #fff);
width: 100%;
height: 100%;
font-size: 0;
border: 1px solid #dfdfdf;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
white-space: nowrap;
-webkit-animation: flickerAnimation 2s infinite ease-in-out;

16
apps/spreadsheeteditor/main/index_internal.html.deploy
View file

@ -18,7 +18,7 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
background: var(--canvas-background, #f0f0f0);
z-index: 1001;
}
@ -31,7 +31,7 @@
.loadmask>.skformula {
height: 24px;
background: #f1f1f1;
background: var(--background-toolbar, #f7f7f7);
}
.loadmask>.skformula ul {
@ -39,8 +39,8 @@
font-size: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
border-color: #e1e1e1 transparent;
border-width: var(--scaled-one-px-value, 1px);
border-color: var(--border-toolbar, #cbcbcb) transparent;
}
.loadmask>.skformula li {
@ -49,10 +49,10 @@
height: 19px;
width: 100%;
margin-left: 20px;
background: #f7f7f7;
background: var(--background-normal, #fff);
border-style: solid;
border-width: 1px;
border-color: transparent #e1e1e1;
border-width: var(--scaled-one-px-value, 1px);
border-color: transparent var(--border-toolbar, #cbcbcb);
}
.loadmask>.skformula li:first-child {
@ -65,7 +65,7 @@
width: 100%;
height: 100%;
font-size: 0;
border: 1px solid #dfdfdf;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
white-space: nowrap;
-webkit-animation: flickerAnimation 2s infinite ease-in-out;