| <template id="window-controls-template"> |
| <style> |
| .controls { |
| width:32px; |
| height:32px; |
| position:absolute; |
| z-index:200; |
| } |
| #close-control { |
| top:8px; |
| right:10px; |
| } |
| #maximize-control { |
| top:8px; |
| right:52px; |
| } |
| #close { |
| top:0; |
| right:0; |
| -webkit-mask-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALNJREFUeNrsllEOwyAIhmVXwIu487dXKEdy2PBgWuxwm/VhkPwvSuALAhFyzmGmPcJkcwAHcAAHMAMAQGItLGSFhlB8kpmgrGKL2NbiziIWKqHK2SY+qzluBwBKcg2iTr7fjQBoQZySd1W2E0CD2LSqjAQ4Qqh9YY37zRj+5iPx4RPUZac7n6DVhHRHE74bQxo9hvUiio1FRCMXURKIeNFSKD5Pa1zwX7EDOIAD/D3AS4ABAKWdkCCeGGsrAAAAAElFTkSuQmCC'); |
| } |
| .windowbutton { |
| width:32px; |
| height:32px; |
| position:absolute; |
| background-color:rgba(0, 0, 0, 0.49); |
| } |
| .windowbuttonbackground { |
| width:32px; |
| height:32px; |
| position:absolute; |
| } |
| .windowbuttonbackground:hover { |
| background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEBJREFUeNrszrENAEAIw8A8EvU32X9RGsQUaewFfM/2l9TKNBWcX10KBwAAAAAAAAAAAAAAAAAAABxggv9ZAQYAhakDi3I15kgAAAAASUVORK5CYII='); |
| |
| } |
| .windowbuttonbackground:active { |
| background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFtJREFUeNrs1zESgCAMRNEAkSZD5VW8/1k8hFaCCqfY5u9M6v/apIh2mH1hkqXba92uUvxU5Mfoe57xx0Rb7WziAQAAAAAAAAAAAAAAAAAAOcDXkzqvifrvL8AAWBcLpapo5CcAAAAASUVORK5CYII='); |
| } |
| #maximize { |
| -webkit-mask-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFFJREFUeNrs1jsOACAIREHWeP8royWdnwaDj9pi2OhGubtlTrPkAQAAAIC+e1DSUWXOhlWtBGIYq+W5hAAA1GzC23f+fALiVwwAAIDvAUOAAQAv/Aw+jTHzugAAAABJRU5ErkJggg=='); |
| } |
| </style> |
| <div id="close-control" class="controls"> |
| <div id="close" class="windowbutton"> </div> |
| <div id="close-background" class="windowbuttonbackground"> </div> |
| </div> |
| <div id="maximize-control" class="controls"> |
| <div id="maximize" class="windowbutton"></div> |
| <div id="maximize-background" class="windowbuttonbackground"></div> |
| </div> |
| </template> |