mirror of
https://gitee.com/bitdance-team/chrome-extension
synced 2025-10-07 16:35:15 +08:00
57 lines
1.7 KiB
HTML
57 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<style>
|
|
.option{
|
|
padding:30px 0;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
min-width:160px}
|
|
.option .name{
|
|
color:#333;
|
|
font-size:18px;
|
|
font-weight:bold
|
|
}
|
|
.switch{position:relative;
|
|
display:inline-block;
|
|
width:60px;height:34px
|
|
}
|
|
.switch input{
|
|
opacity:0;
|
|
width:0;
|
|
height:0
|
|
}
|
|
.slider{position:absolute;
|
|
cursor:pointer;
|
|
top:0;left:0;right:0;bottom:0;
|
|
background-color:#ccc;
|
|
-webkit-transition:.4s;
|
|
transition:.4s
|
|
}
|
|
.slider:before{position:absolute;content:"";
|
|
height:26px;width:26px;left:4px;bottom:4px;background-color:white;-webkit-transition:.4s;transition:.4s}
|
|
input:checked+.slider{background-color:#45c7d8}
|
|
input:focus+.slider{box-shadow:0 0 1px #45c7d8}
|
|
input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}
|
|
.slider.round{border-radius:34px}
|
|
.slider.round:before{border-radius:50%}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="option">
|
|
<span class="name">开启：</span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="switch">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<script src="./assets/js/popup.js"></script>
|
|
</body>
|
|
</html> |