Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-01-22 18:30:09 +00:00
Code Issues Projects Releases Wiki Activity

style: enhance sync button icon visibility and positioning

Browse source
This commit is contained in:
Johannes Millan 2026-01-22 17:30:27 +01:00
parent a0fdc2efee
commit a8da38d840
1 changed files with 39 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/app/core-ui/main-header/main-header.component.scss
View file

@ -322,12 +322,47 @@ page-title {
border-radius: 12px;
}
.sync-btn {
position: relative;
.mat-icon:not(.sync-state-ico) {
font-size: 28px;
width: 28px;
height: 28px;
line-height: 28px;
}
}
.sync-state-ico {
// important because it might be overwritten by material styles sometimes
// Positioning - center within sync button
position: absolute !important;
font-size: 10px;
height: 10px;
line-height: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// Icon sizing (increased from 10px to 18px)
font-size: 15px;
width: 15px;
height: 15px;
line-height: 15px;
// Colored outline using multiple text-shadows for better visibility
text-shadow:
-1px -1px 0 var(--c-bg),
1px -1px 0 var(--c-bg),
-1px 1px 0 var(--c-bg),
1px 1px 0 var(--c-bg),
-2px -2px 0 var(--c-bg),
2px -2px 0 var(--c-bg),
-2px 2px 0 var(--c-bg),
2px 2px 0 var(--c-bg),
0 -2px 0 var(--c-bg),
0 2px 0 var(--c-bg),
-2px 0 0 var(--c-bg),
2px 0 0 var(--c-bg);
// Ensure it sits above sync icon
z-index: 1;
}
.focus-btn-wrapper {