bitdance-team/chrome-extension
1
0
Fork 0
mirror of https://gitee.com/bitdance-team/chrome-extension synced 2025-11-04 11:53:10 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

样式小调整

Browse Source
This commit is contained in:
小墨
2022-02-09 19:20:00 +08:00
parent fceeeb078f
commit 50b858b347
3 changed files with 39 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
packages/shell-chrome/assets/css/main.css
View File

@@ -27,20 +27,21 @@ body {
float: right;
height: 100%;
line-height: 40px;
margin-right: 12px;
margin-right: 10px;
}
#popup header #weather #weatherSite {
font-size: 16px;
font-size: 13px;
margin-right: 5px;
}
#popup header #weather #svg_w {
height: 20px;
height: 15px;
vertical-align: text-bottom;
}
#popup header #weather #weatherText {
font-size: 18px;
font-size: 13px;
}
#popup header #weather #weatherTemp {
font-size: 18px;
font-size: 13px;
}
#popup #back {
display: none;
@@ -114,19 +115,18 @@ body {
margin-top: 12px;
}
#popup #article .setting ul li {
margin: 7px 0;
margin: 7px 5px;
height: 45px;
border-radius: 50px;
background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
border-radius: 25px;
background: #ffffffc9;
padding: 0 1px 0 12px;
}
#popup #article .setting ul li span {
font-size: 16px;
line-height: 45px;
margin-left: 5px;
}
#popup #article .setting ul li #advertising .button,
#popup #article .setting ul li #mouse-style .button,
#popup #article .setting ul li #click-per .button {
#popup #article .setting ul li .setting-item .button {
position: relative;
float: right;
top: 6px;
@@ -135,9 +135,7 @@ body {
height: 32px;
border-radius: 100px;
}
#popup #article .setting ul li #advertising .button .checkbox,
#popup #article .setting ul li #mouse-style .button .checkbox,
#popup #article .setting ul li #click-per .button .checkbox {
#popup #article .setting ul li .setting-item .button .checkbox {
position: relative;
width: 100%;
height: 100%;
@@ -145,34 +143,24 @@ body {
cursor: pointer;
z-index: 3;
}
#popup #article .setting ul li #advertising .button .knobs,
#popup #article .setting ul li #mouse-style .button .knobs,
#popup #article .setting ul li #click-per .button .knobs,
#popup #article .setting ul li #advertising .button .layer,
#popup #article .setting ul li #mouse-style .button .layer,
#popup #article .setting ul li #click-per .button .layer {
#popup #article .setting ul li .setting-item .button .knobs,
#popup #article .setting ul li .setting-item .button .layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup #article .setting ul li #advertising .button .knobs,
#popup #article .setting ul li #mouse-style .button .knobs,
#popup #article .setting ul li #click-per .button .knobs {
#popup #article .setting ul li .setting-item .button .knobs {
z-index: 2;
}
#popup #article .setting ul li #advertising .button .layer,
#popup #article .setting ul li #mouse-style .button .layer,
#popup #article .setting ul li #click-per .button .layer {
#popup #article .setting ul li .setting-item .button .layer {
border-radius: 100px;
width: 100%;
background-color: #ebf7fc;
z-index: 1;
}
#popup #article .setting ul li #advertising .button .knobs::before,
#popup #article .setting ul li #mouse-style .button .knobs::before,
#popup #article .setting ul li #click-per .button .knobs::before {
#popup #article .setting ul li .setting-item .button .knobs::before {
content: "YES";
position: absolute;
top: 2px;
@@ -188,26 +176,16 @@ body {
background-color: #03a9f4;
border-radius: 50%;
}
#popup #article .setting ul li #advertising .button .checkbox:checked + .knobs:before,
#popup #article .setting ul li #mouse-style .button .checkbox:checked + .knobs:before,
#popup #article .setting ul li #click-per .button .checkbox:checked + .knobs:before {
#popup #article .setting ul li .setting-item .button .checkbox:checked + .knobs:before {
content: "NO";
left: 3px;
background-color: #f44336;
}
#popup #article .setting ul li #advertising .button .checkbox:checked ~ .layer,
#popup #article .setting ul li #mouse-style .button .checkbox:checked ~ .layer,
#popup #article .setting ul li #click-per .button .checkbox:checked ~ .layer {
#popup #article .setting ul li .setting-item .button .checkbox:checked ~ .layer {
background-color: #fcebeb;
}
#popup #article .setting ul li #advertising .button .knobs,
#popup #article .setting ul li #mouse-style .button .knobs,
#popup #article .setting ul li #click-per .button .knobs,
#popup #article .setting ul li #advertising .button .knobs:before,
#popup #article .setting ul li #mouse-style .button .knobs:before,
#popup #article .setting ul li #click-per .button .knobs:before,
#popup #article .setting ul li #advertising .button .layer,
#popup #article .setting ul li #mouse-style .button .layer,
#popup #article .setting ul li #click-per .button .layer {
#popup #article .setting ul li .setting-item .button .knobs,
#popup #article .setting ul li .setting-item .button .knobs:before,
#popup #article .setting ul li .setting-item .button .layer {
transition: 0.3s ease all;
}

24
packages/shell-chrome/assets/css/main.less
View File

@@ -28,19 +28,20 @@ body {
float: right;
height: 100%;
line-height: 40px;
margin-right: 12px;
margin-right: 10px;
#weatherSite{
font-size: 16px;
font-size: 13px;
margin-right: 5px;
}
#svg_w{
height: 20px;
height: 15px;
vertical-align: text-bottom;
}
#weatherText{
font-size: 18px;
font-size: 13px;
}
#weatherTemp{
font-size: 18px;
font-size: 13px;
}
}
}
@@ -65,7 +66,7 @@ body {
#transform{
float: left;
top: 1px;
right: 5px;
right: 5px;
width: 90px;
height: 40px;
color: #fff;
@@ -118,18 +119,17 @@ body {
// opacity: 0.5;
ul{
li{
margin: 7px 0;
margin: 7px 5px;
height: 45px;
border-radius: 50px;
background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
border-radius: 25px;
background: #ffffffc9;
padding: 0 1px 0 12px;
span{
font-size: 16px;
line-height: 45px;
margin-left: 5px;
}
#advertising,
#mouse-style,
#click-per{
.setting-item {
.button {
position: relative;
float: right;

10
packages/shell-chrome/popup.html
View File

@@ -28,7 +28,7 @@
<div class="setting">
<ul>
<li>
<div id="advertising">
<div class="setting-item">
<span>广告屏蔽</span>
<div class="button">
<input type="checkbox" id="button-1" class="checkbox" />
@@ -38,7 +38,7 @@
</div>
</li>
<li>
<div id="mouse-style">
<div class="setting-item">
<span>鼠标样式</span>
<div class="button">
<input type="checkbox" id="button-2" class="checkbox" />
@@ -48,7 +48,7 @@
</div>
</li>
<li>
<div id="click-per">
<div class="setting-item">
<span>点击特效</span>
<div class="button">
<input type="checkbox" id="button-3" class="checkbox" />
@@ -58,7 +58,7 @@
</div>
</li>
<li>
<div id="click-per">
<div class="setting-item">
<span>访问页自动跳转</span>
<div class="button">
<input type="checkbox" id="btnDirectUrl" class="checkbox" />
@@ -78,4 +78,4 @@
<script src="assets/js/popup2.js"></script>
</body>
</html>
</html>