extras
/
voltTab
mirror of https://github.com/zombieFox/voltTab.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add bookmark icon scale to config

This commit is contained in:
zombieFox 2022-05-28 11:35:46 +01:00
parent 068634edad
commit 6a2cd3a925
3 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/component/Bookmark/index.js
View File

@ -17,7 +17,15 @@ export const Bookmark = function() {
applyCSSVar('--bookmark-panel', config.bookmark.panel);
applyCSSVar('--bookmark-icon-scale', config.bookmark.iconSize);
applyCSSVar('--bookmark-scale', config.bookmark.scale);
applyCSSVar('--bookmark-icon-scale-visible', config.bookmark.iconScaleVisible);
applyCSSVar('--bookmark-icon-scale-hidden', config.bookmark.iconScaleHidden);
applyCSSVar('--bookmark-icon-scale-hover', config.bookmark.iconScaleHover);
applyCSSVar('--bookmark-icon-scale-active', config.bookmark.iconScaleActive);
applyCSSVar('--bookmark-icon-spacing', config.bookmark.iconSpacing);
@ -95,4 +103,4 @@ export const Bookmark = function() {
}
}
}

10
src/component/BookmarkLink/index.css
View File

@ -3,18 +3,18 @@
.bookmark-link:hover,
.bookmark-link:focus,
.bookmark-link:active {
font-size: calc((var(--bookmark-icon-scale) / 10) * 1em);
font-size: calc((var(--bookmark-scale) / 10) * 1em);
color: hsl(var(--bookmark-group-color-primary-hsl-h),
calc(var(--bookmark-group-color-primary-hsl-s) * 1%),
calc(var(--bookmark-group-color-primary-hsl-l) * 1%));
text-decoration: none;
transform: scale(0);
transform: scale(var(--bookmark-icon-scale-hidden));
transition: transform var(--theme-transition-medium-ease) calc(var(--bookmark-link-delay) * 1s);
}
.bookmark-group-item:focus-within .bookmark-link,
.bookmark-group-active .bookmark-link {
transform: scale(1);
transform: scale(var(--bookmark-icon-scale-visible));
transition: transform var(--theme-transition-slow-bounce) 0s;
}
@ -22,13 +22,13 @@
.bookmark-group-item:focus-within .bookmark-link:focus,
.bookmark-group-active .bookmark-link:hover,
.bookmark-group-active .bookmark-link:focus {
transform: scale(1.4);
transform: scale(var(--bookmark-icon-scale-hover));
transition: transform var(--theme-transition-fast-bounce);
}
.bookmark-group-item:focus-within .bookmark-link:active,
.bookmark-group-active .bookmark-link:active {
transform: scale(1);
transform: scale(var(--bookmark-icon-scale-active));
transition: transform var(--theme-transition-fast-bounce);
}

21
src/config.js
View File

@ -56,10 +56,23 @@ export const config = {
// this area contains bookmark group name, description and open all button
panel: 35, // range: min:0|max:100
// bookmark icon size
iconSize: 20, // range: min:0|max:*
// bookmark size
scale: 20, // range: min:0|max:*
// spacing between bookmark icons
// bookmark icon size the bookmark group is in focus
iconScaleVisible: 1, // range: min:*|max:*
// bookmark icon size when the bookmark group is not in focus
// if alwaysVisible is set to true this setting will not have an effect
iconScaleHidden: 0, // range: min:*|max:*
// bookmark icon size when the bookmark icon is hovered (:hover)
iconScaleHover: 1.4, // range: min:*|max:*
// bookmark icon size when the bookmark icon is clicked (:active)
iconScaleActive: 1, // range: min:*|max:*
// spacing between bookmarks
iconSpacing: 10, // range: min:0|max:*
// spacing between bookmark group rows
@ -206,4 +219,4 @@ export const config = {
}
};
};