--- a/js/flotr2/examples/examples.css +++ b/js/flotr2/examples/examples.css @@ -1,1 +1,213 @@ - +body { + font-family : sans-serif; + padding: 0px; + margin: 0px; +} + +/* Example */ + +.flotr-example { + display: none; + margin: 0px auto 48px auto; + position: relative; +} +.flotr-example-label { + font-size: 18px; + padding: 14px 0px; +} +.flotr-example-editor .editor .render { + width: 600px; + height: 400px; + margin: 12px auto 18px auto; +} +.flotr-example-editor .editor .source { + width: 720px; +} + +/* Chart no-select */ + +.flotr-example-editor .editor .render, +.flotr-examples-thumb { + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; +} + + +/* Examples */ + +.flotr-examples-thumbs { + text-align: center; +} +.flotr-examples-reset { + z-index: 100; + cursor: pointer; + text-decoration: underline; + position: absolute; + top: 260px; + right: 24px; + display: none; +} +.flotr-examples-collapsed .flotr-examples-reset { + display: block; +} +.flotr-examples-thumb { + display: inline-block; + font-size : 11px; + width : 300px; + height : 200px; + margin: 10px 15px; + border: 2px solid transparent; +} +.flotr-examples-thumb.flotr-examples-highlight{ + font-size : 12px; + width : 330px; + height : 220px; + margin: 0px 0px; +} +.flotr-examples-thumb .flotr-legend, +.flotr-examples-thumb .flotr-mouse-value { + display : none; +} + +.flotr-examples-collapsed .flotr-examples-container { + margin-top: 20px; + position: relative; + margin: 0px auto; +} + +.flotr-examples-collapsed .flotr-examples-thumbs { + position: relative; + overflow-x: auto; + white-space: nowrap; +} + + +/* Flotr Styles */ + +.flotr-datagrid-container { + border: 1px solid #999; + border-bottom: none; + background: #fff; +} +.flotr-datagrid { + border-collapse: collapse; + border-spacing: 0; +} +.flotr-datagrid td, .flotr-datagrid th { + border: 1px solid #ccc; + padding: 1px 3px; + min-width: 2em; +} +.flotr-datagrid tr:hover, .flotr-datagrid col.hover { + background: #f3f3f3; +} +.flotr-datagrid tr:hover th, .flotr-datagrid th.hover { + background: #999; + color: #fff; +} +.flotr-datagrid th { + text-align: left; + background: #e3e3e3; + border: 2px outset #fff; +} +.flotr-datagrid-toolbar { + padding: 1px; + border-bottom: 1px solid #ccc; + background: #f9f9f9; +} +.flotr-datagrid td:hover { + background: #ccc; +} +.flotr-datagrid .first-row th { + text-align: center; +} +.flotr-canvas { + margin-bottom: -3px; + padding-bottom: 1px; +} +.flotr-tabs-group { + border-top: 1px solid #999; +} +.flotr-tab { + border: 1px solid #666; + border-top: none; + margin: 0 3px; + padding: 1px 4px; + cursor: pointer; + -moz-border-radius: 0 0 4px 4px; + -webkit-border-bottom-left-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + border-radius: 0 0 4px 4px; + opacity: 0.5; + -moz-opacity: 0.5; +} +.flotr-tab.selected { + background: #ddd; + opacity: 1; + -moz-opacity: 1; +} +.flotr-tab:hover { + background: #ccc; +} + +/* Large */ +.flotr-examples-large .flotr-example { + width: 1360px; + margin: 0px auto; + position: relative; +} +.flotr-examples-large .flotr-example-editor .editor .render { + margin-left: 0px; + margin-right: 0px; +} +.flotr-examples-large .flotr-example-editor .controls { + top: 0px; +} +.flotr-examples-large .flotr-example-editor .source { + position: absolute; + top: 0px; + right: 0px; +} + +/* Veritical Thumbs */ + +.flotr-examples-large.flotr-examples-collapsed .flotr-examples-reset, +.flotr-examples-medium.flotr-examples-collapsed .flotr-examples-reset { + top: 16px; +} + +.flotr-examples-large.flotr-examples-collapsed .flotr-examples-thumbs, +.flotr-examples-medium.flotr-examples-collapsed .flotr-examples-thumbs { + position: fixed; + width: 400px; + left: 0px; + top: 0px; + overflow-y: auto; + background: #fff; +} +.flotr-examples-large.flotr-examples-collapsed .flotr-examples-thumb, +.flotr-examples-medium.flotr-examples-collapsed .flotr-examples-thumb { + display: block; + float: center; + margin: 10px auto; +} + +.flotr-examples-large.flotr-examples-collapsed .flotr-examples-container, +.flotr-examples-medium.flotr-examples-collapsed .flotr-examples-container { + margin-left: 400px; +} + +/* Vertical Example */ + +.flotr-examples-small .flotr-example, +.flotr-examples-medium .flotr-example { + width: 720px; +} +.flotr-examples-small .flotr-example-editor .source, +.flotr-examples-medium .flotr-example-editor .source { + position: relative; +} +