[DE][SSE][PE] Skeleton improvement

This commit is contained in:
Alexander Yuzhin 2019-10-21 16:58:34 +03:00
parent 4da866952b
commit 6b993485e2
6 changed files with 59 additions and 112 deletions

View file

@ -18,7 +18,7 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border: none; border: none;
background-color: #f4f4f4; background: #f1f1f1;
z-index: 1001; z-index: 1001;
} }
@ -31,6 +31,7 @@
.loadmask > .brendpanel > div { .loadmask > .brendpanel > div {
display: flex; display: flex;
align-items: center; align-items: center;
height: 28px;
} }
.loadmask > .brendpanel .spacer { .loadmask > .brendpanel .spacer {
@ -50,15 +51,6 @@
opacity: 0; opacity: 0;
} }
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 12px;
margin: 4px 10px;
background: rgba(255, 255, 255, 0.2);
}
.loadmask > .brendpanel .rect { .loadmask > .brendpanel .rect {
vertical-align: middle; vertical-align: middle;
width: 50px; width: 50px;
@ -69,8 +61,8 @@
} }
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #fafafa; background: #f1f1f1;
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #cfcfcf;
height: 46px; height: 46px;
padding: 10px 12px; padding: 10px 12px;
box-sizing: content-box; box-sizing: content-box;
@ -130,24 +122,24 @@
} }
@keyframes flickerAnimation { @keyframes flickerAnimation {
0% { opacity:0.1; } 0% { opacity:0.5; }
50% { opacity:1; } 50% { opacity:1; }
100% { opacity:0.1; } 100% { opacity:0.5; }
} }
@-o-keyframes flickerAnimation{ @-o-keyframes flickerAnimation{
0% { opacity:0.1; } 0% { opacity:0.5; }
50% { opacity:1; } 50% { opacity:1; }
100% { opacity:0.1; } 100% { opacity:0.5; }
} }
@-moz-keyframes flickerAnimation{ @-moz-keyframes flickerAnimation{
0% { opacity:0.1; } 0% { opacity:0.5; }
50% { opacity:1; } 50% { opacity:1; }
100% { opacity:0.1; } 100% { opacity:0.5; }
} }
@-webkit-keyframes flickerAnimation{ @-webkit-keyframes flickerAnimation{
0% { opacity:0.1; } 0% { opacity:0.5; }
50% { opacity:1; } 50% { opacity:1; }
100% { opacity:0.1; } 100% { opacity:0.5; }
} }
</style> </style>
@ -217,7 +209,7 @@
<body> <body>
<div id="loading-mask" class="loadmask"> <div id="loading-mask" class="loadmask">
<div class="brendpanel"> <div class="brendpanel">
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div> <div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><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"> <div class="sktoolbar">
<ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul> <ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul>
<ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li></ul> <ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li></ul>

View file

@ -19,19 +19,20 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border: none; border: none;
background-color: #f4f4f4; background: #f1f1f1;
z-index: 1001; z-index: 1001;
} }
.loadmask > .brendpanel { .loadmask > .brendpanel {
width: 100%; width: 100%;
height: 56px; min-height: 32px;
background: #446995; background: #446995;
} }
.loadmask > .brendpanel > div { .loadmask > .brendpanel > div {
display: flex; display: flex;
align-items: center; align-items: center;
height: 28px;
} }
.loadmask > .brendpanel .spacer { .loadmask > .brendpanel .spacer {
@ -51,15 +52,6 @@
opacity: 0; opacity: 0;
} }
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 12px;
margin: 4px 10px;
background: rgba(255, 255, 255, 0.2);
}
.loadmask > .brendpanel .rect { .loadmask > .brendpanel .rect {
vertical-align: middle; vertical-align: middle;
width: 50px; width: 50px;
@ -70,8 +62,8 @@
} }
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #fafafa; background: #f1f1f1;
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #cfcfcf;
height: 46px; height: 46px;
padding: 10px 12px; padding: 10px 12px;
box-sizing: content-box; box-sizing: content-box;
@ -82,11 +74,6 @@
padding: 0; padding: 0;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out;
-o-animation: flickerAnimation 2s infinite ease-in-out;
animation: flickerAnimation 2s infinite ease-in-out;
} }
.loadmask > .sktoolbar li { .loadmask > .sktoolbar li {
@ -136,24 +123,24 @@
} }
@keyframes flickerAnimation { @keyframes flickerAnimation {
0% { opacity:0.1; } 0% { opacity:0.5; }
50% { opacity:1; } 50% { opacity:1; }
100% { opacity:0.1; } 100% { opacity:0.5; }
} }
@-o-keyframes flickerAnimation{ @-o-keyframes flickerAnimation{
0% { opacity:0.1; } 0% { opacity:0.5; }
50% { opacity:1; } 50% { opacity:1; }
100% { opacity:0.1; } 100% { opacity:0.5; }
} }
@-moz-keyframes flickerAnimation{ @-moz-keyframes flickerAnimation{
0% { opacity:0.1; } 0% { opacity:0.5; }
50% { opacity:1; } 50% { opacity:1; }
100% { opacity:0.1; } 100% { opacity:0.5; }
} }
@-webkit-keyframes flickerAnimation{ @-webkit-keyframes flickerAnimation{
0% { opacity:0.1; } 0% { opacity:0.5; }
50% { opacity:1; } 50% { opacity:1; }
100% { opacity:0.1; } 100% { opacity:0.5; }
} }
</style> </style>
@ -217,7 +204,7 @@
<link rel="stylesheet" type="text/css" href="../../../apps/documenteditor/main/resources/css/app.css"> <link rel="stylesheet" type="text/css" href="../../../apps/documenteditor/main/resources/css/app.css">
</head> </head>
<body> <body>
<div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../../apps/documenteditor/main/resources/img/header/header-logo@2x.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="sktoolbar"><ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul><ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li></ul></div><div class="placeholder"><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"><div><div class="loading-logo"><img src="../../../apps/documenteditor/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><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"><ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul><ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li></ul></div><div class="placeholder"><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"></div> <div id="viewport"></div>
<script> <script>

