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

整体布局和番茄钟、天气合并

Browse Source
This commit is contained in:
xiao_io
2022-02-09 19:04:27 +08:00
parent 0f09aebc39
commit fceeeb078f
233 changed files with 1335 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,9 +20,28 @@ body {
height: 40px;
background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}
#popup header img {
#popup header #logo {
height: inherit;
}
#popup header #weather {
float: right;
height: 100%;
line-height: 40px;
margin-right: 12px;
}
#popup header #weather #weatherSite {
font-size: 16px;
margin-right: 5px;
}
#popup header #weather #svg_w {
height: 20px;
}
#popup header #weather #weatherText {
font-size: 18px;
}
#popup header #weather #weatherTemp {
font-size: 18px;
}
#popup #back {
display: none;
position: absolute;
@@ -36,177 +55,17 @@ body {
transform: rotate(-45deg);
cursor: pointer;
}
#popup #article #weather {
width: 100%;
height: 150px;
margin-top: 3px;
background-color: #fff;
#popup #article #buttons {
position: relative;
margin-top: 12px;
}
#popup #article .left {
#popup #article #buttons #btnScreenshot,
#popup #article #buttons #transform {
float: left;
width: 200px;
}
#popup #article .left ul li {
margin: 5px 0;
height: 45px;
background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
}
#popup #article .left ul li span {
font-size: 16px;
line-height: 45px;
margin-left: 5px;
}
#popup #article .left ul li #click-per .button {
position: relative;
float: right;
top: 6px;
right: 6px;
width: 66px;
height: 32px;
border-radius: 100px;
}
#popup #article .left ul li #click-per .button .checkbox {
position: relative;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 3;
}
#popup #article .left ul li #click-per .button .knobs,
#popup #article .left ul li #click-per .button .layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup #article .left ul li #click-per .button .knobs {
z-index: 2;
}
#popup #article .left ul li #click-per .button .layer {
border-radius: 100px;
width: 100%;
background-color: #ebf7fc;
z-index: 1;
}
#popup #article .left ul li #click-per .button .knobs::before {
content: "YES";
position: absolute;
top: 2px;
left: 34px;
width: 20px;
height: 10px;
color: #fff;
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 1;
padding: 9px 4px;
background-color: #03a9f4;
border-radius: 50%;
}
#popup #article .left ul li #click-per .button .checkbox:checked + .knobs:before {
content: "NO";
left: 3px;
background-color: #f44336;
}
#popup #article .left ul li #click-per .button .checkbox:checked ~ .layer {
background-color: #fcebeb;
}
#popup #article .left ul li #click-per .button .knobs,
#popup #article .left ul li #click-per .button .knobs:before,
#popup #article .left ul li #click-per .button .layer {
transition: 0.3s ease all;
}
#popup #article .left ul li #mouse-style .button {
position: relative;
float: right;
top: 6px;
right: 6px;
width: 66px;
height: 32px;
border-radius: 100px;
}
#popup #article .left ul li #mouse-style .button .checkbox {
position: relative;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 3;
}
#popup #article .left ul li #mouse-style .button .knobs,
#popup #article .left ul li #mouse-style .button .layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup #article .left ul li #mouse-style .button .knobs {
z-index: 2;
}
#popup #article .left ul li #mouse-style .button .layer {
border-radius: 100px;
width: 100%;
background-color: #ebf7fc;
z-index: 1;
}
#popup #article .left ul li #mouse-style .button .knobs::before {
content: "YES";
position: absolute;
top: 2px;
left: 34px;
width: 20px;
height: 10px;
color: #fff;
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 1;
padding: 9px 4px;
background-color: #03a9f4;
border-radius: 50%;
}
#popup #article .left ul li #mouse-style .button .checkbox:checked + .knobs:before {
content: "NO";
left: 3px;
background-color: #f44336;
}
#popup #article .left ul li #mouse-style .button .checkbox:checked ~ .layer {
background-color: #fcebeb;
}
#popup #article .left ul li #mouse-style .button .knobs,
#popup #article .left ul li #mouse-style .button .knobs:before,
#popup #article .left ul li #mouse-style .button .layer {
transition: 0.3s ease all;
}
#popup #article .right {
float: right;
width: 100px;
}
#popup #article .right #clock {
width: 80px;
height: 80px;
margin: 30px auto;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 80px;
cursor: pointer;
font-size: 20px;
}
#popup #article .right #clock:active {
transform: translate(0px, 1px);
box-shadow: 0px 1px 0px 0px;
}
#popup #btnScreenshot {
position: absolute;
top: 1px;
right: 5px;
width: 81px;
height: 37px;
width: 90px;
height: 40px;
color: #fff;
font-weight: 500;
cursor: pointer;
@@ -214,10 +73,141 @@ body {
border: none;
border-radius: 4px;
}
#popup #btnScreenshot:hover {
#popup #article #buttons #btnScreenshot:hover {
background-color: #6FC6FF;
}
#popup #btnScreenshot:active {
#popup #article #buttons #btnScreenshot:active {
transform: translate(0px, 1px);
box-shadow: 0px 1px 0px 0px;
}
#popup #article #buttons #transform {
margin-left: 10px;
background-color: #71b0f3;
}
#popup #article #buttons #transform:hover {
background-color: #6FC6FF;
}
#popup #article #buttons #transform:active {
transform: translate(0px, 1px);
box-shadow: 0px 1px 0px 0px;
}
#popup #article #buttons #clock {
float: left;
margin-left: 30px;
margin-right: 30px;
width: 42px;
height: 42px;
background-color: #F7BAEF;
border-radius: 50%;
text-align: center;
line-height: 40px;
cursor: pointer;
font-size: 12px;
}
#popup #article #buttons #clock:active {
transform: translate(0px, 1px);
box-shadow: 0px 1px 0px 0px;
}
#popup #article .setting {
float: left;
width: 100%;
margin-top: 12px;
}
#popup #article .setting ul li {
margin: 7px 0;
height: 45px;
border-radius: 50px;
background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
}
#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 {
position: relative;
float: right;
top: 6px;
right: 6px;
width: 66px;
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 {
position: relative;
width: 100%;
height: 100%;
opacity: 0;
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 {
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 {
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 {
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 {
content: "YES";
position: absolute;
top: 2px;
left: 34px;
width: 20px;
height: 10px;
color: #fff;
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 1;
padding: 9px 4px;
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 {
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 {
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 {
transition: 0.3s ease all;
}

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

@@ -21,9 +21,28 @@ body {
width: inherit;
height: 40px;
background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);;
img {
#logo {
height: inherit;
}
#weather{
float: right;
height: 100%;
line-height: 40px;
margin-right: 12px;
#weatherSite{
font-size: 16px;
margin-right: 5px;
}
#svg_w{
height: 20px;
}
#weatherText{
font-size: 18px;
}
#weatherTemp{
font-size: 18px;
}
}
}
#back {
display: none;
@@ -39,25 +58,77 @@ body {
cursor: pointer;
}
#article{
#weather{
width: 100%;
height: 150px;
margin-top: 3px;
background-color: #fff;
#buttons{
position: relative;
margin-top: 12px;
#btnScreenshot,
#transform{
float: left;
top: 1px;
right: 5px;
width: 90px;
height: 40px;
color: #fff;
font-weight: 500;
cursor: pointer;
background-color: #71b0f3;
border: none;
border-radius: 4px;
}
#btnScreenshot:hover{
background-color: #6FC6FF;
}
#btnScreenshot:active{
transform: translate(0px, 1px);
box-shadow: 0px 1px 0px 0px;
}
#transform{
margin-left: 10px;
background-color: #71b0f3;
}
#transform:hover{
background-color: #6FC6FF;
}
#transform:active{
transform: translate(0px, 1px);
box-shadow: 0px 1px 0px 0px;
}
#clock{
float: left;
margin-left: 30px;
margin-right: 30px;
width: 42px;
height: 42px;
background-color: #F7BAEF;
border-radius: 50%;
text-align: center;
line-height: 40px;
cursor: pointer;
font-size: 12px;
}
#clock:active{
transform: translate(0px, 1px);
box-shadow: 0px 1px 0px 0px;
}
}
.left{
.setting{
float: left;
width: 200px;
width: 100%;
margin-top: 12px;
// opacity: 0.5;
ul{
li{
margin: 5px 0;
margin: 7px 0;
height: 45px;
border-radius: 50px;
background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
span{
font-size: 16px;
line-height: 45px;
margin-left: 5px;
}
#advertising,
#mouse-style,
#click-per{
.button {
position: relative;
@@ -123,115 +194,8 @@ body {
}
}
}
#mouse-style{
.button {
position: relative;
float: right;
top: 6px;
right: 6px;
width: 66px;
height: 32px;
border-radius: 100px;
.checkbox {
position: relative;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 3;
}
.knobs,
.layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.knobs {
z-index: 2;
}
.layer{
border-radius: 100px;
width: 100%;
background-color: #ebf7fc;
z-index: 1;
}
.knobs::before {
content: "YES";
position: absolute;
top: 2px;
left: 34px;
width: 20px;
height: 10px;
color: #fff;
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 1;
padding: 9px 4px;
background-color: #03a9f4;
border-radius: 50%;
}
.checkbox:checked+.knobs:before {
content: "NO";
left: 3px;
background-color: #f44336;
}
.checkbox:checked~.layer {
background-color: #fcebeb;
}
.knobs,
.knobs:before,
.layer{
transition: 0.3s ease all;
}
}
}
}
}
}
.right{
float: right;
width: 100px;
#clock{
width: 80px;
height: 80px;
margin: 30px auto;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 80px;
cursor: pointer;
font-size: 20px;
}
#clock:active{
transform: translate(0px, 1px);
box-shadow: 0px 1px 0px 0px;
}
}
}
#btnScreenshot{
position: absolute;
top: 1px;
right: 5px;
width: 81px;
height: 37px;
color: #fff;
font-weight: 500;
cursor: pointer;
background-color: #71b0f3;
border: none;
border-radius: 4px;
}
#btnScreenshot:hover{
background-color: #6FC6FF;
}
#btnScreenshot:active{
transform: translate(0px, 1px);
box-shadow: 0px 1px 0px 0px;
}
}