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

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

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

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

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