CSS to show the expand arrows only when hovering the bullets content (not ONLY the arrow itself)

Follow

mlw

• May 02, 2020 13:00

Does any body know the CSS to make the expand arrow show only when I hover over the bullets content. IE. like the plus sign used to.

 

Right now, all  bullets with children show a faint arrow, that grows bolder when I hover over the bullet's content OR the arrow itself.

I'd like to ONLY show the bold arrow, and only when I hover over the line. In other words, I don't want to see the faint arrow, ever. I find it distracting and harmful to the overall legibilty!

In the blog post Pointing the way forward. Or downward. there's some CSS but it only shows the arrows when you hover over the arrows themselves. I want them to show when I hover over the bullet's content i.e. the text line itself.

 

THX 

1

• 

  mlw

  • May 02, 2020 14:32

  For anyone who might care, I figured it out.

  Very simple CSS:

  .expand {
  color: transparent;
  }

  .bullet:hover .expand {
  color: rgb(75, 81, 85);
  }

  1

  Comment actions Permalink
• 

  rawbytz

  • May 02, 2020 17:30

  fwiw, I have this snippet commented out in my CSS file. I imagine it works similar to yours, but should work with dark themes too.

  /* Show expand/collapse arrows only on item hover */
  .name .expand {
    display: none;
  }
  .name:hover .expand {
    display: block;
  }

  0

  Comment actions Permalink
• 

  Frank (Workflowy Support)

  • May 02, 2020 17:54

  Hi Max,

  How about if you disable your CSS styles?... do you still see the fade in of the expand/ collapse arrows?

   

  0

  Comment actions Permalink
• 

  rawbytz

  • May 02, 2020 20:14

  Frank, I think it's only new users that default to always showing expand/collapse arrows (albeit at reduced opacity)... so most (older) accounts won't need this. 

  2

  Comment actions Permalink
• 

  mlw

  • May 03, 2020 12:38
  • Edited

  thanks guys for the prompt reply. My css also works with dark themes.

  I do have and additional feature request.
  The css also hides the bullets in the search/filter results.

  This is inconvenient because it doesn’t show the 45 degrees arrow of parent bullets that contain child bullets that match the search criteria but also contain additional child bullets not shown because they don’t match the search. This is a useful feature that gets lost with the modification.

   

  the 45 degree bullets only show on hover.

  any idea how I might tweak the css to show those?

  0

  Comment actions Permalink
• 

  Frank (Workflowy Support)

  • May 03, 2020 21:59

  Hi Max!

  I will log this for the team to take a look at!

   

  ~ Frank

   

  0

  Comment actions Permalink
• 

  mlw

  • May 07, 2020 14:03

  If anybody is interested, I figured out how to do it.

   

  I just added the CSS selectors for the light themes (both default and vintage) and for the dark theme. Workflowy uses another class when the app is in search mode, so that addind the themes selectors excludes the CSS rule application when in search mode.

   

   /* hides the arrows in light theme (default and vintage, when not in search/filter mode) */
  ._cy0gf4 .expand {   
  color: transparent 
  }
  
  /* hides the arrows in dark theme (when not in search/filter mode) */
  
  ._r3rifr .expand { 
      color: transparent
  }
  
  /* shows the arrows when hovering over the respective bullet's content */
  .bullet:hover .expand {
      color: rgb(75, 81, 85) ;
  }

  1

  Comment actions Permalink

Please sign in to leave a comment.