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

[DE] fix skeleton dark theme

Browse source
This commit is contained in:
Maxim Kadushkin 2021-11-04 22:44:24 +03:00
parent e9eb999d51
commit 937501deea
3 changed files with 33 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/common/main/lib/util/htmlutils.js
View file

@ -90,3 +90,13 @@ if ( !ui_theme_name ) {
if ( !!ui_theme_name ) { if ( !!ui_theme_name ) {
document.body.classList.add(ui_theme_name); document.body.classList.add(ui_theme_name);
} }
if ( checkLocalStorage ) {
var content_theme = localStorage.getItem("content-theme");
if ( content_theme == 'dark' ) {
var current_theme = localStorage.getItem("ui-theme");
if ( !!current_theme && /type":\s*"dark/.test(current_theme) ) {
document.body.classList.add("content-theme-dark");
}
}
}

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

@ -16,9 +16,15 @@
--border-toolbar: #2a2a2a; --border-toolbar: #2a2a2a;
--highlight-button-hover: #555; --highlight-button-hover: #555;
--highlight-header-button-hover: rgba(255,255,255,.05); --highlight-header-button-hover: rgba(255,255,255,.05);
--canvas-background: #666666; --canvas-background: #555;
/*--canvas-content-background: #fff;*/ /*--canvas-content-background: #fff;*/
--canvas-page-border: #555; --loadmask-canvas-page-border: #555;
}
.content-theme-dark {
--skeleton-canvas-content-background: #3a3a3a;
--skeleton-canvas-page-border: #2a2a2a;
--skeleton-canvas-line: rgba(255,255,255,.05);
} }
.theme-classic-light { .theme-classic-light {
@ -30,7 +36,7 @@
--highlight-button-hover: #ccc; --highlight-button-hover: #ccc;
--highlight-header-button-hover: rgba(255,255,255,.15); --highlight-header-button-hover: rgba(255,255,255,.15);
--canvas-background: #eee; --canvas-background: #eee;
--canvas-page-border: #ccc; --loadmask-canvas-page-border: #ccc;
} }
.loadmask { .loadmask {
@ -130,19 +136,19 @@
.loadmask > .placeholder { .loadmask > .placeholder {
background: #fff; background: #fff;
background: var(--canvas-content-background, #fff); background: var(--skeleton-canvas-content-background, #fff);
width: 794px; width: 794px;
margin: 46px auto; margin: 46px auto;
height: 100%; height: 100%;
border: 1px solid #bbbec2; border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2); border: var(--scaled-one-px-value, 1px) solid var(--skeleton-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: rgba(0,0,0,.05); background: var(--skeleton-canvas-line, rgba(0,0,0,.05));
overflow: hidden; overflow: hidden;
position: relative; position: relative;

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

@ -228,4 +228,15 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
.content-theme-dark & {
@canvas-content-dark-background: #3a3a3a;
@canvas-content-dark-page-border: #2a2a2a;
background-color: @canvas-content-dark-background;
border-color: @canvas-content-dark-page-border;
> .line {
background-color: fade(#fff, 5%);
}
}
} }