SpreadJS 风格合并

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


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

1. <style>
   
2.         /* status bar start */
   
3. .gc-statusbar {
   
4.   width: 100%;
   
5.   height: 100%;
   
6.   background: #F3F2F1;
   
7.   font-size: 8pt;
   
8.   color: #505050;
   
9.   font-family: "Segoe UI", Calibri, Thonburi, Arial, Verdana, sans-serif, "Mongolian Baiti", "Microsoft Yi Baiti", "Javanese Text";
   
10.   position: relative;
    
11.   user-select: none;
    
12.   cursor: default;
    
13.   overflow: hidden;
    
14. }
    
15. 
    
16. .gc-statusbar-menu-host {
    
17.   position: relative;
    
18. }
    
19. 
    
20. .gc-statusbar-statusitem-container {
    
21.   width: auto;
    
22.   height: 100%;
    
23. }
    
24. 
    
25. .gc-statusbar-zoom-panel {
    
26.   width: 30px;
    
27.   height: 100%;
    
28.   cursor: default;
    
29.   font-size: 8pt;
    
30.   color: #505050;
    
31.   display: inline-block;
    
32. }
    
33. 
    
34. .gc-statusbar-slider-btn-container {
    
35.   display: inline-block;
    
36.   vertical-align: middle;
    
37.   margin-right: 3px;
    
38. }
    
39. 
    
40. .gc-statusbar-slider-btn-container:hover {
    
41.   background-color: #bbb5b5;
    
42. }
    
43. 
    
44. .gc-statusbar-slider-btn-container:active {
    
45.   background-color: #a1a0a0;
    
46. }
    
47. 
    
48. .gc-statusbar-slider-btn {
    
49.   width: 16px;
    
50.   height: 25px;
    
51.   background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik04NjMuNzQ1IDU0NGgtNzAwLjMyYy0xNy42NjYgMC0zMi4wMDItMTQuMzM1LTMyLjAwMi0zMnMxNC4zMzYtMzIgMzIuMDAxLTMyaDcwMC4zMmMxNy42OTYgMCAzMiAxNC4zMzUgMzIgMzJzLTE0LjMwNCAzMi0zMiAzMnoiLz48L3N2Zz4=);
    
52.   background-size: 16px 16px;
    
53.   background-repeat: no-repeat;
    
54.   background-position: center;
    
55. }
    
56. 
    
57. .gc-statusbar-slider-add-btn-container {
    
58.   display: inline-block;
    
59.   vertical-align: top;
    
60. }
    
61. 
    
62. .gc-statusbar-slider-add-btn-container:hover {
    
63.   background-color: #bbb5b5;
    
64. }
    
65. 
    
66. .gc-statusbar-slider-add-btn-container:active {
    
67.   background-color: #a1a0a0;
    
68. }
    
69. 
    
70. .gc-statusbar-slider-add-btn {
    
71.   width: 16px;
    
72.   height: 25px;
    
73.   background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik04NjMuMzI4IDQ4MS4zNGwtMzE3LjM0NC4xVjE2Mi44MThjMC0xNy42NjUtMTQuMzM2LTMyLjAwMS0zMi0zMi4wMDFzLTMyIDE0LjMzNi0zMiAzMnYzMTguNDAxbC0zMjIuMzY4LS4xNzdoLS4wOTdjLTE3LjYzMiAwLTMxLjkzNSAxNC4yNC0zMiAzMS45MDQtLjA5NyAxNy42NjUgMTQuMjA4IDMyLjAzMiAzMS44NzEgMzIuMDk2bDMyMi41OTMuMTc3djMxOS4xNjdjMCAxNy42OTYgMTQuMzM2IDMyLjAwMSAzMS45OTkgMzIuMDAxczMyLTE0LjMwMyAzMi0zMlY1NDUuNDRsMzE3LjA4OC0uMWguMTI4YzE3LjYzMiAwIDMxLjkzNS0xNC4yNCAzMi0zMS45MDVzLTE0LjIzOC0zMi4wMzEtMzEuODctMzIuMDk1eiIvPjwvc3ZnPg==);
    
74.   background-size: 16px 16px;
    
75.   background-repeat: no-repeat;
    
76.   background-position: center;
    
77. }
    
78. 
    
79. .gc-statusbar-slider-back-progress {
    
80.   width: 120px;
    
81.   height: 1px;
    
82.   background: #505050;
    
83.   display: inline-block;
    
84.   vertical-align: top;
    
85. }
    
86. 
    
87. .gc-statusbar-slider-back {
    
88.   display: inline-block;
    
89. }
    
90. 
    
91. .gc-statusbar-slider-middle-line {
    
92.   width: 1px;
    
93.   height: 8px;
    
94.   background: #505050;
    
95.   display: inline-block;
    
96.   position: relative;
    
97.   vertical-align: top;
    
98.   top: 9px;
    
99. }
    
100. 
     
101. .gc-statusbar-slider-drag-bar {
     
102.   width: 4px;
     
103.   height: 10px;
     
104.   background: #505050;
     
105.   display: inline-block;
     
106.   position: relative;
     
107.   vertical-align: top;
     
108.   top: 8px;
     
109. }
     
110. 
     
111. .gc-statusbar-contextmenu-check {
     
112.   width: 6px;
     
113.   height: 10px;
     
114.   margin: 0 0 0 5px;
     
115.   border-style: solid;
     
116.   border-color: #222222;
     
117.   border-width: 0 2px 2px 0;
     
118.   transform: rotateZ(45deg);
     
119.   content: "";
     
120. }
     
121. 
     
122. .gc-statusbar-contextmenu-check-container {
     
123.   width: 12px;
     
124.   height: 12px;
     
125.   display: inline-block;
     
126. }
     
127. 
     
128. .gc-statusbar-contextmenu-content {
     
129.   display: inline-block;
     
130.   color: #444444;
     
131.   margin: 0 5px 0 15px;
     
132. }
     
133. 
     
134. .gc-statusbar-contextmenu-status {
     
135.   float: right;
     
136.   color: #444444;
     
137.   vertical-align: middle;
     
138. }
     
139. 
     
140.         </style>

复制代码