SpreadJS 风格合并

收藏

SpreadJS提供通过使用不同css的方式切换风格，例如下图为Excel 2013的风格，主体为白色，选中文字为绿色，状态栏为绿色。
image.png109006041.png

有用户觉得绿色的状态栏有些突兀，希望使用excel2016colorful中白色的状态栏样式。那只要将excel2016colorful中关于statusBar的样式复制出来就可以了
image.png587268371.png

<style>
/* status bar start */
.gc-statusbar {
width: 100%;
height: 100%;
background: #F3F2F1;
font-size: 8pt;
color: #505050;
font-family: "Segoe UI", Calibri, Thonburi, Arial, Verdana, sans-serif, "Mongolian Baiti", "Microsoft Yi Baiti", "Javanese Text";
position: relative;
user-select: none;
cursor: default;
overflow: hidden;
}
.gc-statusbar-menu-host {
position: relative;
}
.gc-statusbar-statusitem-container {
width: auto;
height: 100%;
}
.gc-statusbar-zoom-panel {
width: 30px;
height: 100%;
cursor: default;
font-size: 8pt;
color: #505050;
display: inline-block;
}
.gc-statusbar-slider-btn-container {
display: inline-block;
vertical-align: middle;
margin-right: 3px;
}
.gc-statusbar-slider-btn-container:hover {
background-color: #bbb5b5;
}
.gc-statusbar-slider-btn-container:active {
background-color: #a1a0a0;
}
.gc-statusbar-slider-btn {
width: 16px;
height: 25px;
background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik04NjMuNzQ1IDU0NGgtNzAwLjMyYy0xNy42NjYgMC0zMi4wMDItMTQuMzM1LTMyLjAwMi0zMnMxNC4zMzYtMzIgMzIuMDAxLTMyaDcwMC4zMmMxNy42OTYgMCAzMiAxNC4zMzUgMzIgMzJzLTE0LjMwNCAzMi0zMiAzMnoiLz48L3N2Zz4=);
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center;
}
.gc-statusbar-slider-add-btn-container {
display: inline-block;
vertical-align: top;
}
.gc-statusbar-slider-add-btn-container:hover {
background-color: #bbb5b5;
}
.gc-statusbar-slider-add-btn-container:active {
background-color: #a1a0a0;
}
.gc-statusbar-slider-add-btn {
width: 16px;
height: 25px;
background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik04NjMuMzI4IDQ4MS4zNGwtMzE3LjM0NC4xVjE2Mi44MThjMC0xNy42NjUtMTQuMzM2LTMyLjAwMS0zMi0zMi4wMDFzLTMyIDE0LjMzNi0zMiAzMnYzMTguNDAxbC0zMjIuMzY4LS4xNzdoLS4wOTdjLTE3LjYzMiAwLTMxLjkzNSAxNC4yNC0zMiAzMS45MDQtLjA5NyAxNy42NjUgMTQuMjA4IDMyLjAzMiAzMS44NzEgMzIuMDk2bDMyMi41OTMuMTc3djMxOS4xNjdjMCAxNy42OTYgMTQuMzM2IDMyLjAwMSAzMS45OTkgMzIuMDAxczMyLTE0LjMwMyAzMi0zMlY1NDUuNDRsMzE3LjA4OC0uMWguMTI4YzE3LjYzMiAwIDMxLjkzNS0xNC4yNCAzMi0zMS45MDVzLTE0LjIzOC0zMi4wMzEtMzEuODctMzIuMDk1eiIvPjwvc3ZnPg==);
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center;
}
.gc-statusbar-slider-back-progress {
width: 120px;
height: 1px;
background: #505050;
display: inline-block;
vertical-align: top;
}
.gc-statusbar-slider-back {
display: inline-block;
}
.gc-statusbar-slider-middle-line {
width: 1px;
height: 8px;
background: #505050;
display: inline-block;
position: relative;
vertical-align: top;
top: 9px;
}
.gc-statusbar-slider-drag-bar {
width: 4px;
height: 10px;
background: #505050;
display: inline-block;
position: relative;
vertical-align: top;
top: 8px;
}
.gc-statusbar-contextmenu-check {
width: 6px;
height: 10px;
margin: 0 0 0 5px;
border-style: solid;
border-color: #222222;
border-width: 0 2px 2px 0;
transform: rotateZ(45deg);
content: "";
}
.gc-statusbar-contextmenu-check-container {
width: 12px;
height: 12px;
display: inline-block;
}
.gc-statusbar-contextmenu-content {
display: inline-block;
color: #444444;
margin: 0 5px 0 15px;
}
.gc-statusbar-contextmenu-status {
float: right;
color: #444444;
vertical-align: middle;
}
</style>

复制代码

		自动登录	找回密码
密码			立即注册

SpreadJS 风格合并

0 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章