Remove webkit button shadow

  • Resolved eric3d

    (@eric3d)


    3 years, 7 months ago

    The default webkit button CSS makes the left-right arrows and close button look rather ugly. I added the following CSS to my theme, but you may want to include it in the plugin.

    button.pswp__button {
	box-shadow: none;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Arno Welzel

    (@awelzel)

    So far I am not aware of any box shadow added to buttons by default in Webkit. Are you sure that this comes from webkit and not your theme?

    The styles of Lightbox with Photobox already include removing box shadows, but this only works if the theme or other plugins don’t overwrite the global button rule (which is very bad anyway and not only a problem for Lightbox with Photoswipe):

    .pswp__button {
  width: 44px;
  height: 44px;
  position: relative;
  background-color: #00000000 !important;
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  float: right;
  opacity: 0.75;
  -webkit-transition: opacity 0.2s;
          transition: opacity 0.2s;
  -webkit-box-shadow: none;
          box-shadow: none;
  min-width: 0;  }

    So if you still have box shadows, then your theme or any of the other plugins must have some global style like this:

    button {
  box-shadow: ...
}

    Anyway – I will add some rules to make sure that the buttons will be display properly even if a another theme or plugin has too lazy rules which will affect everything else as well and not only its own elements.

    Thread Starter eric3d

    (@eric3d)

    You’re correct, it came from somewhere else in the theme. Thanks for looking into it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Remove webkit button shadow’ is closed to new replies.

Tags