pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 11:31:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request '[common] Transfer skeleton variables in index for modern dark theme' (#490) from fix/skeleton-modern-dark-theme into release/v9.0.0

Browse Source
This commit is contained in:
Maxim Kadushkin
2025-06-05 22:28:30 +00:00
parent 6f7c15a585 bd3d78ccca
commit 2a7aed4677
13 changed files with 396 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/common/main/lib/controller/Themes.js
View File

@ -182,27 +182,6 @@ define([
source: 'static',
icons: {
cls: 'mod2',
},
skeleton: {
css: `.theme-night .loadmask, .theme-type-dark .loadmask {
--sk-height-toolbar-controls: 84px; --sk-layout-padding-toolbar: 0 10px;
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06); --sk-border-radius-toolbar: 8px;
--sk-background-toolbar-header-word: #222222; --sk-background-toolbar-header-pdf: #222222;
--sk-background-toolbar-header-slide: #222222;--sk-background-toolbar-header-cell: #222222;
--sk-background-toolbar-header-visio: #222222;
--sk-background-toolbar: #222222; --sk-background-toolbar-controls: #404040;
--sk-background-toolbar-tab: #585858; --sk-background-toolbar-button: #555;
--sk-layout-padding-toolbar-controls: 0 8px; --sk-layout-padding-header: 0 10px;
--sk-canvas-background: #222222; --sk-canvas-content-background: #fff;
--sk-canvas-page-border: #555; --sk-canvas-line: rgba(0,0,0,.05);
--sk-height-formula: 38px; --sk-padding-formula: 10px 10px 4px 10px;
--sk-border-style-formula: none; --sk-gap-formula-field: 28px;
--sk-border-radius-formula-field: 3px;
}
.content-theme-dark {
--sk-canvas-content-background: #3a3a3a;
--sk-canvas-page-border: #616161; --sk-canvas-line: rgba(255,255,255,.05);
}`
}
},
}

36
apps/documenteditor/main/index.html
View File

@ -28,6 +28,42 @@
--sk-canvas-line: rgba(0,0,0,.05);
}
.theme-night .loadmask {
--sk-height-toolbar-controls: 84px;
--sk-layout-padding-toolbar: 0 10px;
--sk-border-radius-toolbar: 8px;
/* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
/* --toolbar-header-document: #222222 */
--sk-background-toolbar-header-word: #222222;
/* --toolbar-header-document: #222222 */
--sk-background-toolbar: #222222;
/* --background-toolbar: #404040; */
--sk-background-toolbar-controls: #404040;
/* --highlight-header-button-hover: #585858; */
--sk-background-toolbar-tab: #585858;
/* --highlight-button-hover: #585858 */
--sk-background-toolbar-button: #585858;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-layout-padding-header: 0 10px;
/* --canvas-background: #222222; */
--sk-canvas-background: #222222;
/* --canvas-content-background: #fff; */
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #555;
--sk-canvas-line: rgba(0,0,0,.05);
}
/*.theme-dark .loadmask, .theme-type-dark .loadmask {*/
/* !*--toolbar-header-document: #2a2a2a;*!*/
/* --sk-background-toolbar-header-word: #2a2a2a;*/

36
apps/documenteditor/main/index.html.deploy
View File

