Linux MATE draggin tab has a white background about atom-dark-ui HOT 14 CLOSED

/cc @simurai

from atom-dark-ui.

It happens in Manjaro i3wm, and everywhere I have tried it.

from atom-dark-ui.

@freed00m It looks like when dragging, transparency is not supported and it uses a default white background. What happens if you switch to another theme that has rounded corners? Do you still see them white?

For the Atom dark theme, you could try to add the following to your styles.less file:

.tab-bar .tab.is-dragging {
  box-shadow: none;
  padding: 0 10px;
  &::before,
  &::after,
  .close-icon {
    display: none;
  }
}

It basically just makes the tabs square so there is no transparency needed while dragging.

from atom-dark-ui.

@simurai I have the same issue

• xfce desktop manager

from atom-dark-ui.

Ok, looks like it's not related to a theme.

What happens if you open this page http://www.html5rocks.com/en/tutorials/dnd/basics/ in Chrome, and then drag those boxes around, do you also see the white background?

If it's a dragging/rendering issue in general, then the only thing I can think of is trying to make the tabs a rectangle without any shadows or rounded corners, then there might not be any white visible.

from atom-dark-ui.

@simurai yep, the same happens with that demo, I can see the white borders.

from atom-dark-ui.

@peduxe yep, the same happens with that demo, I can see the white borders.

Thanks for testing. Ok, I guess we have to wait till it gets fixed in Chromium.

In the meantime, here something to paste in your styles.less file that makes the tabs of Atom dark to be square and hopefully not show any white:

// make tabs square to avoid white background while dargging
.theme-atom-dark-ui .tab-bar .tab {
  padding: 0 10px;
  margin: 0;
  border-radius: 0;
  background-color: #333;
  box-shadow: none;
  &::before,
  &::after {
    display: none;
  }
  .close-icon {
    margin-right: 10px;
  }
  &.active {
    box-shadow: none;
  }
}

from atom-dark-ui.

@simurai
Did solve for the sides but not the top:

from atom-dark-ui.

@peduxe Looks like that's the One dark theme? Maybe just try to remove the rounded corners:

// make tabs square to avoid white background while dragging
.theme-one-dark-ui .tab-bar .tab {
  &::before,
  &::after,
  &.active {
    border-radius: 0;
  }
}

from atom-dark-ui.

Now top and left of the tab got white borders.

from atom-dark-ui.

What about something as radical as:

.theme-one-dark-ui .tab-bar .tab {
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: #000 !important;
  box-shadow: none;
  &::before,
  &::after {
    display: none;
  }
  &.active {
    border-radius: 0;
    background: #333 !important;
    & + .tab {
      border: none;
    }
  }
  .title {
    background: none !important;
    -webkit-mask: none;
  }
  .close-icon {
    display: none;
  }
}

from atom-dark-ui.

Too radical hehe

from atom-dark-ui.

Ok, maybe I should stop guessing and try to reproduce it. 😜

from atom-dark-ui.

ok, this should work for One dark:

.theme-one-dark-ui .tab-bar .tab.is-dragging {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: black !important;
  box-shadow: none !important;

  .title {
    -webkit-mask: none !important;
    background: none !important;
    bottom: 0 !important;
  }

  &::before,
  &::after,
  .close-icon {
    display: none;
  }
}

and Atom dark"

.theme-atom-dark-ui .tab-bar .tab.is-dragging {
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: black !important;
  box-shadow: none !important;

  .title {
    padding-left: 10px;
  }

  &::before,
  &::after,
  .close-icon {
    display: none;
  }
}

It just replaces the dragging tab with a black saquare. Hopefully one day transparency will be supported when dragging.

from atom-dark-ui.