Skip to content

Commit

Permalink
chore: optimize scss
Browse files Browse the repository at this point in the history
  • Loading branch information
@festoney8
festoney8 committed Jul 12, 2024
1 parent 1c85285 commit b3177d7
Show file tree
Hide file tree
Showing 4 changed files with 305 additions and 22 deletions.
32 changes: 32 additions & 0 deletions src/components/contextmenu.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
#bili-cleaner-context-menu-container {
position: fixed;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
overflow: hidden;
z-index: 99999;
}
#bili-cleaner-context-menu-container ul {
-webkit-margin-before: 0;
margin-block-start: 0;
-webkit-margin-after: 0;
margin-block-end: 0;
-webkit-margin-start: 0px;
margin-inline-start: 0px;
-webkit-margin-end: 0px;
margin-inline-end: 0px;
-webkit-padding-start: 0;
padding-inline-start: 0;
}
#bili-cleaner-context-menu-container li {
padding: 5px 10px;
font-size: 1rem;
}
#bili-cleaner-context-menu-container li:hover {
background: #fb7299;
font-weight: 500;
color: #fff;
}
4 changes: 2 additions & 2 deletions src/components/contextmenu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
user-select: none;
overflow: hidden;
z-index: 99999;
& ul {
ul {
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0;
}
& li {
li {
padding: 5px 10px;
font-size: 1rem;
&:hover {
Expand Down
251 changes: 251 additions & 0 deletions src/components/panel.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,251 @@
#bili-cleaner {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: max(32vw, 300px);
height: 90vh;
border-radius: 10px;
background: #f4f5f7;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
overflow: auto;
z-index: 2147483640;
overscroll-behavior: contain;
}
#bili-cleaner #bili-cleaner-bar {
width: max(32vw, 300px);
height: 6vh;
background: #00aeec;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: move;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#bili-cleaner #bili-cleaner-bar #bili-cleaner-title {
width: max(32vw, 300px);
height: 6vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bold;
font-size: 22px;
}
#bili-cleaner #bili-cleaner-bar #bili-cleaner-title span {
text-align: center;
}
#bili-cleaner #bili-cleaner-bar #bili-cleaner-close {
position: absolute;
top: 0;
right: 0;
width: 6vh;
height: 6vh;
border-radius: 6vh;
display: flex;
justify-content: center;
align-items: center;
cursor: auto;
}
#bili-cleaner #bili-cleaner-bar #bili-cleaner-close:hover {
background: rgba(255, 255, 255, 0.2);
}
#bili-cleaner #bili-cleaner-bar #bili-cleaner-close svg {
text-align: center;
}
#bili-cleaner #bili-cleaner-group-list {
height: 84vh;
overflow: auto;
scrollbar-width: none !important;
overscroll-behavior: contain;
}
#bili-cleaner #bili-cleaner-group-list::-webkit-scrollbar {
display: none;
}
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group {
margin: 14px;
background: #fff;
border-radius: 6px;
padding: 8px 16px;
border: 1px solid #ddd;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group hr {
border: 1px solid #eee;
margin: 5px 0 10px 0;
}
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-group-title {
font-size: 20px;
font-weight: bold;
padding: 2px;
color: #000;
letter-spacing: 1px;
}
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-list label {
display: flex;
align-items: center;
margin: 6px 0 6px 10px;
font-size: 16px;
color: #000;
}
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-list hr {
border: 1px solid #eee;
margin: 15px 20px;
}
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-checkbox {
width: 50px;
min-width: 50px;
height: 27px;
margin: 0 1em 0 0;
position: relative;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius: 50px;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-checkbox:before {
content: '';
width: 25px;
height: 25px;
position: absolute;
top: 0px;
left: 0;
border-radius: 50px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-checkbox:checked {
border-color: #00aeec;
box-shadow: #00aeec 0 0 0 16px inset;
background-color: #00aeec;
}
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-checkbox:checked:before {
left: 25px;
}
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-number {
width: 50px;
min-width: 50px;
height: 27px;
margin: 0 0.5em 0 0.5em;
position: relative;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius: 5px;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
text-align: center;
color: blue;
font-size: 16px;
-moz-appearance: textfield;
}
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-number::-webkit-inner-spin-button,
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-number::-webkit-inner-spin-button {
-webkit-appearance: none;
}
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-button {
width: 50px;
background-color: #fff;
border: 1px solid #666;
border-radius: 6px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
font-size: 16px;
margin: 0 1em 0 0;
outline: none;
padding: 5px 0;
position: relative;
text-align: center;
text-decoration: none;
touch-action: manipulation;
transition:
box-shadow 0.2s,
transform 0.1s;
-moz-user-select: none;
user-select: none;
-webkit-user-select: none;
}
#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-button:active {
background-color: #f7f7f7;
border-color: #000;
transform: scale(0.96);
}
#bili-cleaner-wordlist {
background: #fff;
border-radius: 5px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
overflow: hidden;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
z-index: 2147483641;
overscroll-behavior: contain;
}
#bili-cleaner-wordlist .wordlist-header {
background-color: #00aeec;
color: #fff;
font-size: 22px;
font-weight: bold;
margin: 0;
height: 100%;
width: 100%;
line-height: 36px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#bili-cleaner-wordlist .wordlist-description {
font-size: 16px;
margin: 6px auto;
line-height: 18px;
text-align: center;
}
#bili-cleaner-wordlist textarea.wordlist-body {
width: 400px;
height: 500px;
margin: 0 12px;
border: 2px solid #ccc;
overflow-y: scroll;
font-size: 16px;
line-height: 22px;
padding: 5px 10px;
flex-grow: 1;
resize: none;
overscroll-behavior: contain;
}
#bili-cleaner-wordlist textarea.wordlist-body:focus {
outline: none !important;
}
#bili-cleaner-wordlist .wordlist-footer {
height: 50px;
display: flex;
justify-content: space-evenly;
padding: 0 10px;
align-items: center;
}
#bili-cleaner-wordlist .wordlist-footer button {
width: 100px;
height: 30px;
border-radius: 5px;
border: 1px solid #666;
font-size: 18px;
}
#bili-cleaner-wordlist .wordlist-footer button:hover {
background-color: #666;
color: #fff;
}
Loading

0 comments on commit b3177d7

Please sign in to comment.