OLD | NEW |
| (Empty) |
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,iVBORw0KGgoAAAANSUhEUgAAACAA
AAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALNJREFUeNrs
llEOwyAIhmVXwIu487dXKEdy2PBgWuxwm/VhkPwvSuALAhFyzmGmPcJkcwAHcAAHMAMAQGItLGSFhlB8
kpmgrGKL2NbiziIWKqHK2SY+qzluBwBKcg2iTr7fjQBoQZySd1W2E0CD2LSqjAQ4Qqh9YY37zRj+5iPx
4RPUZac7n6DVhHRHE74bQxo9hvUiio1FRCMXURKIeNFSKD5Pa1zwX7EDOIAD/D3AS4ABAKWdkCCeGGsr
AAAAAElFTkSuQmCC'); | |
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,iVBORw0KGgoAAAANSUhEUgAAACAAAA
AgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEBJREFUeNrszr
ENAEAIw8A8EvU32X9RGsQUaewFfM/2l9TKNBWcX10KBwAAAAAAAAAAAAAAAAAAABxggv9ZAQYAhakDi3
I15kgAAAAASUVORK5CYII='); | |
35 | |
36 } | |
37 .windowbuttonbackground:active { | |
38 background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAA
AgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFtJREFUeNrs1z
ESgCAMRNEAkSZD5VW8/1k8hFaCCqfY5u9M6v/apIh2mH1hkqXba92uUvxU5Mfoe57xx0Rb7WziAQAAAA
AAAAAAAAAAAAAAOcDXkzqvifrvL8AAWBcLpapo5CcAAAAASUVORK5CYII='); | |
39 } | |
40 #maximize { | |
41 -webkit-mask-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAA
AAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFFJREFUeNrs
1jsOACAIREHWeP8royWdnwaDj9pi2OhGubtlTrPkAQAAAIC+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> | |
OLD | NEW |