[DE forms] Support dark theme
This commit is contained in:
parent
98c06bbac5
commit
034fa5a25b
|
@ -217,7 +217,7 @@
|
||||||
.brand-logo {
|
.brand-logo {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 24px;
|
height: 20px;
|
||||||
background: data-uri('../../../../common/main/resources/img/header/dark-logo_s.svg') no-repeat;
|
background: data-uri('../../../../common/main/resources/img/header/dark-logo_s.svg') no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -150,6 +150,7 @@ require([
|
||||||
'documenteditor/forms/app/view/ApplicationView',
|
'documenteditor/forms/app/view/ApplicationView',
|
||||||
'common/main/lib/util/utils',
|
'common/main/lib/util/utils',
|
||||||
'common/main/lib/util/LocalStorage',
|
'common/main/lib/util/LocalStorage',
|
||||||
|
'common/main/lib/controller/Themes',
|
||||||
'common/forms/lib/view/modals'
|
'common/forms/lib/view/modals'
|
||||||
], function() {
|
], function() {
|
||||||
app.start();
|
app.start();
|
||||||
|
|
|
@ -58,6 +58,8 @@ define([
|
||||||
'embedded' : true
|
'embedded' : true
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Common.UI.Themes.init(this.api);
|
||||||
|
|
||||||
$(window).on('resize', this.onDocumentResize.bind(this));
|
$(window).on('resize', this.onDocumentResize.bind(this));
|
||||||
|
|
||||||
this.boxSdk = $('#editor_sdk');
|
this.boxSdk = $('#editor_sdk');
|
||||||
|
|
|
@ -140,6 +140,7 @@ require([
|
||||||
'documenteditor/forms/app/view/ApplicationView',
|
'documenteditor/forms/app/view/ApplicationView',
|
||||||
'common/main/lib/util/utils',
|
'common/main/lib/util/utils',
|
||||||
'common/main/lib/util/LocalStorage',
|
'common/main/lib/util/LocalStorage',
|
||||||
|
'common/main/lib/controller/Themes',
|
||||||
'common/forms/lib/view/modals'
|
'common/forms/lib/view/modals'
|
||||||
], function() {
|
], function() {
|
||||||
window.compareVersions = true;
|
window.compareVersions = true;
|
||||||
|
|
|
@ -14,6 +14,23 @@
|
||||||
<!-- splash -->
|
<!-- splash -->
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
.theme-dark {
|
||||||
|
--background-toolbar: #404040;
|
||||||
|
--border-toolbar: #2a2a2a;
|
||||||
|
--highlight-button-hover: #555;
|
||||||
|
--canvas-background: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-classic-light {
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light {
|
||||||
|
--background-toolbar: #f7f7f7;
|
||||||
|
--border-toolbar: #cbcbcb;
|
||||||
|
--highlight-button-hover: #e0e0e0;
|
||||||
|
--canvas-background: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
.loadmask {
|
.loadmask {
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -22,7 +39,8 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #f4f4f4;
|
background-color: #e2e2e2;
|
||||||
|
background-color: var(--canvas-background, #e2e2e2);
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -31,8 +49,11 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
background-color: #F7F7F7;
|
background-color: #F7F7F7;
|
||||||
-webkit-box-shadow: inset 0 -1px 0 #dbdbdb;
|
background-color: var(--background-toolbar, #F7F7F7);
|
||||||
box-shadow: inset 0 -1px 0 #dbdbdb;
|
-webkit-box-shadow: inset 0 -1px 0 #cbcbcb;
|
||||||
|
box-shadow: inset 0 -1px 0 #cbcbcb;
|
||||||
|
-webkit-box-shadow: inset 0 -1px 0 var(--border-toolbar, #cbcbcb);
|
||||||
|
box-shadow: inset 0 -1px 0 var(--border-toolbar, #cbcbcb);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel > div {
|
.loadmask > .brendpanel > div {
|
||||||
|
@ -43,7 +64,7 @@
|
||||||
|
|
||||||
.loadmask > .brendpanel .loading-logo {
|
.loadmask > .brendpanel .loading-logo {
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
height: 24px;
|
height: 20px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -60,8 +81,8 @@
|
||||||
|
|
||||||
.loadmask > .brendpanel .circle {
|
.loadmask > .brendpanel .circle {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 24px;
|
width: 20px;
|
||||||
height: 24px;
|
height: 20px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
margin: 4px 10px;
|
margin: 4px 10px;
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
@ -77,7 +98,7 @@
|
||||||
.loadmask > .placeholder > .line {
|
.loadmask > .placeholder > .line {
|
||||||
height: 15px;
|
height: 15px;
|
||||||
margin: 30px;
|
margin: 30px;
|
||||||
background: #e2e2e2;
|
background: rgba(0,0,0,.05);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
@ -112,7 +133,6 @@
|
||||||
<!--[if lt IE 9]>
|
<!--[if lt IE 9]>
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script>
|
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
<script src="../../common/main/lib/util/themeinit.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="embed-body">
|
<body class="embed-body">
|
||||||
|
|
|
@ -20,7 +20,8 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #f4f4f4;
|
background-color: #e2e2e2;
|
||||||
|
background-color: var(--canvas-background, #e2e2e2);
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -29,8 +30,11 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
background-color: #F7F7F7;
|
background-color: #F7F7F7;
|
||||||
-webkit-box-shadow: inset 0 -1px 0 #dbdbdb;
|
background-color: var(--background-toolbar, #F7F7F7);
|
||||||
box-shadow: inset 0 -1px 0 #dbdbdb;
|
-webkit-box-shadow: inset 0 -1px 0 #cbcbcb;
|
||||||
|
box-shadow: inset 0 -1px 0 #cbcbcb;
|
||||||
|
-webkit-box-shadow: inset 0 -1px 0 var(--border-toolbar, #cbcbcb);
|
||||||
|
box-shadow: inset 0 -1px 0 var(--border-toolbar, #cbcbcb);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel > div {
|
.loadmask > .brendpanel > div {
|
||||||
|
@ -41,7 +45,7 @@
|
||||||
|
|
||||||
.loadmask > .brendpanel .loading-logo {
|
.loadmask > .brendpanel .loading-logo {
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
height: 24px;
|
height: 20px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -58,8 +62,8 @@
|
||||||
|
|
||||||
.loadmask > .brendpanel .circle {
|
.loadmask > .brendpanel .circle {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 24px;
|
width: 20px;
|
||||||
height: 24px;
|
height: 20px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
margin: 4px 10px;
|
margin: 4px 10px;
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
@ -75,7 +79,7 @@
|
||||||
.loadmask > .placeholder > .line {
|
.loadmask > .placeholder > .line {
|
||||||
height: 15px;
|
height: 15px;
|
||||||
margin: 30px;
|
margin: 30px;
|
||||||
background: #e2e2e2;
|
background: rgba(0,0,0,.05);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue