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

Comments

7 comments

  • Avatar
    MAX LIN WORM

    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
  • Avatar
    rawbytz

    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
  • Avatar
    Frank (Workflowy Support)

    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
  • Avatar
    rawbytz

    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
  • Avatar
    MAX LIN WORM

    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
  • Avatar
    Frank (Workflowy Support)

    Hi Max!

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

     

    ~ Frank

     

    0
    Comment actions Permalink
  • Avatar
    MAX LIN WORM

    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.