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

Better visual sync

Browse source
This commit is contained in:
Magnus Åhall 2025-11-29 16:45:56 +01:00
parent 40a68d6ad0
commit d9c82868ab
6 changed files with 130 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

121
static/css/notes2.css
View file

@ -19,14 +19,10 @@ html {
"tree files"
*/
"tree blank"
;
;
grid-template-columns: min-content 1fr;
grid-template-rows:
48px
56px
48px
min-content
1fr;
48px 56px 48px min-content 1fr;
@media only screen and (max-width: 600px) {
@ -41,7 +37,7 @@ html {
"files"
*/
"blank"
;
;
grid-template-columns: 1fr;
#tree {
@ -55,7 +51,8 @@ html {
display: grid;
padding: 16px 0px 16px 16px;
color: #ddd;
z-index: 100; /* Over crumbs shadow */
z-index: 100;
/* Over crumbs shadow */
border-left: 2px solid #333;
&:focus {
@ -90,13 +87,13 @@ html {
display: grid;
grid-template-columns: 24px min-content;
grid-template-rows:
min-content
1fr;
min-content 1fr;
margin-top: 12px;
.expand-toggle {
user-select: none;
img {
width: 16px;
height: 16px;
@ -111,6 +108,7 @@ html {
&:hover {
color: var(--color1);
}
&.selected {
color: var(--color1);
font-weight: bold;
@ -135,7 +133,7 @@ html {
padding: 16px 32px;
background-color: #333;
border-radius: 8px;
box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.75);
box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.75);
}
#crumbs {
@ -158,6 +156,7 @@ html {
&.node-modified {
background-color: var(--color1);
color: var(--color2);
.crumb:after {
color: var(--color2);
}
@ -184,6 +183,7 @@ html {
.crumb:last-child {
margin-right: 0;
}
.crumb:last-child:after {
content: '';
margin-left: 0px;
@ -194,55 +194,64 @@ html {
}
#sync-progress {
--radius: 8px;
grid-area: sync;
display: grid;
justify-items: center;
align-items: center;
width: 100%;
height: 56px;
position: relative;
progress {
width: 100%;
padding: 0 7px;
max-width: 900px;
height: 16px;
border-radius: 4px;
.container {
position: relative;
progress {
width: 900px;
padding: 0 7px;
max-width: 900px;
height: 24px;
border-radius: 8px;
}
.count {
position: absolute;
top: 5px;
width: 100%;
white-space: nowrap;
color: #888;
text-align: center;
font-size: 12pt;
font-weight: bold;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
box-shadow: 0 2px var(--radius) rgba(0, 0, 0, 0.25) inset;
border-radius: var(--radius);
}
progress[value]::-moz-progress-bar {
background-color: #eee;
box-shadow: 0 2px var(--radius) rgba(0, 0, 0, 0.25) inset;
border-radius: var(--radius);
}
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: var(--radius);
}
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: var(--radius);
}
}
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 {
width: min-content;
white-space: nowrap;
margin-top: 0px;
color: #888;
position: absolute;
top: 22px;
}
&.hidden {
visibility: hidden;
@ -270,6 +279,7 @@ html {
grid-area: content;
font-size: 1.0em;
}
.grow-wrap::after {
/* Note the weird space! Needed to preventy jumpy behavior */
content: attr(data-replicated-value) " ";
@ -285,14 +295,16 @@ html {
/* Hidden from view, clicks, and screen readers */
visibility: hidden;
}
.grow-wrap > textarea {
.grow-wrap>textarea {
/* You could leave this, but after a user resizes, then it ruins the auto sizing */
resize: none;
/* Firefox shows scrollbar on growth, you can hide like this. */
overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap>textarea,
.grow-wrap::after {
/* Identical styling required!! */
padding: 0.5rem;
@ -301,6 +313,7 @@ html {
/* Place on top of each other */
grid-area: 1 / 1 / 2 / 2;
}
/* ============================================================= */
#node-content {
@ -329,7 +342,7 @@ dialog.op {
&::backdrop {
background: rgba(0, 0, 0, 0.5);
}
.header {
font-weight: bold;
margin-top: 16px;