Improve styles

This commit is contained in:
the1812 2019-07-22 20:17:37 +08:00
parent edadd51f2f
commit 1725f769f5
11 changed files with 28 additions and 24 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
<div class=download-video><a v-bind:href=blobUrl id=video-complete style="display: none"></a><div class=header><h1>下载视频</h1><i class="mdi mdi-close"v-on:click=close()></i></div><div v-if=batch class=tabs><div class="tab download-single"v-bind:class="{active: downloadSingle}"v-on:click="downloadSingle = true">单个视频</div><div class="tab download-batch"v-bind:class="{active: !downloadSingle}"v-on:click="downloadSingle = false">批量导出</div></div><div class=info><img v-show=downloadSingle v-bind:src=coverUrl class=cover><div class=title><span v-show=downloadSingle class=size><div v-if=sizeWarning class=size-warning><i class="mdi mdi-alert-circle"></i><div class=size-warning-tip>警告: 过大的视频大小会在直接下载时占用大量内存, 并可能导致浏览器标签页崩溃. 请考虑降低清晰度或使用导出选项.</div></div>{{displaySize}}</span><span v-show=!downloadSingle class=size>共{{episodeList.length}}P</span></div></div><div class=options><div class=option-item>清晰度<v-dropdown v-on:change=formatChange() v-bind:model=qualityModel></v-dropdown></div><div class=option-item>弹幕<v-dropdown v-on:change=danmakuOptionChange() v-bind:model=danmakuModel></v-dropdown></div></div><div class=separator></div><div v-show=downloadSingle class=direct-download><h2>直接下载</h2><button v-if=!downloading class="primary start-download"v-on:click=startDownload()>开始</button><button v-else class="primary cancel-download"v-on:click=cancelDownload()>取消</button><div class=progress><div class=background><div class=foreground v-bind:style="{width: progressPercent + '%'}"></div></div><span class=percent>{{progressPercent}}%</span></div></div><div v-show=!downloadSingle class=batch-download><div class=episode-header><h2>选集</h2><button class=list-tool title=全选 v-on:click=selectAllEpisodes()><i class="mdi mdi-checkbox-multiple-marked-circle"></i></button><button class=list-tool title=全不选 v-on:click=unselectAllEpisodes()><i class="mdi mdi-checkbox-multiple-blank-circle-outline"></i></button><button class=list-tool title=反选 v-on:click=inverseAllEpisodes()><i class="mdi mdi-circle-slice-4"></i></button><span class=selected-count>{{selectedEpisodeCount}}/{{episodeList.length}}</span></div><div class=episode-list><v-checkbox v-for="ep of episodeList"v-bind:key=ep.index v-bind:model=ep></v-checkbox></div></div><div class=separator></div><div class=exports><h2>导出</h2><div class=actions v-bind:class="{busy: busy}"><button class=copy-link v-bind:disabled="downloadSingle ? null : 'disabled'"v-on:click="exportData('copyLink')">复制链接</button><button class=aria2-file v-on:click="exportData('aria2')">导出aria2</button><button class=vld-copy v-on:click="exportData('copyVLD')">复制vld数据</button><button class=vld-export v-on:click="exportData('exportVLD')">导出vld数据</button><div class="button aria2-rpc"v-on:click.self=toggleRpcSettings()>导出aria2 RPC<i class="mdi mdi-chevron-right"></i><div class=rpc-settings v-bind:class="{show: showRpcSettings}"><h1>aria2 RPC 配置</h1><div class=rpc-settings-item>主机<input type=text v-model=rpcSettings.host placeholder=127.0.0.1></div><div class=rpc-settings-item>端口<input type=text v-model=rpcSettings.port placeholder=6800></div><div class=rpc-settings-item>密钥<input type=text v-model=rpcSettings.secretKey></div><div class=rpc-settings-item>路径<input type=text v-model=rpcSettings.dir></div><div class="primary button"v-on:click="saveRpcSettings();toggleRpcSettings();exportData('aria2RPC')">确定</div></div></div></div></div></div>
<div class=download-video><a v-bind:href=blobUrl id=video-complete style="display: none"></a><div class=header><h1>下载视频</h1><i class="mdi mdi-close"v-on:click=close()></i></div><div v-if=batch class=tabs><div class="tab download-single"v-bind:class="{active: downloadSingle}"v-on:click="downloadSingle = true">单个视频</div><div class="tab download-batch"v-bind:class="{active: !downloadSingle}"v-on:click="downloadSingle = false">批量导出</div></div><div v-show=downloadSingle class=info><img v-bind:src=coverUrl class=cover><div class=title><span class=size><div v-if=sizeWarning class=size-warning><i class="mdi mdi-alert-circle"></i><div class=size-warning-tip>警告: 过大的视频大小会在直接下载时占用大量内存, 并可能导致浏览器标签页崩溃. 请考虑降低清晰度或使用导出选项.</div></div>预计大小: {{displaySize}}</span></div></div><div class=options><div class=option-item>清晰度<v-dropdown v-on:change=formatChange() v-bind:model=qualityModel></v-dropdown></div><div class=option-item>弹幕<v-dropdown v-on:change=danmakuOptionChange() v-bind:model=danmakuModel></v-dropdown></div></div><div class=separator></div><div v-show=downloadSingle class=direct-download><h2>直接下载</h2><button v-if=!downloading class="primary start-download"v-on:click=startDownload()>开始</button><button v-else class="primary cancel-download"v-on:click=cancelDownload()>取消</button><div class=progress><div class=background><div class=foreground v-bind:style="{width: progressPercent + '%'}"></div></div><span class=percent>{{progressPercent}}%</span></div></div><div v-show=!downloadSingle class=batch-download><div class=episode-header><h2>选集</h2><button class=list-tool title=全选 v-on:click=selectAllEpisodes()><i class="mdi mdi-checkbox-multiple-marked-circle"></i></button><button class=list-tool title=全不选 v-on:click=unselectAllEpisodes()><i class="mdi mdi-checkbox-multiple-blank-circle-outline"></i></button><button class=list-tool title=反选 v-on:click=inverseAllEpisodes()><i class="mdi mdi-circle-slice-4"></i></button><span class=selected-count>{{selectedEpisodeCount}}/{{episodeList.length}}</span></div><div class=episode-list><v-checkbox v-for="ep of episodeList"v-bind:key=ep.index v-bind:model=ep></v-checkbox></div></div><div class=separator></div><div class=exports><h2>导出</h2><div class=actions v-bind:class="{busy: busy}"><button class=copy-link v-bind:disabled="downloadSingle ? null : 'disabled'"v-on:click="exportData('copyLink')">复制链接</button><button class=aria2-file v-on:click="exportData('aria2')">导出aria2</button><button class=vld-copy v-on:click="exportData('copyVLD')">复制vld数据</button><button class=vld-export v-on:click="exportData('exportVLD')">导出vld数据</button><div class="button aria2-rpc"v-on:click.self=toggleRpcSettings()>导出aria2 RPC<i class="mdi mdi-chevron-right"></i><div class=rpc-settings v-bind:class="{show: showRpcSettings}"><h1>aria2 RPC 配置</h1><div class=rpc-settings-item>主机<input type=text v-model=rpcSettings.host placeholder=127.0.0.1></div><div class=rpc-settings-item>端口<input type=text v-model=rpcSettings.port placeholder=6800></div><div class=rpc-settings-item>密钥<input type=text v-model=rpcSettings.secretKey></div><div class=rpc-settings-item>路径<input type=text v-model=rpcSettings.dir></div><div class="primary button"v-on:click="saveRpcSettings();toggleRpcSettings();exportData('aria2RPC')">确定</div></div></div></div></div></div>

