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

add icon size to config

This commit is contained in:
zombieFox 2022-05-24 18:47:07 +01:00
parent 369bc67d52
commit 8ce1aea173
3 changed files with 48 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,8 @@ export const Bookmark = function() {
applyCSSVar('--bookmark-panel', config.bookmark.panel);
applyCSSVar('--bookmark-icon-scale', config.bookmark.iconSize);
applyCSSVar('--bookmark-icon-spacing', config.bookmark.iconSpacing);
applyCSSVar('--bookmark-group-spacing', config.bookmark.groupSpacing);

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

@ -3,6 +3,7 @@
.bookmark-link:hover,
.bookmark-link:focus,
.bookmark-link:active {
font-size: calc((var(--bookmark-icon-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%));
@ -32,7 +33,6 @@
}
.bookmark-visual {
font-size: 2em;
min-width: 2em;
min-height: 2em;
display: flex;

85
src/config.js
View File

@ -1,4 +1,45 @@
export const config = {
theme: {
// global scale
scale: 38, // range: min:0|max:100
// accent colours
// not used for much yet, this should be developed as the project grows
// colour defined with HSL: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
accent: { hsl: [204, 100, 72] },
// text colours
// not used for much yet, this should be developed as the project grows
// colour defined with HSL: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
text: { hsl: [0, 0, 0] },
// text font
// works with Google Fonts: https://fonts.google.com/
// enter the full name of a font as it is displayed on Google Fonts
font: 'Ubuntu',
// the speed of the different transitions
transition: { speed: { xfast: 10, fast: 20, medium: 30, slow: 40, xslow: 50 } }, // range: min:0|max:*
// the bounce transition easing bezier curve
easing: { bounce: [0.8, 0.5, 0.2, 2] }, // range: min:0|max:*
bookmark: {
background: {
// bookmark left side panel background blur amount
blur: 14, // range: min:0|max:*
// bookmark left side panel background colour
// colour defined with HSLA: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla
color: { hsla: [200, 180, 25, 0.2] }
}
}
},
bookmark: {
// open the bookmarks in a new tab: true or false
@ -15,6 +56,9 @@ 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:*
// spacing between bookmark icons
iconSpacing: 10, // range: min:0|max:*
@ -107,46 +151,6 @@ export const config = {
},
theme: {
// global scale
scale: 38, // range: min:0|max:100
// accent colours
// not used for much yet, this should be developed as the project grows
// colour defined with HSL: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
accent: { hsl: [204, 100, 72] },
// text colours
// not used for much yet, this should be developed as the project grows
// colour defined with HSL: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
text: { hsl: [0, 0, 0] },
// text font
// works with Google Fonts: https://fonts.google.com/
// enter the full name of a font as it is displayed on Google Fonts
font: 'Ubuntu',
// the speed of the different transitions
transition: { speed: { xfast: 10, fast: 20, medium: 30, slow: 40, xslow: 50 } }, // range: min:0|max:*
// the bounce transition easing bezier curve
easing: { bounce: [0.8, 0.5, 0.2, 2] }, // range: min:0|max:*
bookmark: {
background: {
// bookmark left side panel background blur amount
blur: 14, // range: min:0|max:*
// bookmark left side panel background colour
// colour defined with HSLA: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla
color: { hsla: [200, 180, 25, 0.2] }
}
}
},
background: {
// the background is made of three layers
@ -201,4 +205,5 @@ export const config = {
}
}
};