magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sync progress bar somewhat working

Browse source
This commit is contained in:
Magnus Åhall 2025-01-21 18:20:50 +01:00
parent f33e5d54af
commit 3453dffb53
8 changed files with 250 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

61
static/less/notes2.less
View file

@ -10,6 +10,7 @@ html {
display: grid;
grid-template-areas:
"tree crumbs"
"tree sync"
"tree name"
"tree content"
//"tree checklist"
@ -22,6 +23,7 @@ html {
@media only screen and (max-width: 600px) {
grid-template-areas:
"crumbs"
"sync"
"name"
"content"
//"checklist"
@ -110,6 +112,61 @@ html {
margin: 16px;
}
#sync-progress {
grid-area: sync;
display: grid;
justify-items: center;
justify-self: center;
width: 100%;
max-width: 900px;
height: 56px;
position: relative;
&.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 500ms, opacity 500ms linear;
}
progress {
width: calc(100% - 16px);
height: 16px;
border-radius: 4px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset;
border-radius: 4px;
}
progress[value]::-moz-progress-bar {
background-color: #eee;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset;
border-radius: 4px;
}
progress[value]::-webkit-progress-value {
background: rgb(186,95,89);
background: linear-gradient(180deg, rgba(186,95,89,1) 0%, rgba(254,95,85,1) 50%, rgba(186,95,89,1) 100%);
border-radius: 4px;
}
// TODO: style the progress value for Firefox
progress[value]::-moz-progress-value {
background: rgb(186,95,89);
background: linear-gradient(180deg, rgba(186,95,89,1) 0%, rgba(254,95,85,1) 50%, rgba(186,95,89,1) 100%);
border-radius: 4px;
}
.count {
margin-top: 0px;
color: #888;
position: absolute;
top: 22px;
}
}
.crumbs {
background: #e4e4e4;
display: flex;
@ -151,11 +208,11 @@ html {
}
#name {
color: @color3;
color: #333;
font-weight: bold;
text-align: center;
font-size: 1.15em;
margin-top: 32px;
margin-top: 0px;
margin-bottom: 16px;
}