1 <template id="window-controls-template"> 2 <style> 3 .controls { 4 width:32px; 5 height:32px; 6 position:absolute; 7 z-index:200; 8 } 9 #close-control { 10 top:8px; 11 right:10px; 12 } 13 #maximize-control { 14 top:8px; 15 right:52px; 16 } 17 #close { 18 top:0; 19 right:0; 20 -webkit-mask-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALNJREFUeNrsllEOwyAIhmVXwIu487dXKEdy2PBgWuxwm/VhkPwvSuALAhFyzmGmPcJkcwAHcAAHMAMAQGItLGSFhlB8kpmgrGKL2NbiziIWKqHK2SY+qzluBwBKcg2iTr7fjQBoQZySd1W2E0CD2LSqjAQ4Qqh9YY37zRj+5iPx4RPUZac7n6DVhHRHE74bQxo9hvUiio1FRCMXURKIeNFSKD5Pa1zwX7EDOIAD/D3AS4ABAKWdkCCeGGsrAAAAAElFTkSuQmCC'); 21 } 22 .windowbutton { 23 width:32px; 24 height:32px; 25 position:absolute; 26 background-color:rgba(0, 0, 0, 0.49); 27 } 28 .windowbuttonbackground { 29 width:32px; 30 height:32px; 31 position:absolute; 32 } 33 .windowbuttonbackground:hover { 34 background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEBJREFUeNrszrENAEAIw8A8EvU32X9RGsQUaewFfM/2l9TKNBWcX10KBwAAAAAAAAAAAAAAAAAAABxggv9ZAQYAhakDi3I15kgAAAAASUVORK5CYII='); 35 36 } 37 .windowbuttonbackground:active { 38 background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFtJREFUeNrs1zESgCAMRNEAkSZD5VW8/1k8hFaCCqfY5u9M6v/apIh2mH1hkqXba92uUvxU5Mfoe57xx0Rb7WziAQAAAAAAAAAAAAAAAAAAOcDXkzqvifrvL8AAWBcLpapo5CcAAAAASUVORK5CYII='); 39 } 40 #maximize { 41 -webkit-mask-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFFJREFUeNrs1jsOACAIREHWeP8royWdnwaDj9pi2OhGubtlTrPkAQAAAIC+e1DSUWXOhlWtBGIYq+W5hAAA1GzC23f+fALiVwwAAIDvAUOAAQAv/Aw+jTHzugAAAABJRU5ErkJggg=='); 42 } 43 </style> 44 <div id="close-control" class="controls"> 45 <div id="close" class="windowbutton"> </div> 46 <div id="close-background" class="windowbuttonbackground"> </div> 47 </div> 48 <div id="maximize-control" class="controls"> 49 <div id="maximize" class="windowbutton"></div> 50 <div id="maximize-background" class="windowbuttonbackground"></div> 51 </div> 52 </template> 53
