Css settings/change font of bookmark groups

tuber84 commented 1 year ago

How can I change the font of bookmark groups and change the shadow of bookmarks? There is an item in the settings: css, where can I find out about this feature?

Juraj-Masiar commented 1 year ago

Hello, See the Options page / Dials tab. There is many options, including disabling shadow (try also "Transparent dial name" option). There you can change font size, but not the font family (I guess I could implement that). But if you know some CSS, you can customize font and other properties in the General tab / "Custom CSS styles". I could also help you write some CSS if you need some simple change.

tuber84 commented 1 year ago

Thank you for quick answer.

I saw the shadow option, I would like to change it (using the same css).
The ability to change the font, for example to a system one, would be extremely useful, I would be grateful for it.
I think many people know the basics of css/html and a few examples of modification using css would be useful (it is not yet absolutely clear where and what classes there are and what layout we have and therefore how to change it all (the same font, shadows for example)).

Juraj-Masiar commented 1 year ago

Hmm, it may be a good idea to write some manual that would explain or show some examples for the popular CSS changes.

The only issue is that sometimes I change internal structure of the HTML which breaks custom CSS styles. I don't do it often but sometimes it's unavoidable (a lot of my code was written years ago by less experienced developer - me :)).

I'll see what I can do!

In the meantime: Global font family can be changed using:

body {
  font-family: system-ui;
}

this will change most of the font to system font

Shadows are mostly defined in the variables, so you only need to change the variable value to alter the shadow (this is good because even if layout changes, variable names will stay the same).

:root {
  --shadow-color-theme: var(--border-light-1);
  --shadow-hover-color-theme: var(--border-light-5);
  --shadow-theme:         0 0 10px 0 var(--shadow-color-theme);
  --shadow-hover-theme:   0 0 10px 1px var(--shadow-hover-color-theme);
}
.white {
  --shadow-color-theme: var(--border-light-2);
  --shadow-hover-color-theme: var(--border);
  --shadow-theme:         0 0 10px 0 var(--border-light-2);
  --shadow-hover-theme:   0 0 10px 1px var(--border);
}

as you can see, there are different shadow values for the default dark theme (in the first block) and white theme Shadow values are then used in box-shadow CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

fastaddons / GroupSpeedDial

Css settings/change font of bookmark groups #281