View file

@ -17,7 +17,7 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border: none; border: none;
background-color: #f4f4f4; background-color: #e2e2e2;
z-index: 1001; z-index: 1001;
} }
@ -30,6 +30,7 @@
.loadmask > .brendpanel > div { .loadmask > .brendpanel > div {
display: flex; display: flex;
align-items: center; align-items: center;
height: 28px;
} }
.loadmask > .brendpanel .loading-logo { .loadmask > .brendpanel .loading-logo {
@ -49,15 +50,6 @@
margin-left: auto; margin-left: auto;
} }
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 12px;
margin: 4px 10px;
background: rgba(255, 255, 255, 0.2);
}
.loadmask > .brendpanel .rect { .loadmask > .brendpanel .rect {
vertical-align: middle; vertical-align: middle;
width: 50px; width: 50px;
@ -68,8 +60,8 @@
} }
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #fafafa; background: #f1f1f1;
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #cbcbcb;
height: 46px; height: 46px;
padding: 10px 12px; padding: 10px 12px;
box-sizing: content-box; box-sizing: content-box;
@ -167,22 +159,22 @@
@keyframes flickerAnimation { @keyframes flickerAnimation {
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
@-o-keyframes flickerAnimation{ @-o-keyframes flickerAnimation{
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
@-moz-keyframes flickerAnimation{ @-moz-keyframes flickerAnimation{
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
@-webkit-keyframes flickerAnimation{ @-webkit-keyframes flickerAnimation{
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
</style> </style>
@ -245,7 +237,7 @@
<body> <body>
<div id="loading-mask" class="loadmask"> <div id="loading-mask" class="loadmask">
<div class="brendpanel"> <div class="brendpanel">
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div> <div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div> </div>
<div class="sktoolbar"> <div class="sktoolbar">
<ul><li/><li class="space" style="width: 78px;"/><li/><li class="space"/><li style="width: 210px;"/><li class="space"/><li style="width: 120px;"/><li class="space" style="width: 210px;"/><li style="width: 100px;"/><li class="fat"/></ul> <ul><li/><li class="space" style="width: 78px;"/><li/><li class="space"/><li style="width: 210px;"/><li class="space"/><li style="width: 120px;"/><li class="space" style="width: 210px;"/><li style="width: 100px;"/><li class="fat"/></ul>

View file

@ -19,7 +19,7 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border: none; border: none;
background-color: #f4f4f4; background-color: #e2e2e2;
z-index: 1001; z-index: 1001;
} }
@ -32,6 +32,7 @@
.loadmask > .brendpanel > div { .loadmask > .brendpanel > div {
display: flex; display: flex;
align-items: center; align-items: center;
height: 28px;
} }
.loadmask > .brendpanel .loading-logo { .loadmask > .brendpanel .loading-logo {
@ -51,15 +52,6 @@
margin-left: auto; margin-left: auto;
} }
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 12px;
margin: 4px 10px;
background: rgba(255, 255, 255, 0.2);
}
.loadmask > .brendpanel .rect { .loadmask > .brendpanel .rect {
vertical-align: middle; vertical-align: middle;
width: 50px; width: 50px;
@ -70,8 +62,8 @@
} }
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #fafafa; background: #f1f1f1;
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #cbcbcb;
height: 46px; height: 46px;
padding: 10px 12px; padding: 10px 12px;
box-sizing: content-box; box-sizing: content-box;
@ -169,22 +161,22 @@
@keyframes flickerAnimation { @keyframes flickerAnimation {
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
@-o-keyframes flickerAnimation{ @-o-keyframes flickerAnimation{
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
@-moz-keyframes flickerAnimation{ @-moz-keyframes flickerAnimation{
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
@-webkit-keyframes flickerAnimation{ @-webkit-keyframes flickerAnimation{
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
</style> </style>
@ -251,7 +243,7 @@
<body> <body>
<div id="loading-mask" class="loadmask"> <div id="loading-mask" class="loadmask">
<div class="brendpanel"> <div class="brendpanel">
<div><div class="loading-logo"><img src="../../../apps/presentationeditor/main/resources/img/header/header-logo@2x.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div> <div><div class="loading-logo"><img src="../../../apps/presentationeditor/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div> </div>
<div class="sktoolbar"> <div class="sktoolbar">
<ul><li/><li class="space" style="width: 78px;"/><li/><li class="space"/><li style="width: 210px;"/><li class="space"/><li style="width: 120px;"/><li class="space" style="width: 210px;"/><li style="width: 100px;"/><li class="fat"/></ul> <ul><li/><li class="space" style="width: 78px;"/><li/><li class="space"/><li style="width: 210px;"/><li class="space"/><li style="width: 120px;"/><li class="space" style="width: 210px;"/><li style="width: 100px;"/><li class="fat"/></ul>

View file

@ -29,6 +29,7 @@
.loadmask > .brendpanel > div { .loadmask > .brendpanel > div {
display: flex; display: flex;
align-items: center; align-items: center;
height: 28px;
} }
.loadmask > .brendpanel .loading-logo { .loadmask > .brendpanel .loading-logo {
@ -48,15 +49,6 @@
margin-left: auto; margin-left: auto;
} }
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 12px;
margin: 4px 10px;
background: rgba(255, 255, 255, 0.2);
}
.loadmask > .brendpanel .rect { .loadmask > .brendpanel .rect {
vertical-align: middle; vertical-align: middle;
width: 50px; width: 50px;
@ -67,7 +59,7 @@
} }
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #fafafa; background: #f1f1f1;
height: 46px; height: 46px;
padding: 10px 12px; padding: 10px 12px;
box-sizing: content-box; box-sizing: content-box;
@ -135,22 +127,22 @@
@keyframes flickerAnimation { @keyframes flickerAnimation {
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
@-o-keyframes flickerAnimation{ @-o-keyframes flickerAnimation{
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
@-moz-keyframes flickerAnimation{ @-moz-keyframes flickerAnimation{
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
@-webkit-keyframes flickerAnimation{ @-webkit-keyframes flickerAnimation{
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
</style> </style>
@ -216,7 +208,7 @@
<div id="loading-mask" class="loadmask"> <div id="loading-mask" class="loadmask">
<div class="brendpanel"><div> <div class="brendpanel"><div>
<div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div> <div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div>
<div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div> <div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div> </div>
<div class="sktoolbar"> <div class="sktoolbar">
<ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/><li class="fat"/></ul> <ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/><li class="fat"/></ul>

View file

@ -31,6 +31,7 @@
.loadmask > .brendpanel > div { .loadmask > .brendpanel > div {
display: flex; display: flex;
align-items: center; align-items: center;
height: 28px;
} }
.loadmask > .brendpanel .loading-logo { .loadmask > .brendpanel .loading-logo {
@ -50,15 +51,6 @@
margin-left: auto; margin-left: auto;
} }
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 12px;
margin: 4px 10px;
background: rgba(255, 255, 255, 0.2);
}
.loadmask > .brendpanel .rect { .loadmask > .brendpanel .rect {
vertical-align: middle; vertical-align: middle;
width: 50px; width: 50px;
@ -69,7 +61,7 @@
} }
.loadmask > .sktoolbar { .loadmask > .sktoolbar {
background: #fafafa; background: #f1f1f1;
height: 46px; height: 46px;
padding: 10px 12px; padding: 10px 12px;
box-sizing: content-box; box-sizing: content-box;
@ -137,22 +129,22 @@
@keyframes flickerAnimation { @keyframes flickerAnimation {
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
@-o-keyframes flickerAnimation{ @-o-keyframes flickerAnimation{
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
@-moz-keyframes flickerAnimation{ @-moz-keyframes flickerAnimation{
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
@-webkit-keyframes flickerAnimation{ @-webkit-keyframes flickerAnimation{
0% { opacity:1; } 0% { opacity:1; }
50% { opacity:0.3; } 50% { opacity:0.5; }
100% { opacity:1; } 100% { opacity:1; }
} }
</style> </style>
@ -221,7 +213,7 @@
<div id="loading-mask" class="loadmask"> <div id="loading-mask" class="loadmask">
<div class="brendpanel"><div> <div class="brendpanel"><div>
<div class="loading-logo"><img src="../../../apps/spreadsheeteditor/main/resources/img/header/header-logo@2x.png"></div> <div class="loading-logo"><img src="../../../apps/spreadsheeteditor/main/resources/img/header/header-logo@2x.png"></div>
<div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div> <div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div> </div>
<div class="sktoolbar"> <div class="sktoolbar">
<ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/><li class="fat"/></ul> <ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/><li class="fat"/></ul>