danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fixes.

Browse source
This commit is contained in:
ArabCoders 2023-11-29 22:27:54 +03:00
parent 16788b79ff
commit 2b05f0b17a
2 changed files with 35 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
frontend/src/assets/css/style.css
View file

@ -14,78 +14,10 @@
border-radius: 15px;
}
progress.show-value {
position: relative;
}
progress.show-value:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
font-size: calc(1rem / 1.5);
line-height: 1rem;
white-space: pre;
}
progress.show-value.is-small:after {
font-size: calc(0.75rem / 1.5);
line-height: 0.75rem;
}
progress.show-value.is-medium:after {
font-size: calc(1.25rem / 1.5);
line-height: 1.25rem;
}
progress.show-value.is-large:after {
font-size: calc(1.5rem / 1.5);
line-height: 1.5rem;
}
table.is-fixed {
table-layout: fixed;
}
.progress.is-auto {
height: unset;
max-height: 35px;
}
.progress-text {
margin: 0 50%;
position: relative;
white-space: pre;
}
div.d-progress {
background-color: #ededed;
position: relative;
}
div.d-progress-bar {
width: 50%;
height: 1.5rem;
transition: width 150ms;
}
div.d-progress>span.d-progress-text {
position: absolute;
display: inline-block;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
font-size: calc(1.5rem / 1.5);
white-space: nowrap;
}
.is-bordered-danger {
border: 1px solid red;
}
html,
body {
background-color: #eaeaea;
@ -116,73 +48,6 @@
border-radius: 15px;
}
progress.show-value {
position: relative;
}
progress.show-value:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
font-size: calc(1rem / 1.5);
line-height: 1rem;
white-space: pre;
}
progress.show-value.is-small:after {
font-size: calc(0.75rem / 1.5);
line-height: 0.75rem;
}
progress.show-value.is-medium:after {
font-size: calc(1.25rem / 1.5);
line-height: 1.25rem;
}
progress.show-value.is-large:after {
font-size: calc(1.5rem / 1.5);
line-height: 1.5rem;
}
table.is-fixed {
table-layout: fixed;
}
.progress.is-auto {
height: unset;
max-height: 35px;
}
.progress-text {
margin: 0 50%;
position: relative;
white-space: pre;
}
div.d-progress {
background-color: #ededed;
position: relative;
}
div.d-progress-bar {
width: 50%;
height: 1.5rem;
transition: width 150ms;
}
div.d-progress>span.d-progress-text {
position: absolute;
display: inline-block;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
font-size: calc(1.5rem / 1.5);
white-space: nowrap;
}
.is-bordered-danger {
border: 1px solid red;
}
@ -191,11 +56,6 @@
background-color: #fff;
}
div.d-progress {
background-color: #999999;
color: #313131;
}
html,
body {
background-color: #000000;

38
frontend/src/components/Page-Downloading.vue
View file

@ -39,9 +39,10 @@
<div class="card-content">
<div class="columns is-multiline">
<div class="column is-12">
<progress class="progress is-large is-success show-value" :data-text="updateProgress(item)"
:value="item.percent ? percentPipe(item.percent) : '100'" max="100">
</progress>
<div id="progress-bar" class="is-round">
<div id="progress-percentage">{{ updateProgress(item) }}</div>
<div id="progress" :style="{ width: percentPipe(item.percent) + '%' }"></div>
</div>
</div>
<div class="column is-4 has-text-centered">
<span class="icon-text">
@ -204,3 +205,34 @@ const updateProgress = (item) => {
return string;
}
</script>
<style scoped>
#progress-bar {
border-radius: 15px;
position: relative;
width: 100%;
height: 30px;
background-color: gray;
}
#progress,
#progress-percentage {
border-radius: 15px;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#progress-percentage {
text-align: center;
z-index: 2;
line-height: 30px;
}
#progress {
z-index: 1;
background-color: green;
}
</style>