/*! * jQuery Enhanced Splitter Plugin * LESS / CSS File * Version 1.2.3 * * https://github.com/hiltonjanfield/jquery.enhsplitter * * All classes to begin with 'splitter'. * Standard container/object classes use _ separator (.splitter_container, .splitter_panel, etc.) * Modifier/option classes use - separator (.splitter-vertical, .splitter-handle-dots, etc.) * * Do not make changes to the CSS file; edit the LESS file and compile. */ .splitter_container { position: relative; overflow: hidden; /* Using !important to ensure random, generalized styles do not interfere with the layout. */ padding: 0 !important; height: 100%; } .splitter_container > .splitter_panel { position: absolute; overflow: auto; padding: 0; margin: 0; } .splitter_container > .splitter_panel > :not(.splitter_container) { overflow: auto; height: 100%; } .splitter_container.splitter-horizontal > .splitter_panel { left: 0; width: 100%; } .splitter_container.splitter-horizontal > .splitter_panel:first-child { /* Top panel */ top: 0; } .splitter_container.splitter-horizontal > .splitter_panel ~ .splitter_panel { /* Bottom panel */ bottom: 0; } .splitter_container.splitter-vertical > .splitter_panel { top: 0; height: 100%; } .splitter_container.splitter-vertical > .splitter_panel:first-child { /* Left panel */ left: 0; } .splitter_container.splitter-vertical > .splitter_panel ~ .splitter_panel { /* Right panel */ right: 0; } .splitter_container.splitter-fixed > .splitter_bar { cursor: default; } .splitter_container.splitter-handle-disabled > .splitter_bar > .splitter_handle { cursor: inherit; } .splitter_bar { background-color: #c0c0c0; position: absolute; padding: 0 !important; box-sizing: border-box; } .splitter_bar > .splitter_handle { cursor: pointer; background-color: #999999; position: relative; margin: auto; z-index: 1000; box-sizing: border-box; } .splitter_bar > .splitter_handle:hover { background-color: #666666; border-color: #666666; } .splitter_bar > .splitter_handle:active { background-color: #000000; border-color: #000000; } .splitter_bar.splitter-invisible { background: none !important; border: none !important; box-shadow: none !important; } .splitter_bar.splitter-invisible .splitter_handle, .splitter_bar.splitter-handle-none .splitter_handle { display: none; } .splitter-vertical > .splitter_bar { border-left: 1px solid #eeeeee; border-right: 1px solid #666666; cursor: ew-resize; z-index: 900; width: 7px; height: 100%; } .splitter-vertical > .splitter_bar > .splitter_handle { top: 50%; margin-top: -25px; height: 50px; } .splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle, .splitter-vertical > .splitter_bar.splitter-handle-stripes > .splitter_handle { width: 3px; border-left: 1px solid #999999; border-right: 1px solid #999999; background-color: transparent; } .splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:hover, .splitter-vertical > .splitter_bar.splitter-handle-stripes > .splitter_handle:hover { border-color: #666666; } .splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:active, .splitter-vertical > .splitter_bar.splitter-handle-stripes > .splitter_handle:active { border-color: #000000; } .splitter-vertical > .splitter_bar.splitter-handle-bar > .splitter_handle { width: 3px; } .splitter-vertical > .splitter_bar.splitter-handle-block > .splitter_handle { width: 5px; } .splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle { margin-left: -1px; background-color: transparent; background-image: radial-gradient(circle 3px at 50% 10%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #666666 1.5px, transparent 2px); } .splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle:hover, .splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle:active { background-image: radial-gradient(circle 3px at 50% 10%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #000000 1.5px, transparent 2px); } .splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle { height: 100px; margin-top: -50px; margin-left: -1px; background-color: transparent; background-image: radial-gradient(circle 1px at 50% 5%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 10%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 15%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 20%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 25%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 30%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 35%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 40%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 45%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 55%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 60%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 65%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 70%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 75%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 80%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 85%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 90%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 95%, #666666 1.5px, transparent 1.5px); } .splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:hover, .splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:active { background-color: #f0f0f0; } .splitter-horizontal > .splitter_bar { border-top: 1px solid #eeeeee; border-bottom: 1px solid #666666; cursor: ns-resize; z-index: 800; width: 100%; height: 7px; } .splitter-horizontal > .splitter_bar > .splitter_handle { width: 50px; } .splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle, .splitter-horizontal > .splitter_bar.splitter-handle-stripes > .splitter_handle { height: 3px; margin-top: 1px; border-top: 1px solid #999999; border-bottom: 1px solid #999999; background-color: transparent; } .splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:hover, .splitter-horizontal > .splitter_bar.splitter-handle-stripes > .splitter_handle:hover { border-color: #666666; } .splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:active, .splitter-horizontal > .splitter_bar.splitter-handle-stripes > .splitter_handle:active { border-color: #000000; } .splitter-horizontal > .splitter_bar.splitter-handle-bar > .splitter_handle { height: 3px; margin-top: 1px; } .splitter-horizontal > .splitter_bar.splitter-handle-block > .splitter_handle { height: 5px; margin-top: 1px; } .splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle { height: 100%; margin-top: -1px; background-color: transparent; background-image: radial-gradient(circle 3px at 10% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #666666 1.5px, transparent 2px); } .splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle:hover, .splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle:active { background-image: radial-gradient(circle 3px at 10% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #000000 1.5px, transparent 2px); } .splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle { height: 100%; width: 100px; background-color: transparent; background-image: radial-gradient(circle 1px at 5% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 10% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 15% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 20% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 25% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 30% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 35% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 40% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 45% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 55% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 60% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 65% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 70% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 75% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 80% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 85% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 90% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 95% 50%, #666666 1.5px, transparent 1.5px); } .splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:hover, .splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:active { background-color: #f0f0f0; } .splitter_container.splitter-active > .splitter_bar { z-index: 1000; /* Important to keep z-index of active splitter above .splitterMask. */ } .splitter_container.splitter-active > .splitter_bar > .splitter_handle { border-color: #000000; cursor: inherit; } .splitter_container.splitter-active > .splitter_bar.splitter-handle-bar > .splitter_handle, .splitter_container.splitter-active > .splitter_bar.splitter-handle-block > .splitter_handle { background-color: #000000; } .splitter_container.splitter-active.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle { background-image: radial-gradient(circle 3px at 50% 10%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #000000 1.5px, transparent 2px); } .splitter_container.splitter-active.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle { background-image: radial-gradient(circle 3px at 10% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #000000 1.5px, transparent 2px); } .splitter_container.splitter-active.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle { background-color: #f0f0f0; } .splitter_mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; }