.jspaint { background: #BBB; } .jspaint-main { background: #7b7b7b; border: 1px inset; } .jspaint-tool-options { border: 1px inset; } .jspaint-tool { display: block; margin: 0; padding: 0; box-sizing: border-box; width: 25px; height: 25px; border: 0; border-right: 1px solid black; border-bottom: 1px solid black; position: relative; background: transparent; outline: 0; } .jspaint-tool:before { content: " "; position: absolute; z-index: 1; top: 0px; left: 0px; right: 0px; bottom: 0px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid #7b7b7b; border-bottom: 1px solid #7b7b7b; } .jspaint-tool.selected, .jspaint-tool:hover:active { border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid white; border-bottom: 1px solid white; } .jspaint-tool.selected:before, .jspaint-tool:hover:active:before { border-top: 1px solid #7b7b7b; border-left: 1px solid #7b7b7b; border-right: 1px solid #bdbdbd; border-bottom: 1px solid #bdbdbd; } .jspaint-tool:hover:active { padding: 1px; background: transparent !important; } .jspaint-tool.selected, .jspaint-current-colors { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEW9vb3///8EwsWUAAAADElEQVQI12NoYHAAAAHEAMFJRSpJAAAAAElFTkSuQmCC) repeat; } .jspaint-current-colors { box-sizing: border-box; border: 2px inset; } .jspaint-current-colors > * { box-sizing: border-box; border: 1px outset !important; } .jspaint-current-colors, .jspaint-color-button { border-top: 1px solid #7F7F7F; border-left: 1px solid #7F7F7F; border-right: 1px solid #BEBEBE; border-bottom: 1px solid #BEBEBE; position: relative; box-shadow: 1px 1px 0px white, 1px 1px 0px black inset; } .jspaint-component-ghost.dock { outline: 1px solid black; outline: 1px solid invert; } .jspaint-component-ghost:not(.dock) { outline: 1px dotted black; outline: 1px dotted invert; } .jspaint-component-ghost:not(.dock):after, .jspaint-component-ghost:not(.dock):before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; outline: 1px dotted black; outline: 1px dotted invert; } .jspaint-component-ghost:not(.dock):after { outline-offset: 1px; } .jspaint-component-ghost:not(.dock):before { outline-offset: 2px; }