logseq-panic-theme icon indicating copy to clipboard operation
logseq-panic-theme copied to clipboard

FR: make menus more readable

Open benwittorf opened this issue 3 years ago • 6 comments

First off—I love this theme. Thank you so much for it! I wouldn't have thought that "something like this" would become my daily driver, but there you go.

Only the menus could be a bit more "readable", as in:

  1. have a border, a drop shadow, or a darker or lighter background color so they're easily distinguishable from what's underneath
  2. have the same bright text color on mouse hover as when selected using the keyboard

Thank you so much again!

Screen Shot 2021-12-22 at 12 26 38 Screen Shot 2021-12-22 at 12 28 00

benwittorf avatar Dec 22 '21 11:12 benwittorf

Brilliant suggestion! This theme is still work in progress so thank you for coming up with improvements. I will submit an update by end January, just got caught in the holiday season.

kirso avatar Dec 28 '21 07:12 kirso

Made a quick fix to the menu color for now. It is a bit hard to target it because it influences other elements and there is no menu class or selector as of now. Will keep this in mind and will try to rework in the future. Also see the discussion here: https://discord.com/channels/725182569297215569/752845138148982877/927081452993146882

kirso avatar Jan 02 '22 11:01 kirso

Thanks for the follow-up!

benwittorf avatar Jan 02 '22 11:01 benwittorf

As a quick fix for the time being I updated my css with:

#custom-context-menu,
.dropdown-wrapper,
.tippy-tooltip,
.ui__modal-panel,
.absolute-modal,
.modal {
	box-shadow: 0px 0px 24px 4px var(--color-level-1);
}

.tippy-tooltip .arrow-regular {
	display: none;
}

#head>div.r.flex>div>div.dropdown-wrapper>div>a:hover,
.cp__palette-main .chosen,
.menu-link:hover,
.timestamp-label+a:hover,
.marker-switch:hover {
	background-color: var(--ls-tertiary-background-color);
	color: var(--ls-primary-text-color);
	cursor: pointer !important;
}

.cp__palette-main .chosen>div.chosen {
	background-color: transparent;
}

So that all menus have a shadow, and mouse hover text colors on menus work as intended.

benwittorf avatar Jan 02 '22 14:01 benwittorf

I fixed this for myself with

a.chosen { background: var(--lighter-background); }

Currently --ls-a-chosen-bg maps to --light-background which to my eye is only barely visible on the dark background.

ThomPatterson avatar Mar 30 '23 16:03 ThomPatterson

@ThomPatterson mind submitting a PR? I am happy to merge, just struggling with time in the past two months. I know I need to refresh the theme :)

kirso avatar Mar 31 '23 00:03 kirso