mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Refactor download video styles
This commit is contained in:
parent
c3d9d0561d
commit
e30d3395c2
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1795,6 +1795,12 @@ Resource.manifest = {
|
||||
vDropdown: '下拉框组件',
|
||||
},
|
||||
},
|
||||
vCheckbox: {
|
||||
path: 'v-checkbox.vue.min.js',
|
||||
displayNames: {
|
||||
vCheckbox: '复选框组件',
|
||||
},
|
||||
},
|
||||
doubleClickFullscreen: {
|
||||
path: 'double-click-fullscreen.min.js',
|
||||
displayNames: {
|
||||
|
||||
@ -1795,6 +1795,12 @@ Resource.manifest = {
|
||||
vDropdown: '下拉框组件',
|
||||
},
|
||||
},
|
||||
vCheckbox: {
|
||||
path: 'v-checkbox.vue.min.js',
|
||||
displayNames: {
|
||||
vCheckbox: '复选框组件',
|
||||
},
|
||||
},
|
||||
doubleClickFullscreen: {
|
||||
path: 'double-click-fullscreen.min.js',
|
||||
displayNames: {
|
||||
|
||||
2
min/download-video.min.css
vendored
2
min/download-video.min.css
vendored
File diff suppressed because one or more lines are too long
2
min/download-video.min.js
vendored
2
min/download-video.min.js
vendored
File diff suppressed because one or more lines are too long
1
min/v-checkbox.vue.min.js
vendored
Normal file
1
min/v-checkbox.vue.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
(()=>{return(e,c)=>{const i=`<div class=v-checkbox v-on:click=toggleCheck() v-bind:class="{checked: checked}"><i class="mdi mdi-checkbox-blank-circle-outline"><i class="mdi mdi-checkbox-marked-circle"></i></i><span class=content>{{title}}</span></div>`;c.applyStyleFromText(`.v-checkbox{font-size:10pt;cursor:pointer;display:flex;align-items:center}.v-checkbox .mdi{font-size:15pt;line-height:1}.v-checkbox .content{flex-grow:1;text-align:left;padding:0 8px}.v-checkbox .mdi-checkbox-marked-circle{color:var(--theme-color);position:absolute;top:0;left:0;transform:scale(0);transition-timing-function:cubic-bezier(.6,-.28,.74,.05)}.v-checkbox .mdi-checkbox-blank-circle-outline{color:#8884;position:relative}.v-checkbox.checked .mdi-checkbox-blank-circle-outline{color:var(--theme-color)}.v-checkbox.checked .mdi-checkbox-marked-circle{transform:scale(1);transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}`,"v-checkbox-style");return{export:Object.assign({template:i},{props:["checked","title"],methods:{toggleCheck(){this.$emit("update:checked",!this.checked)}}})}}})();
|
||||
2
min/v-dropdown.vue.min.js
vendored
2
min/v-dropdown.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(o,e)=>{const n=`<div class=v-dropdown @click=toggleDropdown()><span class=selected>{{ value }}</span><ul class=dropdown-menu :class="{ opened: dropdownOpen }"><li v-for="item in items":key=item :data-value=item @click=select(item)>{{ item }}</li></ul><i class="mdi mdi-chevron-down"></i></div>`;e.applyStyleFromText(`.v-dropdown{position:relative;background-color:#8884;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-width:100px}.v-dropdown .dropdown-menu{transform-origin:top;transform:scaleY(0) translateX(-50%);position:absolute;top:calc(100% + 2px);left:50%;background-color:var(--download-video-background);z-index:1;transition:.2s cubic-bezier(.6,-.28,.74,.05);box-shadow:rgba(0,0,0,.2) 0 4px 8px 0}.v-dropdown .dropdown-menu.opened{transform:scaleY(1) translateX(-50%);transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}.v-dropdown .dropdown-menu li{padding:4px 8px;white-space:nowrap;min-width:80px;text-align:center;cursor:pointer;color:var(--download-video-foreground);background-color:transparent}.v-dropdown .dropdown-menu li:hover{background-color:rgba(0,0,0,.16)}.v-dropdown .mdi-chevron-down{font-size:16pt;line-height:1;transform:rotate(0)}.v-dropdown .dropdown-menu.opened~.mdi-chevron-down{transform:rotate(180deg)}.v-dropdown .selected{user-select:none;padding:4px 8px}`,"v-dropdown-style");return{export:Object.assign({template:n},{props:["items","value"],data(){return{dropdownOpen:false}},methods:{toggleDropdown(){this.dropdownOpen=!this.dropdownOpen},select(o){this.$emit("update:value",o);this.$emit("change",o)}}})}}})();
|
||||
(()=>{return(o,e)=>{const n=`<div class=v-dropdown @click=toggleDropdown()><span class=selected>{{ value }}</span><ul class=dropdown-menu :class="{ opened: dropdownOpen }"><li v-for="item in items":key=item :data-value=item @click=select(item)>{{ item }}</li></ul><i class="mdi mdi-chevron-down"></i></div>`;e.applyStyleFromText(`.v-dropdown{position:relative;background-color:#8884;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-width:100px}.v-dropdown .dropdown-menu{transform-origin:top;transform:scaleY(0) translateX(-50%);position:absolute;top:calc(100% + 2px);left:50%;background-color:var(--download-video-background);z-index:1;transition:.2s cubic-bezier(.6,-.28,.74,.05);box-shadow:rgba(0,0,0,.2) 0 4px 8px 0}.v-dropdown .dropdown-menu.opened{transform:scaleY(1) translateX(-50%);transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}.v-dropdown .dropdown-menu li{padding:4px 8px;white-space:nowrap;min-width:80px;text-align:center;cursor:pointer;color:var(--download-video-foreground);background-color:transparent}.v-dropdown .dropdown-menu li:hover{background-color:rgba(0,0,0,.16)}.v-dropdown .mdi-chevron-down{font-size:16pt;line-height:1;transform:rotate(0)}.v-dropdown .dropdown-menu.opened~.mdi-chevron-down{transform:rotate(180deg)}.v-dropdown .selected{user-select:none;padding:4px 8px}.round-corner .v-dropdown,.round-corner .v-dropdown .dropdown-menu,.round-corner .v-dropdown .dropdown-menu li{border-radius:var(--corner-radius)}`,"v-dropdown-style");return{export:Object.assign({template:n},{props:["items","value"],data(){return{dropdownOpen:false}},methods:{toggleDropdown(){this.dropdownOpen=!this.dropdownOpen},select(o){this.$emit("update:value",o);this.$emit("change",o)}}})}}})();
|
||||
@ -694,6 +694,12 @@ Resource.manifest = {
|
||||
vDropdown: '下拉框组件',
|
||||
},
|
||||
},
|
||||
vCheckbox: {
|
||||
path: 'v-checkbox.vue.min.js',
|
||||
displayNames: {
|
||||
vCheckbox: '复选框组件',
|
||||
},
|
||||
},
|
||||
doubleClickFullscreen: {
|
||||
path: 'double-click-fullscreen.min.js',
|
||||
displayNames: {
|
||||
|
||||
@ -1,374 +0,0 @@
|
||||
.download-video.opened
|
||||
{
|
||||
pointer-events: initial;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
.download-video
|
||||
{
|
||||
--download-video-background: white;
|
||||
--download-video-foreground: black;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.95);
|
||||
background: var(--download-video-background);
|
||||
color: var(--download-video-foreground);
|
||||
box-shadow: rgba(0,0,0,0.2) 0 4px 8px 0px;
|
||||
z-index: 10001;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
padding: 16px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
}
|
||||
body.dark .download-video {
|
||||
--download-video-background: #222;
|
||||
--download-video-foreground: #eee;
|
||||
}
|
||||
.round-corner .download-video,
|
||||
.round-corner .download-video .episode-list .v-checkbox,
|
||||
.round-corner .download-video .rpc-settings {
|
||||
border-radius: var(--large-corner-radius);
|
||||
}
|
||||
.round-corner .download-video .title,
|
||||
.round-corner .download-video .cover,
|
||||
.round-corner .v-dropdown,
|
||||
.round-corner .v-dropdown .dropdown-menu,
|
||||
.round-corner .v-dropdown .dropdown-menu li,
|
||||
.round-corner .download-video button,
|
||||
.round-corner .download-video .button,
|
||||
.round-corner .download-video .direct-download .progress .background,
|
||||
.round-corner .download-video .direct-download .progress .foreground,
|
||||
.round-corner .download-video .rpc-settings input[type="text"] {
|
||||
border-radius: var(--corner-radius);
|
||||
}
|
||||
.download-video,
|
||||
.download-video * {
|
||||
transition: all .2s ease-out;
|
||||
-webkit-tap-highlight-color: transparent !important;
|
||||
}
|
||||
.download-video .cover {
|
||||
width: 240px;
|
||||
min-height: 135px;
|
||||
background-color: #8882;
|
||||
}
|
||||
.download-video .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.download-video h1 {
|
||||
font-size: 16pt;
|
||||
font-weight: bold;
|
||||
color: var(--download-video-foreground);
|
||||
}
|
||||
.download-video .header .mdi-close {
|
||||
font-size: 16pt;
|
||||
color: var(--download-video-foreground);
|
||||
cursor: pointer;
|
||||
}
|
||||
.download-video .header .mdi-close:hover {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.download-video .info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.download-video .title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.download-video .bold {
|
||||
color: var(--download-video-foreground);
|
||||
font-weight: bold;
|
||||
font-size: 12pt;
|
||||
}
|
||||
.download-video .title .bold {
|
||||
width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
.download-video .title .size {
|
||||
font-size: 10pt;
|
||||
color: var(--download-video-foreground);
|
||||
align-self: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
}
|
||||
.download-video .option-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
.download-video .tabs {
|
||||
display: flex;
|
||||
padding-top: 12px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
.download-video .tabs .tab {
|
||||
padding: 6px 12px;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.download-video .tab.active {
|
||||
color: var(--theme-color);
|
||||
border-bottom-color: var(--theme-color);
|
||||
}
|
||||
.download-video .separator {
|
||||
height: 1px;
|
||||
background: #8884;
|
||||
width: 100%;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.download-video h2 {
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
color: var(--download-video-foreground);
|
||||
}
|
||||
.download-video .direct-download {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.download-video button,
|
||||
.download-video .button {
|
||||
border: none;
|
||||
outline: none !important;
|
||||
padding: 6px 16px;
|
||||
font-size: 10pt;
|
||||
cursor: pointer;
|
||||
background: #8884;
|
||||
color: var(--download-video-foreground);
|
||||
}
|
||||
.download-video button:hover,
|
||||
.download-video .button:hover {
|
||||
background: #8886;
|
||||
}
|
||||
.download-video .primary {
|
||||
background: var(--theme-color);
|
||||
color: var(--foreground-color);
|
||||
align-self: center;
|
||||
}
|
||||
.download-video .primary:hover {
|
||||
background: var(--theme-color-90);
|
||||
}
|
||||
.download-video button:disabled,
|
||||
.download-video .busy button,
|
||||
.download-video .busy .button,
|
||||
.download-video .busy .primary {
|
||||
background-color: #0001;
|
||||
color: #8884;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.download-video .busy button,
|
||||
.download-video .busy .button {
|
||||
cursor: wait !important;
|
||||
}
|
||||
.download-video .direct-download .progress {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.download-video .direct-download .progress .background {
|
||||
flex-grow: 1;
|
||||
height: 4px;
|
||||
background: #8884;
|
||||
margin-right: 4px;
|
||||
position: relative;
|
||||
}
|
||||
.download-video .direct-download .progress .foreground {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(to right, var(--theme-color), var(--theme-color-60));
|
||||
}
|
||||
body.dark .download-video .direct-download .progress .foreground {
|
||||
background: linear-gradient(to right, var(--theme-color-70), var(--theme-color));
|
||||
}
|
||||
.download-video .direct-download .progress .percent {
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
.download-video .actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin: 8px -4px 0 -4px;
|
||||
}
|
||||
.download-video .actions>* {
|
||||
margin: 4px;
|
||||
flex-grow: 1;
|
||||
flex-basis: calc(50% - 16px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.download-video i.mdi-alert-circle {
|
||||
font-size: 14pt;
|
||||
color: #FF9800;
|
||||
}
|
||||
.download-video .size-warning {
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.download-video .size-warning-tip {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--download-video-background);
|
||||
color: var(--download-video-foreground);
|
||||
border: 1px dashed var(--theme-color);
|
||||
z-index: 2;
|
||||
font-size: 10pt;
|
||||
width: 300px;
|
||||
padding: 8px;
|
||||
box-shadow: rgba(0,0,0,0.2) 0 4px 8px 0px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.download-video .size-warning:hover .size-warning-tip {
|
||||
opacity: 1;
|
||||
}
|
||||
.download-video .episode-list .v-checkbox {
|
||||
padding: 4px 8px;
|
||||
margin: 4px 0;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
}
|
||||
.download-video .episode-list .v-checkbox.checked {
|
||||
background-color: #8882;
|
||||
}
|
||||
.v-checkbox {
|
||||
font-size: 10pt;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.v-checkbox .mdi {
|
||||
font-size: 15pt;
|
||||
line-height: 1;
|
||||
}
|
||||
.v-checkbox .content {
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.v-checkbox .mdi-checkbox-marked-circle {
|
||||
color: var(--theme-color);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
transition-timing-function: cubic-bezier(0.6, -0.28, 0.74, 0.05);
|
||||
}
|
||||
.v-checkbox .mdi-checkbox-blank-circle-outline {
|
||||
color: #8884;
|
||||
position: relative;
|
||||
}
|
||||
.v-checkbox.checked .mdi-checkbox-blank-circle-outline {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.v-checkbox.checked .mdi-checkbox-marked-circle {
|
||||
transform: scale(1);
|
||||
transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
}
|
||||
.download-video .episode-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.download-video .episode-list {
|
||||
overflow: auto;
|
||||
max-height: 320px;
|
||||
}
|
||||
.download-video button.list-tool {
|
||||
padding: 4px;
|
||||
line-height: 1;
|
||||
font-size: 12pt;
|
||||
margin: 0 4px;
|
||||
}
|
||||
.download-video .episode-header h2 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.download-video .selected-count {
|
||||
width: 64px;
|
||||
text-align: right;
|
||||
}
|
||||
.download-video .aria2-rpc .mdi {
|
||||
margin-left: 8px;
|
||||
font-size: 14pt;
|
||||
line-height: 1;
|
||||
}
|
||||
.download-video .aria2-rpc {
|
||||
position: relative;
|
||||
}
|
||||
.download-video .rpc-settings {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
color: var(--download-video-foreground);
|
||||
background: var(--download-video-background);
|
||||
bottom: 120%;
|
||||
left: 50%;
|
||||
cursor: initial;
|
||||
box-shadow: rgba(0,0,0,0.2) 0 4px 8px 0px;
|
||||
transform-origin: bottom;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
padding: 8px;
|
||||
z-index: 3;
|
||||
}
|
||||
.download-video .rpc-settings>* {
|
||||
margin: 8px;
|
||||
}
|
||||
.download-video .rpc-settings.show {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
.download-video .rpc-settings-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.download-video .rpc-settings input[type="text"] {
|
||||
background: transparent;
|
||||
color: var(--download-video-foreground);
|
||||
border: 1px solid #8884;
|
||||
padding: 4px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.download-video .rpc-settings input[type="text"]:focus {
|
||||
border-color: var(--theme-color);
|
||||
}
|
||||
.download-video button.start-download,
|
||||
.download-video button.cancel-download {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.download-video .direct-download-header {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
342
src/video/download-video/download-video.scss
Normal file
342
src/video/download-video/download-video.scss
Normal file
@ -0,0 +1,342 @@
|
||||
.download-video {
|
||||
--download-video-background: white;
|
||||
--download-video-foreground: black;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.95);
|
||||
background: var(--download-video-background);
|
||||
color: var(--download-video-foreground);
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 4px 8px 0px;
|
||||
z-index: 10001;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
padding: 16px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
max-height: 90%;
|
||||
overflow: auto;
|
||||
|
||||
&,
|
||||
* {
|
||||
transition: all 0.2s ease-out;
|
||||
-webkit-tap-highlight-color: transparent !important;
|
||||
}
|
||||
&.opened {
|
||||
pointer-events: initial;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
body.dark & {
|
||||
--download-video-background: #222;
|
||||
--download-video-foreground: #eee;
|
||||
}
|
||||
.round-corner & {
|
||||
border-radius: var(--large-corner-radius);
|
||||
.episode-list .v-checkbox,
|
||||
.rpc-settings {
|
||||
border-radius: var(--large-corner-radius);
|
||||
}
|
||||
.title,
|
||||
.cover,
|
||||
button,
|
||||
.button,
|
||||
.direct-download .progress .background,
|
||||
.direct-download .progress .foreground,
|
||||
.rpc-settings input[type="text"] {
|
||||
border-radius: var(--corner-radius);
|
||||
}
|
||||
}
|
||||
.cover {
|
||||
width: 240px;
|
||||
min-height: 135px;
|
||||
background-color: #8882;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
h1 {
|
||||
font-size: 16pt;
|
||||
font-weight: bold;
|
||||
color: var(--download-video-foreground);
|
||||
}
|
||||
.header .mdi-close {
|
||||
font-size: 16pt;
|
||||
color: var(--download-video-foreground);
|
||||
cursor: pointer;
|
||||
}
|
||||
.header .mdi-close:hover {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
margin-top: 12px;
|
||||
|
||||
.bold {
|
||||
width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
.size {
|
||||
font-size: 10pt;
|
||||
color: var(--download-video-foreground);
|
||||
align-self: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
.bold {
|
||||
color: var(--download-video-foreground);
|
||||
font-weight: bold;
|
||||
font-size: 12pt;
|
||||
}
|
||||
.option-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
padding-top: 12px;
|
||||
font-size: 10pt;
|
||||
.tab {
|
||||
padding: 6px 12px;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: var(--theme-color);
|
||||
border-bottom-color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.separator {
|
||||
height: 1px;
|
||||
background: #8884;
|
||||
width: 100%;
|
||||
margin: 12px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
color: var(--download-video-foreground);
|
||||
}
|
||||
.direct-download {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
button,
|
||||
.button {
|
||||
border: none;
|
||||
outline: none !important;
|
||||
padding: 6px 16px;
|
||||
font-size: 10pt;
|
||||
cursor: pointer;
|
||||
background: #8884;
|
||||
color: var(--download-video-foreground);
|
||||
}
|
||||
button:hover,
|
||||
.button:hover {
|
||||
background: #8886;
|
||||
}
|
||||
.primary {
|
||||
background: var(--theme-color);
|
||||
color: var(--foreground-color);
|
||||
align-self: center;
|
||||
}
|
||||
.primary:hover {
|
||||
background: var(--theme-color-90);
|
||||
}
|
||||
button:disabled,
|
||||
.busy button,
|
||||
.busy .button,
|
||||
.busy .primary {
|
||||
background-color: #0001;
|
||||
color: #8884;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.busy button,
|
||||
.busy .button {
|
||||
cursor: wait !important;
|
||||
}
|
||||
.direct-download .progress {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
.background {
|
||||
flex-grow: 1;
|
||||
height: 4px;
|
||||
background: #8884;
|
||||
margin-right: 4px;
|
||||
position: relative;
|
||||
.foreground {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(to right, var(--theme-color), var(--theme-color-60));
|
||||
}
|
||||
}
|
||||
}
|
||||
.direct-download .progress .percent {
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin: 8px -4px 0 -4px;
|
||||
}
|
||||
.actions > * {
|
||||
margin: 4px;
|
||||
flex-grow: 1;
|
||||
flex-basis: calc(50% - 16px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
i.mdi-alert-circle {
|
||||
font-size: 14pt;
|
||||
color: #ff9800;
|
||||
}
|
||||
.size-warning {
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.size-warning-tip {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--download-video-background);
|
||||
color: var(--download-video-foreground);
|
||||
border: 1px dashed var(--theme-color);
|
||||
z-index: 2;
|
||||
font-size: 10pt;
|
||||
width: 300px;
|
||||
padding: 8px;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 4px 8px 0px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.size-warning:hover .size-warning-tip {
|
||||
opacity: 1;
|
||||
}
|
||||
.episode-list .v-checkbox {
|
||||
padding: 4px 8px;
|
||||
margin: 4px 0;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
}
|
||||
.episode-list .v-checkbox.checked {
|
||||
background-color: #8882;
|
||||
}
|
||||
.episode-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.episode-list {
|
||||
overflow: auto;
|
||||
max-height: 320px;
|
||||
}
|
||||
button.list-tool {
|
||||
padding: 4px;
|
||||
line-height: 1;
|
||||
font-size: 12pt;
|
||||
margin: 0 4px;
|
||||
}
|
||||
.episode-header h2 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.selected-count {
|
||||
width: 64px;
|
||||
text-align: right;
|
||||
}
|
||||
.aria2-rpc .mdi {
|
||||
margin-left: 8px;
|
||||
font-size: 14pt;
|
||||
line-height: 1;
|
||||
}
|
||||
.aria2-rpc {
|
||||
position: relative;
|
||||
}
|
||||
.rpc-settings {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
color: var(--download-video-foreground);
|
||||
background: var(--download-video-background);
|
||||
bottom: 120%;
|
||||
left: 50%;
|
||||
cursor: initial;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 4px 8px 0px;
|
||||
transform-origin: bottom;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
padding: 8px;
|
||||
z-index: 3;
|
||||
}
|
||||
.rpc-settings > * {
|
||||
margin: 8px;
|
||||
}
|
||||
.rpc-settings.show {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
.rpc-settings-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.rpc-settings input[type="text"] {
|
||||
background: transparent;
|
||||
color: var(--download-video-foreground);
|
||||
border: 1px solid #8884;
|
||||
padding: 4px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.rpc-settings input[type="text"]:focus {
|
||||
border-color: var(--theme-color);
|
||||
}
|
||||
button.start-download,
|
||||
button.cancel-download {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.direct-download-header {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
body.dark .download-video .direct-download .progress .foreground {
|
||||
background: linear-gradient(to right, var(--theme-color-70), var(--theme-color));
|
||||
}
|
||||
@ -497,22 +497,7 @@ async function loadWidget() {
|
||||
}
|
||||
async function loadPanel() {
|
||||
const VueDropDown = await import((() => './v-dropdown.vue')())
|
||||
Vue.component('v-checkbox', {
|
||||
template: /*html*/`
|
||||
<div class="v-checkbox" v-on:click="toggleCheck()" v-bind:class="{checked: checked}">
|
||||
<i class="mdi mdi-checkbox-blank-circle-outline">
|
||||
<i class="mdi mdi-checkbox-marked-circle"></i>
|
||||
</i>
|
||||
<span class="content">{{title}}</span>
|
||||
</div>
|
||||
`,
|
||||
props: ['checked', 'title'],
|
||||
methods: {
|
||||
toggleCheck() {
|
||||
this.$emit('update:checked', !this.checked)
|
||||
},
|
||||
},
|
||||
})
|
||||
const VueCheckBox = await import((() => './v-checkbox.vue')())
|
||||
let workingDownloader: VideoDownloader
|
||||
const sizeCache = new Map<VideoFormat, number>()
|
||||
type ExportType = 'copyLink' | 'aria2' | 'aria2RPC' | 'copyVLD' | 'exportVLD'
|
||||
@ -527,6 +512,7 @@ async function loadPanel() {
|
||||
el: '.download-video',
|
||||
components: {
|
||||
'v-dropdown': VueDropDown,
|
||||
'v-checkbox': VueCheckBox,
|
||||
},
|
||||
data: {
|
||||
downloadSingle: true,
|
||||
|
||||
55
src/video/download-video/v-checkbox.vue
Normal file
55
src/video/download-video/v-checkbox.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="v-checkbox" v-on:click="toggleCheck()" v-bind:class="{checked: checked}">
|
||||
<i class="mdi mdi-checkbox-blank-circle-outline">
|
||||
<i class="mdi mdi-checkbox-marked-circle"></i>
|
||||
</i>
|
||||
<span class="content">{{title}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
props: ['checked', 'title'],
|
||||
methods: {
|
||||
toggleCheck() {
|
||||
this.$emit('update:checked', !this.checked)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.v-checkbox {
|
||||
font-size: 10pt;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mdi {
|
||||
font-size: 15pt;
|
||||
line-height: 1;
|
||||
}
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.mdi-checkbox-marked-circle {
|
||||
color: var(--theme-color);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
transition-timing-function: cubic-bezier(0.6, -0.28, 0.74, 0.05);
|
||||
}
|
||||
.mdi-checkbox-blank-circle-outline {
|
||||
color: #8884;
|
||||
position: relative;
|
||||
}
|
||||
&.checked .mdi-checkbox-blank-circle-outline {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
&.checked .mdi-checkbox-marked-circle {
|
||||
transform: scale(1);
|
||||
transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -75,5 +75,14 @@ export default {
|
||||
user-select: none;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.round-corner & {
|
||||
border-radius: var(--corner-radius);
|
||||
|
||||
.dropdown-menu,
|
||||
.dropdown-menu li {
|
||||
border-radius: var(--corner-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user