ewc
Version:
JavaScript bindings for the different Window(s) composition.
79 lines (78 loc) • 2.47 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Electron Acrylic</title>
<style>
:root {
--color: rgba(80, 0, 80, 0.5) */
}
* {
padding: 0;
margin: 0;
overflow: hidden;
-webkit-user-select: none;
}
.titleBar {
position: absolute;
width: 100%;
height: 30px;
-webkit-app-region: drag;
background: var(--color);
}
.content {
position: absolute;
top: 30px;
width: 100%;
height: calc(100% - 30px);
background: var(--color);
}
.button {
width: 24px;
height: 24px;
float: right;
margin: 3px 2px 2px auto;
-webkit-app-region: no-drag;
cursor: pointer;
border-radius: 2px;
}
.button svg {
fill: black;
transform: translate(15%, 15%);
}
.button:hover {
background: rgba(255, 255, 255, 0.15);
}
.content p {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="titleBar">
<div class="button" id="close">
<svg viewBox="0 0 35 35" version="1.1">
<path d="M19.1,2.7c-0.5,0-1,0.2-1.4,0.6L4.3,16.7c-0.8,0.8-0.8,2,0,2.8l0.2,0.2c0.4,0.4,0.9,0.6,1.4,0.6s1-0.2,1.4-0.6L20.7,6.3 c0.8-0.8,0.8-2,0-2.8l-0.2-0.2C20.2,2.9,19.6,2.7,19.1,2.7L19.1,2.7z"/>
<path d="M5.9,2.7c-0.5,0-1,0.2-1.4,0.6L4.3,3.5c-0.8,0.8-0.8,2,0,2.8l13.4,13.4c0.4,0.4,0.9,0.6,1.4,0.6s1-0.2,1.4-0.6l0.2-0.2 c0.8-0.8,0.8-2,0-2.8L7.3,3.3C6.9,2.9,6.4,2.7,5.9,2.7L5.9,2.7z"/>
</svg>
</div>
</div>
<div class="content">
<p>This window should have <span id="type">an acrylic</span> background.</p>
<br>
<button id="acrylic">Acrylic</button>
<br>
<button id="blurBehind">BlurBehind</button>
<br>
<button id="gradient">Gradient</button>
<br>
<button id="trGradient">TransparentGradient</button>
<br>
<button id="disable">Disable</button>
</div>
<script src="app.js"></script>
</body>
</html>