pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-04-07 14:06:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Changed skeleton for white theme for VE

Browse Source
This commit is contained in:
Dmitry-Ilyushechkin
2025-05-05 19:23:35 +03:00
parent 5368bd9bac
commit 794ec07cd7
5 changed files with 168 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,7 +62,8 @@ define([
--sk-shadow-toolbar: inset 0 -1px #cbcbcb; --sk-border-radius-toolbar: 0;
--sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f7f7f7;
--sk-background-toolbar-header-word: #446995; --sk-background-toolbar-header-pdf: #aa5252;
--sk-background-toolbar-header-slide: #BE664F; --sk-background-toolbar-header-cell: #40865c;
--sk-background-toolbar-header-slide: #BE664F; --sk-background-toolbar-header-cell: #40865c;
--sk-background-toolbar-header-visio: #444796;
--sk-background-toolbar-tab: rgba(0,0,0,.15); --sk-background-toolbar-button: #d8dadc;
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
--sk-canvas-background: #eee; --sk-canvas-content-background: #fff;
@ -79,6 +80,7 @@ define([
--sk-shadow-toolbar: inset 0 -1px #cbcbcb; --sk-border-radius-toolbar: 0;
--sk-background-toolbar-header-word: #446995; --sk-background-toolbar-header-pdf: #aa5252;
--sk-background-toolbar-header-slide: #BE664F;; --sk-background-toolbar-header-cell: #40865c;
--sk-background-toolbar-header-visio: #444796;
--sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f1f1f1;
--sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555;
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
@ -97,6 +99,7 @@ define([
--sk-shadow-toolbar: inset 0 -1px #616161; --sk-border-radius-toolbar: 0;
--sk-background-toolbar-header-word: #2a2a2a; --sk-background-toolbar-header-pdf: #2a2a2a;
--sk-background-toolbar-header-slide: #2a2a2a;--sk-background-toolbar-header-cell: #2a2a2a;
--sk-background-toolbar-header-visio: #2a2a2a;
--sk-background-toolbar: #404040; --sk-background-toolbar-controls: #404040;
--sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555;
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
@ -119,6 +122,7 @@ define([
--sk-shadow-toolbar: inset 0 -1px #616161; --sk-border-radius-toolbar: 0;
--sk-background-toolbar-header-word: #2a2a2a; --sk-background-toolbar-header-pdf: #2a2a2a;
--sk-background-toolbar-header-slide: #2a2a2a;--sk-background-toolbar-header-cell: #2a2a2a;
--sk-background-toolbar-header-visio: #2a2a2a;
--sk-background-toolbar: #404040; --sk-background-toolbar-controls: #404040;
--sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555;
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
@ -140,6 +144,7 @@ define([
--sk-shadow-toolbar: inset 0 -1px #cbcbcb; --sk-border-radius-toolbar: 0;
--sk-background-toolbar-header-word: #f7f7f7; --sk-background-toolbar-header-pdf: #f7f7f7;
--sk-background-toolbar-header-slide: #f7f7f7;--sk-background-toolbar-header-cell: #f7f7f7;
--sk-background-toolbar-header-visio: #f7f7f7;
--sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f1f1f1;
--sk-background-toolbar-tab: #e0e0e0; --sk-background-toolbar-button: #e0e0e0;
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;

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

@ -272,7 +272,7 @@
<script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
<script src="../../../../../apps/common/main/lib/util/docserviceworker.js?__inline=true"></script>
<div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><section class="box-controls"><div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar" style="display: none;"><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 144px;"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li class="big"/><li class="big"/><li class="big"/><li class="space"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul></section></div><div class="placeholder" style="display: none;"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
<div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar" style="display: none;"><section class="box-controls"><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 144px;"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li class="big"/><li class="big"/><li class="big"/><li class="space"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul></section></div><div class="placeholder" style="display: none;"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
<div id="viewport" role="main"></div>
<script>

25
apps/visioeditor/main/app/controller/Viewport.js
View File

@ -110,6 +110,7 @@ define([
this.api = api;
this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',this.onApiCoAuthoringDisconnect.bind(this));
Common.NotificationCenter.on('api:disconnect', this.onApiCoAuthoringDisconnect.bind(this));
Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
},
getApi: function() {
@ -325,6 +326,28 @@ define([
onTabBackgroundChange: function (background) {
background = background || Common.Utils.InternalSettings.get("settings-tab-background");
this.viewport.vlayout.getItem('toolbar').el.toggleClass('style-off-tabs', background==='toolbar');
}
},
onThemeChanged: function () {
if (Common.UI.Themes.available()) {
var _intvars = Common.Utils.InternalSettings;
var $filemenu = $('.toolbar-fullview-panel');
const computed_style = window.getComputedStyle(document.body);
_intvars.set('toolbar-height-controls', parseInt(computed_style.getPropertyValue("--toolbar-height-controls") || 84));
_intvars.set('toolbar-height-normal', _intvars.get('toolbar-height-tabs') + _intvars.get('toolbar-height-controls'));
$filemenu.css('top', (Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs-top-title') : 0) + _intvars.get('document-title-height'));
this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ?
_intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal');
const height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25);
if (this.viewport?.vlayout?.getItem('statusbar')) {
this.viewport.vlayout.getItem('statusbar').height = height;
}
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
}
},
}, VE.Controllers.Viewport));
});

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

@ -9,7 +9,7 @@
<!-- splash -->
<style type="text/css">
.theme-dark, .theme-type-dark {
/* .theme-dark, .theme-type-dark {
--toolbar-header-visio: #2a2a2a;
--background-toolbar: #404040;
--border-toolbar: #2a2a2a;
@ -17,7 +17,7 @@
--highlight-header-button-hover: rgba(255,255,255,.15);
--canvas-background: #666666;
/*--canvas-content-background: #fff;*/
--canvas-page-border: #555;
/* --canvas-page-border: #555;
}
.theme-classic-light {
@ -26,10 +26,28 @@
.theme-light {
--background-toolbar: #f1f1f1;
/*--border-toolbar: #cbcbcb;*/
--highlight-button-hover: #d8dadc;
/* --highlight-button-hover: #d8dadc;
--highlight-header-button-hover: rgba(0,0,0,.15);
--canvas-background: #eee;
--canvas-page-border: #ccc;
} */
.loadmask {
--sk-height-toolbar-controls:84px;
--sk-layout-padding-toolbar:0 10px;
--sk-layout-padding-header: 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: #f3f3f3;
--sk-background-toolbar-controls: #fff;
--sk-canvas-background: #f3f3f3;
--sk-background-toolbar-header-pdf: #f3f3f3;
--sk-background-toolbar-tab: #eaeaea;
--sk-background-toolbar-button: #f9f9f9;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #dde0e5;
--sk-canvas-line: rgba(0,0,0,.05);
}
.loadmask {
@ -41,20 +59,22 @@
overflow: hidden;
border: none;
background: #e2e2e2;
background: var(--canvas-background, #e2e2e2);
background: var(--sk-canvas-background, #eee);
z-index: 1002;
}
.loadmask > .brendpanel {
width: 100%;
/* width: 100%; */
min-height: 28px;
background: #444796;
background: var(--toolbar-header-visio, #444796);
background: var(--sk-background-toolbar-header-visio);
padding: var(--sk-layout-padding-header);
}
.loadmask > .brendpanel .underline {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
/* background: var(--background-toolbar, #f1f1f1); */
background: var(--sk-background-toolbar-header-visio);
}
.loadmask > .brendpanel > div {
@ -81,7 +101,8 @@
}
.loadmask > .brendpanel .spacer {
margin-left: auto;
/* margin-left: auto; */
flex-grow: 1;
}
.loadmask > .brendpanel .rect {
@ -91,12 +112,12 @@
border-radius: 3px;
margin: 0 10px;
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .brendpanel .underline .rect {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-tab);
opacity: 0.4;
}
@ -105,19 +126,36 @@
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
/* margin: 0 10px; */
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .sktoolbar {
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;
padding: 10px 6px;
/*height: 66px;*/
/*height: var(--sk-height-toolbar-controls, 66px);*/
padding: 0;
padding: var(--sk-layout-padding-toolbar, 0);
box-sizing: content-box;
background-color: var(--sk-background-toolbar, #f7f7f7);
}
.loadmask > .sktoolbar > .box-controls {
background: var(--sk-background-toolbar-controls, #f7f7f7);
border-radius: var(--sk-border-radius-toolbar, 0);
/*padding: 10px 7px;*/
/*padding: 0 7px;*/
padding: var(--sk-layout-padding-toolbar-controls);
box-shadow: var(--sk-shadow-toolbar);
height: 66px;
height: var(--sk-height-toolbar-controls);
display: flex;
flex-direction: column;
justify-content: center;
row-gap: 5px;
}
.loadmask > .sktoolbar ul {
@ -125,12 +163,12 @@
padding: 0;
white-space: nowrap;
position: relative;
height: 25px;
height: 20px;
}
.loadmask > .sktoolbar li {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-button, #d8dadc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -196,9 +234,9 @@
height: 100%;
width: 100%;
background: #fff;
background: var(--canvas-content-background, #fff);
background: var(--sk-canvas-content-background, #fff);
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(--sk-canvas-page-border, #bbbec2);
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out;
@ -328,17 +366,42 @@
<script src="../../common/main/lib/util/htmlutils.js"></script>
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;">
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
<div>
<div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div>
<div class="spacer"></div>
<div class="circle"></div>
</div>
<div>
<span class="rect"></span>
<span class="rect"></span>
<span class="rect"></span>
<span class="rect"></span>
<div class="spacer"></div>
</div>
</div>
<div class="sktoolbar" style="display: none;">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 54px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space" style="width: 138px;"/><li class="space"/><li style="width: 70px;"/><li class="fat"/></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li class="big" style="width: 48px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li class="big"/><li class="big"/><li class="big"/><li class="space"/><li style="width: 70px;"/></ul>
<section class="box-controls">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 54px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space" style="width: 138px;"/><li class="space"/><li style="width: 70px;"/><li class="fat"/></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li class="big" style="width: 48px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li class="big"/><li class="big"/><li class="big"/><li class="space"/><li style="width: 70px;"/></ul>
</section>
</div>
<div class="placeholder" style="display: none;">
<div class="slide-h"><div class="slide-v"><div class="slide-container"></div></div></div>
</div>
</div>
<script>
if ( !!window.skhtml ) {
var skl = document.getElementById("loading-mask");
if ( skl ) {
skl.innerHTML = window.skhtml;
delete skl;
}
delete window.skhtml;
}
</script>
<div id="viewport" role="main"></div>
<script>

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

@ -11,6 +11,24 @@
<!-- splash -->
<style type="text/css">
.loadmask {
--sk-height-toolbar-controls:84px;
--sk-layout-padding-toolbar:0 10px;
--sk-layout-padding-header: 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: #f3f3f3;
--sk-background-toolbar-controls: #fff;
--sk-canvas-background: #f3f3f3;
--sk-background-toolbar-header-pdf: #f3f3f3;
--sk-background-toolbar-tab: #eaeaea;
--sk-background-toolbar-button: #f9f9f9;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #dde0e5;
--sk-canvas-line: rgba(0,0,0,.05);
}
.loadmask {
left: 0;
top: 0;
@ -20,20 +38,20 @@
overflow: hidden;
border: none;
background: #e2e2e2;
background: var(--canvas-background, #e2e2e2);
background: var(--sk-canvas-background, #eee);
z-index: 1002;
}
.loadmask > .brendpanel {
width: 100%;
min-height: 28px;
background: #444796;
background: var(--toolbar-header-visio, #444796);
background: var(--sk-background-toolbar-header-visio);
padding: var(--sk-layout-padding-header);
}
.loadmask > .brendpanel .underline {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
background: var(--sk-background-toolbar-header-visio);
}
.loadmask > .brendpanel > div {
@ -60,7 +78,7 @@
}
.loadmask > .brendpanel .spacer {
margin-left: auto;
flex-grow: 1;
}
.loadmask > .brendpanel .rect {
@ -70,12 +88,12 @@
border-radius: 3px;
margin: 0 10px;
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .brendpanel .underline .rect {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-tab);
opacity: 0.4;
}
@ -86,17 +104,28 @@
border-radius: 20px;
margin: 0 10px;
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .sktoolbar {
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;
padding: 10px 6px;
padding: 0;
padding: var(--sk-layout-padding-toolbar, 0);
box-sizing: content-box;
background-color: var(--sk-background-toolbar, #f7f7f7);
}
.loadmask > .sktoolbar > .box-controls {
background: var(--sk-background-toolbar-controls, #f7f7f7);
border-radius: var(--sk-border-radius-toolbar, 0);
padding: var(--sk-layout-padding-toolbar-controls);
box-shadow: var(--sk-shadow-toolbar);
height: 66px;
height: var(--sk-height-toolbar-controls);
display: flex;
flex-direction: column;
justify-content: center;
row-gap: 5px;
}
.loadmask > .sktoolbar ul {
@ -104,12 +133,12 @@
padding: 0;
white-space: nowrap;
position: relative;
height: 25px;
height: 20px;
}
.loadmask > .sktoolbar li {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-button, #d8dadc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -175,9 +204,9 @@
height: 100%;
width: 100%;
background: #fff;
background: var(--canvas-content-background, #fff);
background: var(--sk-canvas-content-background, #fff);
border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--skeleton-canvas-page-border, var(--canvas-page-border, #bbbec2));
border: var(--scaled-one-px-value, 1px) solid var(--sk-canvas-page-border, var(--canvas-page-border, #bbbec2));
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out;
@ -309,8 +338,10 @@
<div><div class="loading-logo"><img src="../../../apps/common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div>
<div class="sktoolbar" style="display: none;">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 54px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space" style="width: 138px;"/><li class="space"/><li style="width: 70px;"/><li class="fat"/></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li class="big" style="width: 48px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li class="big"/><li class="big"/><li class="big"/><li class="space"/><li style="width: 70px;"/></ul>
<section class="box-controls">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 54px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space" style="width: 138px;"/><li class="space"/><li style="width: 70px;"/><li class="fat"/></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li class="big" style="width: 48px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li class="big"/><li class="big"/><li class="big"/><li class="space"/><li style="width: 70px;"/></ul>
</section>
</div>
<div class="placeholder" style="display: none;">
<div class="slide-h"><div class="slide-v"><div class="slide-container"></div></div></div>