diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
index aa29a66..e11089f 100644
--- a/docs/assets/css/style.css
+++ b/docs/assets/css/style.css
@@ -592,7 +592,7 @@ section {
z-index: 1;
transform: scale(1.2);
margin-top: 10px;
- border-radius: 25px;
+ /* border-radius: 25px; */
}
}
diff --git a/src/assets/image/green.png b/src/assets/image/green.png
index a5ab979..858c92d 100644
Binary files a/src/assets/image/green.png and b/src/assets/image/green.png differ
diff --git a/src/assets/image/pink.png b/src/assets/image/pink.png
new file mode 100644
index 0000000..01daed4
Binary files /dev/null and b/src/assets/image/pink.png differ
diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss
index 4f213bb..6c9303a 100644
--- a/src/assets/scss/theme.scss
+++ b/src/assets/scss/theme.scss
@@ -43,19 +43,38 @@
--g-c-5: #EAEF9D55;
--g-c-8: #EAEF9D88;
--g-c-9: #EAEF9D99;
- --g-fc-1: #80B155;
- --g-fc-2: #C1D95CAA;
+ --g-fc-1: #ffffff;
+ --g-fc-2: #d2dedc;
--g-fc-3: #C1D95C;
- --g-bgc-1: #336A29;
- --g-bgc-2: #498428;
- --g-bsc: 0 3px 1px -2px #C1D95C33, 0 2px 2px 0 #C1D95C22, 0 1px 5px 0 #C1D95C11;
- --g-bsc-2: 0 -4px 23px 0 #C1D95C33;
- --g-bsc-hover: 0 14px 26px -12px #C1D95C33, 0 4px 23px 0 #C1D95C22, 0 8px 10px -5px #C1D95C11;
- --g-bsc-scroll: inset 0 0 5px #C1D95C05;
+ --g-bgc-1: #4baea0;
+ --g-bgc-2: #74b4ac;
+ --g-bsc: 0 3px 1px -2px #e1ebe033, 0 2px 2px 0 #e1ebe022, 0 1px 5px 0 #e1ebe011;
+ --g-bsc-2: 0 -4px 23px 0 #e1ebe033;
+ --g-bsc-hover: 0 14px 26px -12px #e1ebe033, 0 4px 23px 0 #e1ebe022, 0 8px 10px -5px #e1ebe011;
+ --g-bsc-scroll: inset 0 0 5px #e1ebe005;
+
+ // pink
+ --p-c-0: #f4f7f7;
+ --p-c-1: #f4f7f711;
+ --p-c-2: #f4f7f722;
+ --p-c-3: #f4f7f733;
+ --p-c-5: #f4f7f755;
+ --p-c-8: #f4f7f788;
+ --p-c-9: #f4f7f799;
+ --p-fc-1: #ffffff;
+ --p-fc-2: #FFFFF3;
+ --p-fc-3: #f15c5c;
+ --p-bgc-1: #ff8499;
+ --p-bgc-2: #fea1b2;
+ --p-bsc: 0 3px 1px -2px #ef528533, 0 2px 2px 0 #ef528522, 0 1px 5px 0 #ef528511;
+ --p-bsc-2: 0 -4px 23px 0 #ef528533;
+ --p-bsc-hover: 0 14px 26px -12px #ef528533, 0 4px 23px 0 #ef528522, 0 8px 10px -5px #ef528511;
+ --p-bsc-scroll: inset 0 0 5px #ef528505;
}
@import './theme/light.scss';
@import './theme/dark.scss';
@import './theme/green.scss';
+@import './theme/pink.scss';
@import './style.scss';
diff --git a/src/assets/scss/theme/pink.scss b/src/assets/scss/theme/pink.scss
new file mode 100644
index 0000000..3421186
--- /dev/null
+++ b/src/assets/scss/theme/pink.scss
@@ -0,0 +1,346 @@
+.theme-pink{
+ background-color: var(--p-bgc-1);
+ .el-pagination{
+ background-color: var(--p-bgc-1);
+ color: var(--p-fc-1);
+ .el-pagination__total, .el-pagination__jump, .el-input__inner{
+ color: var(--p-fc-1);
+ background-color: var(--p-bgc-1);
+ }
+ .el-input__inner{
+ border-color: var(--p-c-3);
+ }
+ .el-pager{
+ .number{
+ background-color: var(--p-bgc-1);
+ }
+ .number:hover{
+ color: var(--p-c-8);
+ }
+ .active{
+ color: var(--p-c-9);
+ }
+ }
+ .more, .btn-next, .btn-prev{
+ background-color: var(--p-bgc-1);
+ &:hover{
+ color: var(--p-c-8);
+ }
+ }
+ }
+ .zy-select{
+ color: var(--p-fc-1);
+ background-color: var(--p-bgc-1);
+ box-shadow: var(--p-bsc);
+ &:hover{
+ box-shadow: var(--p-bsc-hover);
+ }
+ .vs-options{
+ background-color: var(--p-bgc-1);
+ box-shadow: var(--p-bsc);
+ ul{
+ li{
+ &:hover{
+ background-color: var(--p-c-1);
+ }
+ &.active{
+ background-color: var(--p-c-3);
+ }
+ }
+ }
+ }
+ }
+ .zy-table{
+ color: var(--p-fc-2);
+ .tHead{
+ background-color: var(--p-bgc-1);
+ border-bottom-color: var(--p-c-3);
+ }
+ .tBody{
+ border-bottom-color: var(--p-c-3);
+ ul{
+ li{
+ border-bottom-color: var(--p-c-2);
+ &:hover{
+ animation: d-tableHoverAni 0.2s ease both;
+ @keyframes d-tableHoverAni {
+ to{
+ box-shadow: var(--p-bsc-hover);
+ }
+ }
+ }
+ span{
+ &.btn:hover{
+ color: var(--p-fc-3)
+ }
+ }
+ }
+ }
+ }
+ .tFooter{
+ .tFooter-span{
+ color: var(--p-fc-1);
+ }
+ }
+ }
+ .zy-scroll{
+ &:hover{
+ &::-webkit-scrollbar-thumb {
+ box-shadow: var(--p-bsc-scroll);
+ background: var(--p-c-3);
+ }
+ &::-webkit-scrollbar-track {
+ box-shadow: var(--p-bsc-scroll);
+ background: var(--bgc);
+ }
+ }
+ }
+ .zy-loading{
+ .loader{
+ color: var(--p-c-3);
+ }
+ }
+ .zy-body{
+ background-color: var(--p-bgc-2);
+ }
+ .aside{
+ .zy-svg{
+ svg{
+ stroke: var(--p-c-0);
+ }
+ &:hover{
+ background-color: var(--p-c-2);
+ }
+ &.active{
+ svg{
+ stroke: var(--p-c-0);
+ stroke-width: 2;
+ fill: var(--p-c-2);
+ }
+ }
+ }
+ }
+ .frame{
+ span{
+ &.min{
+ background-color: #ffbe2a;
+ }
+ &.close{
+ background-color: #ff5f56;
+ }
+ }
+ }
+ .detail{
+ color: var(--p-fc-1);
+ background-color:var(--p-bgc-1);
+ box-shadow: var(--p-bsc-2);
+ .detail-content{
+ .detail-close{
+ svg{
+ stroke-width: 1;
+ stroke: var(--p-c-8);
+ &:hover{
+ stroke-width: 2px;
+ stroke: var(--p-c-9);
+ }
+ }
+ }
+ .detail-body{
+ .info, .desc, .m3u8_urls, .mp4_urls{
+ border-color: var(--p-c-2);
+ }
+ .m3u8_urls, .mp4_urls{
+ .box{
+ span{
+ border-color: var(--p-c-5);
+ &:hover{
+ color: var(--p-fc-2);
+ background-color: var(--p-c-1);
+ border-color: var(--p-c-8);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .film{
+ .top{
+ .search{
+ background-color: var(--p-bgc-1);
+ box-shadow: var(--p-bsc);
+ &:hover{
+ box-shadow: var(--p-bsc-hover);
+ }
+ svg{
+ stroke: var(--p-c-0);
+ stroke-width: 1;
+ fill: none;
+ }
+ .search-box{
+ background-color: var(--p-bgc-1);
+ }
+ &.active{
+ box-shadow: var(--p-bsc-hover);
+ svg{
+ stroke-width: 1.5;
+ fill: var(--p-c-2);
+ }
+ }
+ input{
+ color: var(--p-fc-1);
+ }
+ }
+ }
+ .middle{
+ background-color: var(--p-bgc-1);
+ box-shadow: var(--p-bsc);
+ }
+ }
+ .play{
+ background-color: var(--p-bgc-1);
+ box-shadow: var(--p-bsc);
+ .title{
+ color: var(--p-fc-1);
+ }
+ .box{
+ .more{
+ span{
+ svg{
+ stroke: var(--p-c-5);
+ stroke-width: 1;
+ fill: none;
+ }
+ &:hover{
+ svg{
+ stroke: var(--p-c-8);
+ stroke-width: 1.5;
+ fill: var(--p-c-2);
+ }
+ }
+ &.active{
+ svg{
+ stroke: var(--p-c-9);
+ stroke-width: 2;
+ fill: var(--p-c-3);
+ }
+ }
+ }
+ }
+ }
+ .list{
+ border: 1px solid var(--p-c-3);
+ background-color: var(--p-bgc-2);
+ .list-top{
+ color: var(--p-fc-2);
+ .list-top-close{
+ svg{
+ stroke: var(--p-c-5);
+ stroke-width: 1;
+ fill: none;
+ &:hover{
+ stroke: var(--p-c-8);
+ stroke-width: 1.5;
+ fill: var(--p-c-2);
+ }
+ }
+ }
+ }
+ .list-body{
+ .list-item{
+ li{
+ color: var(--p-fc-1);
+ &.active{
+ background-color: var(--p-c-2);
+ color: var(--p-fc-3);
+ }
+ }
+ }
+ .list-history{
+ li{
+ .title{
+ color: var(--p-fc-1);
+ }
+ &.active{
+ background-color: var(--p-c-2);
+ .title{
+ color: var(--p-fc-3);
+ }
+ }
+ &:hover{
+ background-color: var(--p-c-3);
+ .detail-delete{
+ display: inline-block;
+ color: var(--p-fc-2);
+ }
+ }
+ .detail-delete{
+ &:hover{
+ background-color: var(--p-c-2);
+ }
+ }
+ }
+ }
+ }
+ }
+ .play-mask{
+ background-color: var(--p-bgc-1);
+ color: var(--p-fc-1);
+ }
+ }
+ .star{
+ background-color: var(--p-bgc-1);
+ box-shadow: var(--p-bsc);
+ }
+ .setting{
+ background-color: var(--p-bgc-1);
+ box-shadow: var(--p-bsc);
+ .info{
+ a{
+ color: var(--p-fc-1);
+ &:hover{
+ color: var(--p-fc-2);
+ }
+ }
+ }
+ .theme{
+ .title{
+ color: var(--p-fc-1);
+ }
+ .theme-item{
+ box-shadow: var(--p-bsc);
+ &:hover{
+ box-shadow: var(--p-bsc-hover);
+ .theme-name{
+ color: var(--p-fc-2)
+ }
+ }
+ .theme-name{
+ color: var(--p-fc-1);
+ }
+ }
+ }
+ .qrcode{
+ .title{
+ color: var(--p-fc-1);
+ }
+ .qrcode-item{
+ box-shadow: var(--p-bsc);
+ }
+ }
+ }
+ .share{
+ background-color: var(--p-bgc-1);
+ color: var(--p-fc-1);
+ border: 1px solid var(--p-c-8);
+ .right{
+ color: var(--p-fc-1);
+ .tops{
+ color: var(--p-fc-2);
+ }
+ }
+ .share-mask{
+ background-color: var(--p-bgc-1);
+ }
+ }
+}
diff --git a/src/components/Setting.vue b/src/components/Setting.vue
index 5836b65..99c98ce 100644
--- a/src/components/Setting.vue
+++ b/src/components/Setting.vue
@@ -45,6 +45,12 @@
Green
+
+
+
+
+
Pink
+