src/extensions/renderer/resources/window_controls_template.html

   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>