NeptuneLabs FSI Viewer JS User Manual page 510

13 Appendix
Example:
/* IMPORTANT NOTES */
/* - make sure to use a custom class in front af ALL classes
defined here (in this sample: .fsi-skin-example) */
/* otherwise you will break other skins on the same HTML document
*/
/* enables a floating menu bar which overlaps with the image */
/* useful for transparent menu bars*/
/*baseSize defines the size of all skin elements (default 16)*/
/* baseEnlargement defines the general enlargement of the icons
when the viewport is changed, default is 8*/
.fsi-skin-example .fsi-ui-info {
content:'{"floatingMenuBar":true, "floatingNavWindow":false,
"baseEnlargement":10}';
}
/* the main menu bar container */
.fsi-skin-example .fsi-ui-menu-bar {
background: rgba(255, 255, 255, 0.8);
}
/* The logo displayed in the menu bar. Custom logos need to be
placed into the WEBAPPS/fsi/viewer/skins/resources/ folder of
your FSI Viewer installation.
NOTE: Originally, this is defined in the fsi-viewer-core.css.
Since the core css files should not be altered, please overwrite
the classes from there in tyour custom skin CSS. */
.fsi-viewer-root .fsi-skin-example. fsi-ui-logo-image{
background-image:url("[fsi-skin-path]resources/custom_logo.svg");
width: 3.2em;
height: auto;
margin-left:0.15em;
}
/* defines the position of the loading animation */
.fsi-skin-example. fsi-viewer-loading-animation{
left:50%;
top:50%;
transform:translate(-50%, -50%);
}
/* the base button class */
.fsi-skin-example .fsi-ui-button {
background: rgba(255,255,255,0.2);
border:1px solid solid rgba(255,255,255,0.2);
border-radius: 6px;
}
/* styles for hovered buttons */
.fsi-skin-example .fsi-ui-button-hover {
background-color:#FFF;
NeptuneLabs - FSI Viewer 510