@ -30,6 +30,42 @@
--sk-canvas-line: rgba(0,0,0,.05);
}
.theme-night .loadmask {
--sk-height-toolbar-controls: 84px;
--sk-layout-padding-toolbar: 0 10px;
--sk-border-radius-toolbar: 8px;
/* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
/* --toolbar-header-document: #222222 */
--sk-background-toolbar-header-word: #222222;
/* --toolbar-header-document: #222222 */
--sk-background-toolbar: #222222;
/* --background-toolbar: #404040; */
--sk-background-toolbar-controls: #404040;
/* --highlight-header-button-hover: #585858; */
--sk-background-toolbar-tab: #585858;
/* --highlight-button-hover: #585858 */
--sk-background-toolbar-button: #585858;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-layout-padding-header: 0 10px;
/* --canvas-background: #222222; */
--sk-canvas-background: #222222;
/* --canvas-content-background: #fff; */
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #555;
--sk-canvas-line: rgba(0,0,0,.05);
}
.loadmask {
left: 0;
top: 0;

36
apps/pdfeditor/main/index.html
View File

@ -28,6 +28,42 @@
--sk-canvas-line: rgba(0,0,0,.05);
}
.theme-night .loadmask {
--sk-height-toolbar-controls: 84px;
--sk-layout-padding-toolbar: 0 10px;
--sk-border-radius-toolbar: 8px;
/* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
/* --toolbar-header-document: #222222 */
--sk-background-toolbar-header-pdf: #222222;
/* --toolbar-header-document: #222222 */
--sk-background-toolbar: #222222;
/* --background-toolbar: #404040; */
--sk-background-toolbar-controls: #404040;
/* --highlight-header-button-hover: #585858; */
--sk-background-toolbar-tab: #585858;
/* --highlight-button-hover: #585858 */
--sk-background-toolbar-button: #585858;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-layout-padding-header: 0 10px;
/* --canvas-background: #222222; */
--sk-canvas-background: #222222;
/* --canvas-content-background: #fff; */
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #555;
--sk-canvas-line: rgba(0,0,0,.05);
}
/* .theme-dark, .theme-type-dark {
--toolbar-header-pdf: #2a2a2a;
--background-toolbar: #404040;

36
apps/pdfeditor/main/index.html.deploy
View File

@ -29,6 +29,42 @@
--sk-canvas-line: rgba(0,0,0,.05);
}
.theme-night .loadmask {
--sk-height-toolbar-controls: 84px;
--sk-layout-padding-toolbar: 0 10px;
--sk-border-radius-toolbar: 8px;
/* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
/* --toolbar-header-document: #222222 */
--sk-background-toolbar-header-pdf: #222222;
/* --toolbar-header-document: #222222 */
--sk-background-toolbar: #222222;
/* --background-toolbar: #404040; */
--sk-background-toolbar-controls: #404040;
/* --highlight-header-button-hover: #585858; */
--sk-background-toolbar-tab: #585858;
/* --highlight-button-hover: #585858 */
--sk-background-toolbar-button: #585858;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-layout-padding-header: 0 10px;
/* --canvas-background: #222222; */
--sk-canvas-background: #222222;
/* --canvas-content-background: #fff; */
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #555;
--sk-canvas-line: rgba(0,0,0,.05);
}
.loadmask {
left: 0;
top: 0;

36
apps/presentationeditor/main/index.html
View File

@ -27,6 +27,42 @@
--sk-canvas-line: rgba(0,0,0,.05);
}
.theme-night .loadmask {
--sk-height-toolbar-controls: 84px;
--sk-layout-padding-toolbar: 0 10px;
--sk-border-radius-toolbar: 8px;
/* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
/* --toolbar-header-document: #222222 */
--sk-background-toolbar-header-slide: #222222;
/* --toolbar-header-document: #222222 */
--sk-background-toolbar: #222222;
/* --background-toolbar: #404040; */
--sk-background-toolbar-controls: #404040;
/* --highlight-header-button-hover: #585858; */
--sk-background-toolbar-tab: #585858;
/* --highlight-button-hover: #585858 */
--sk-background-toolbar-button: #585858;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-layout-padding-header: 0 10px;
/* --canvas-background: #222222; */
--sk-canvas-background: #222222;
/* --canvas-content-background: #fff; */
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #555;
--sk-canvas-line: rgba(0,0,0,.05);
}
/* .theme-dark, .theme-type-dark {
--toolbar-header-presentation: #2a2a2a;
--background-toolbar: #404040;

36
apps/presentationeditor/main/index.html.deploy
View File

@ -29,6 +29,42 @@
--sk-canvas-line: rgba(0,0,0,.05);
}
.theme-night .loadmask {
--sk-height-toolbar-controls: 84px;
--sk-layout-padding-toolbar: 0 10px;
--sk-border-radius-toolbar: 8px;
/* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
/* --toolbar-header-document: #222222 */
--sk-background-toolbar-header-slide: #222222;
/* --toolbar-header-document: #222222 */
--sk-background-toolbar: #222222;
/* --background-toolbar: #404040; */
--sk-background-toolbar-controls: #404040;
/* --highlight-header-button-hover: #585858; */
--sk-background-toolbar-tab: #585858;
/* --highlight-button-hover: #585858 */
--sk-background-toolbar-button: #585858;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-layout-padding-header: 0 10px;
/* --canvas-background: #222222; */
--sk-canvas-background: #222222;
/* --canvas-content-background: #fff; */
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #555;
--sk-canvas-line: rgba(0,0,0,.05);
}
.loadmask {
left: 0;
top: 0;

44
apps/spreadsheeteditor/main/index.html
View File

@ -31,6 +31,48 @@
--sk-border-radius-formula-field: 3px;
}
.theme-night .loadmask {
--sk-height-toolbar-controls: 84px;
--sk-layout-padding-toolbar: 0 10px;
--sk-border-radius-toolbar: 8px;
/* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
/* --toolbar-header-document: #222222 */
--sk-background-toolbar-header-cell: #222222;
/* --toolbar-header-document: #222222 */
--sk-background-toolbar: #222222;
/* --background-toolbar: #404040; */
--sk-background-toolbar-controls: #404040;
/* --highlight-header-button-hover: #585858; */
--sk-background-toolbar-tab: #585858;
/* --highlight-button-hover: #585858 */
--sk-background-toolbar-button: #585858;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-layout-padding-header: 0 10px;
/* --canvas-background: #222222; */
--sk-canvas-background: #222222;
/* --canvas-content-background: #fff; */
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #555;
--sk-canvas-line: rgba(0,0,0,.05);
--sk-height-formula: 38px;
--sk-padding-formula: 10px 10px 4px 10px;
--sk-border-style-formula: none;
--sk-gap-formula-field: 28px;
--sk-border-radius-formula-field: 3px;
}
/* .theme-dark, .theme-type-dark {
--toolbar-header-spreadsheet: #2a2a2a;
--background-toolbar: #404040;
@ -206,7 +248,7 @@
display: inline-block;
box-sizing: border-box;
background: #fff;
background: var(--background-normal, #fff);
background: var(--sk-background-toolbar-controls, #fff);
border-left: 1px solid #cbcbcb;
border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb);
border-radius: 0px;

44
apps/spreadsheeteditor/main/index.html.deploy
View File

@ -34,6 +34,48 @@
--sk-border-radius-formula-field: 3px;
}
.theme-night .loadmask {
--sk-height-toolbar-controls: 84px;
--sk-layout-padding-toolbar: 0 10px;
--sk-border-radius-toolbar: 8px;
/* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
/* --toolbar-header-document: #222222 */
--sk-background-toolbar-header-cell: #222222;
/* --toolbar-header-document: #222222 */
--sk-background-toolbar: #222222;
/* --background-toolbar: #404040; */
--sk-background-toolbar-controls: #404040;
/* --highlight-header-button-hover: #585858; */
--sk-background-toolbar-tab: #585858;
/* --highlight-button-hover: #585858 */
--sk-background-toolbar-button: #585858;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-layout-padding-header: 0 10px;
/* --canvas-background: #222222; */
--sk-canvas-background: #222222;
/* --canvas-content-background: #fff; */
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #555;
--sk-canvas-line: rgba(0,0,0,.05);
--sk-height-formula: 38px;
--sk-padding-formula: 10px 10px 4px 10px;
--sk-border-style-formula: none;
--sk-gap-formula-field: 28px;
--sk-border-radius-formula-field: 3px;
}
.loadmask {
left: 0;
top: 0;
@ -181,7 +223,7 @@
display: inline-block;
box-sizing: border-box;
background: #fff;
background: var(--background-normal, #fff);
background: var(--sk-background-toolbar-controls, #fff);
border-left: 1px solid #cbcbcb;
border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb);
border-radius: 0px;

11
apps/spreadsheeteditor/main/index_internal.html
View File

@ -25,6 +25,17 @@
--sk-border-radius-formula-field: 3px;
}
.theme-night .loadmask {
/* --toolbar-header-document: #222222 */
--sk-background-toolbar: #222222;
--sk-height-formula: 38px;
--sk-padding-formula: 10px 10px 4px 10px;
--sk-border-style-formula: none;
--sk-gap-formula-field: 28px;
--sk-border-radius-formula-field: 3px;
}
.loadmask {
left: 0;
top: 0;

11
apps/spreadsheeteditor/main/index_internal.html.deploy
View File

@ -32,6 +32,17 @@
z-index: 1001;
}
.theme-night .loadmask {
/* --toolbar-header-document: #222222 */
--sk-background-toolbar: #222222;
--sk-height-formula: 38px;
--sk-padding-formula: 10px 10px 4px 10px;
--sk-border-style-formula: none;
--sk-gap-formula-field: 28px;
--sk-border-radius-formula-field: 3px;
}
.loadmask ul {
margin: 0;
padding: 0;

36
apps/visioeditor/main/index.html
View File

@ -50,6 +50,42 @@
--sk-canvas-line: rgba(0,0,0,.05);
}
.theme-night .loadmask {
--sk-height-toolbar-controls: 84px;
--sk-layout-padding-toolbar: 0 10px;
--sk-border-radius-toolbar: 8px;
/* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
/* --toolbar-header-document: #222222 */
--sk-background-toolbar-header-pdf: #222222;
/* --toolbar-header-document: #222222 */
--sk-background-toolbar: #222222;
/* --background-toolbar: #404040; */
--sk-background-toolbar-controls: #404040;
/* --highlight-header-button-hover: #585858; */
--sk-background-toolbar-tab: #585858;
/* --highlight-button-hover: #585858 */
--sk-background-toolbar-button: #585858;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-layout-padding-header: 0 10px;
/* --canvas-background: #222222; */
--sk-canvas-background: #222222;
/* --canvas-content-background: #fff; */
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #555;
--sk-canvas-line: rgba(0,0,0,.05);
}
.loadmask {
left: 0;
top: 0;

36
apps/visioeditor/main/index.html.deploy
View File

@ -29,6 +29,42 @@
--sk-canvas-line: rgba(0,0,0,.05);
}
.theme-night .loadmask {
--sk-height-toolbar-controls: 84px;
--sk-layout-padding-toolbar: 0 10px;
--sk-border-radius-toolbar: 8px;
/* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
/* --toolbar-header-document: #222222 */
--sk-background-toolbar-header-pdf: #222222;
/* --toolbar-header-document: #222222 */
--sk-background-toolbar: #222222;
/* --background-toolbar: #404040; */
--sk-background-toolbar-controls: #404040;
/* --highlight-header-button-hover: #585858; */
--sk-background-toolbar-tab: #585858;
/* --highlight-button-hover: #585858 */
--sk-background-toolbar-button: #585858;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-layout-padding-header: 0 10px;
/* --canvas-background: #222222; */
--sk-canvas-background: #222222;
/* --canvas-content-background: #fff; */
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #555;
--sk-canvas-line: rgba(0,0,0,.05);
}
.loadmask {
left: 0;
top: 0;