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

54
static/css/notes2.css
View file

@ -4,12 +4,12 @@ html {
#notes2 {
min-height: 100vh;
display: grid;
grid-template-areas: "tree crumbs" "tree name" "tree content" "tree blank";
grid-template-areas: "tree crumbs" "tree sync" "tree name" "tree content" "tree blank";
grid-template-columns: min-content 1fr;
}
@media only screen and (max-width: 600px) {
#notes2 {
grid-template-areas: "crumbs" "name" "content" "blank";
grid-template-areas: "crumbs" "sync" "name" "content" "blank";
grid-template-columns: 1fr;
}
#notes2 #tree {
@ -75,6 +75,52 @@ html {
justify-items: center;
margin: 16px;
}
#sync-progress {
grid-area: sync;
display: grid;
justify-items: center;
justify-self: center;
width: 100%;
max-width: 900px;
height: 56px;
position: relative;
}
#sync-progress.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 500ms, opacity 500ms linear;
}
#sync-progress progress {
width: calc(100% - 16px);
height: 16px;
border-radius: 4px;
}
#sync-progress progress[value]::-webkit-progress-bar {
background-color: #eee;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset;
border-radius: 4px;
}
#sync-progress progress[value]::-moz-progress-bar {
background-color: #eee;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset;
border-radius: 4px;
}
#sync-progress progress[value]::-webkit-progress-value {
background: #ba5f59;
background: linear-gradient(180deg, #ba5f59 0%, #fe5f55 50%, #ba5f59 100%);
border-radius: 4px;
}
#sync-progress progress[value]::-moz-progress-value {
background: #ba5f59;
background: linear-gradient(180deg, #ba5f59 0%, #fe5f55 50%, #ba5f59 100%);
border-radius: 4px;
}
#sync-progress .count {
margin-top: 0px;
color: #888;
position: absolute;
top: 22px;
}
.crumbs {
display: flex;
flex-wrap: wrap;
@ -109,11 +155,11 @@ html {
margin-left: 0px;
}
#name {
color: #666;
color: #333;
font-weight: bold;
text-align: center;
font-size: 1.15em;
margin-top: 32px;
margin-top: 0px;
margin-bottom: 16px;
}
/* ============================================================= *