File diff suppressed because one or more lines are too long

View File

@ -523,8 +523,8 @@ class UserInfo extends NavbarComponent {
<a class="type" target="_blank" href="https://account.bilibili.com/account/big">{{userType}}</a>
<div class="level-info row">
<a target="_blank" title="等级" href="https://account.bilibili.com/site/record?type=exp"
class="level custom-navbar-iconfont-extended">
<i v-bind:class="'custom-navbar-icon-lv' + level_info.current_level"></i>
class="level">
<i class="custom-navbar-iconfont-extended" v-bind:class="'custom-navbar-icon-lv' + level_info.current_level"></i>
</a>
<span class="level-progress-label">{{level_info.current_exp}} / {{level_info.next_exp}}</span>
</div>

View File

@ -20,6 +20,10 @@
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;
@ -342,7 +346,7 @@ body.dark .download-video .direct-download .progress .foreground {
}
.download-video .episode-list {
overflow: auto;
height: 240px;
max-height: 320px;
}
.download-video button.list-tool {
padding: 4px;

View File

@ -10,20 +10,20 @@
<div class="tab download-batch" v-bind:class="{active: !downloadSingle}" v-on:click="downloadSingle = false">批量导出
</div>
</div>
<div class="info">
<img v-show="downloadSingle" v-bind:src="coverUrl" class="cover">
<div v-show="downloadSingle" class="info">
<img v-bind:src="coverUrl" class="cover">
<div class="title">
<!-- <span class="bold" v-bind:title="'av' + aid + ' / cid' + cid">av{{aid}} / cid{{cid}}</span> -->
<span v-show="downloadSingle" class="size">
<span class="size">
<div v-if="sizeWarning" class="size-warning">
<i class="mdi mdi-alert-circle"></i>
<div class="size-warning-tip">
警告: 过大的视频大小会在直接下载时占用大量内存, 并可能导致浏览器标签页崩溃. 请考虑降低清晰度或使用导出选项.
</div>
</div>
{{displaySize}}
预计大小: {{displaySize}}
</span>
<span v-show="!downloadSingle" class="size">共{{episodeList.length}}P</span>
<!-- <span v-show="!downloadSingle" class="size">共{{episodeList.length}}P</span> -->
</div>
</div>
<div class="options">

View File

@ -522,7 +522,7 @@ async function loadPanel() {
el: '.download-video',
data: {
downloadSingle: true,
coverUrl: '',
coverUrl: 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>',
aid: pageData.aid,
cid: pageData.cid,
qualityModel: {

View File

@ -544,7 +544,7 @@ async function loadPanel() {
el: '.download-video',
data: {
downloadSingle: true,
coverUrl: '',
coverUrl: 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>',
aid: pageData.aid,
cid: pageData.cid,
qualityModel: {