mingzailao
/
silverbullet
mirror of https://github.com/silverbulletmd/silverbullet.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Few dark mode fixes and top bar improvements (#1137) 

* fix: Fix progress bar coloring and remove % on indicator

Fixes #1129

* fix: Improve header, action buttons and progress bar spacing

* fix: Fix caret color on sb-mini-editor
pull/1145/head
Mufeed Ali 2024-11-08 01:58:14 +05:30 committed by GitHub
parent d9d3868d9e
commit c52e9e71f0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/top_bar.tsx
View File

@ -104,12 +104,12 @@ export function TopBar({
<div className="sb-actions"> <div className="sb-actions">
{progressPerc !== undefined && {progressPerc !== undefined &&
( (
<div className="progress-wrapper" title={`${progressPerc}%`}> <div className="progress-wrapper" title={`Sync Progress: ${progressPerc}%`}>
<div <div
className="progress-bar" className="progress-bar"
style={`background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#282828 ${progressPerc}%, #adadad 0);`} style={`background: radial-gradient(closest-side, var(--top-background-color) 79%, transparent 80% 100%), conic-gradient(var(--button-color) ${progressPerc}%, var(--button-background-color) 0);`}
> >
{progressPerc}% {progressPerc}
</div> </div>
</div> </div>
)} )}

5
web/styles/colors.scss
View File

@ -73,8 +73,11 @@
} }
.sb-actions button { .sb-actions button {
width: 28px;
height: 28px;
border: 0; border: 0;
margin: 3px; margin: 2px;
margin-top: 6px;
padding: 5px; padding: 5px;
background-color: var(--action-button-background-color); background-color: var(--action-button-background-color);
color: var(--action-button-color); color: var(--action-button-color);

17
web/styles/main.scss
View File

@ -65,7 +65,7 @@ body {
max-width: var(--#{"editor-width"}); max-width: var(--#{"editor-width"});
margin: auto; margin: auto;
font-size: 28px; font-size: 28px;
padding: 10px 0; padding: 8px 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -112,6 +112,7 @@ body {
.cm-line { .cm-line {
padding: 0; padding: 0;
caret-color: var(--editor-caret-color);
} }
} }
} }
@ -119,7 +120,6 @@ body {
.sb-actions { .sb-actions {
display: flex; display: flex;
align-items: baseline;
flex: 0 0 auto; flex: 0 0 auto;
text-align: right; text-align: right;
} }
@ -127,10 +127,9 @@ body {
.progress-wrapper { .progress-wrapper {
display: inline-block; display: inline-block;
position: relative; position: relative;
top: -6px; margin-top: 4px;
padding: 4px; padding: 4px;
background-color: var(--top-background-color); background-color: var(--top-background-color);
margin-right: -2px;
} }
.progress-bar { .progress-bar {
@ -138,15 +137,11 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 20px; width: 24px;
height: 20px; height: 24px;
border-radius: 50%; border-radius: 50%;
font-size: 6px; font-size: 8px;
} }
// .progress-bar::before {
// content: "66%";
// }
} }
.sb-panel { .sb-panel {