SetiUi theme issues


#1

I’m not sure if it’s SetiUi or something else. I tried other themes, and couldn’t seem to reproduce this issue.

There is a weird gap between the tabs and the page. I’ve attached a screenshot of what I mean.

Yeti



Seti (the one with the issue)

I’m on Atom v0.136.0 on Linux Mint 17.


#2

It would appear that’s the gap where the blue “current tab” indicator goes. The gap is there in the Yeti UI theme also, it is just blended in with the color of the inactive tabs.


#3

I’ve been messing around with Atom all day–I finally got it back to working order, and I seriously don’t remember there being that defined of a gap. Does yours have it also?


#4

I don’t use SetI or Yeti UI … but yes, there is a gap of sorts in Soda Light UI (the UI theme I’m currently using):


#5

The gap isn’t that large on the Yeti and your Soda Light UI. Notice in my screenshot, how the tabs “ArrayListPrac.java” and “BalletTicket.java” have the large gap. Yeti doesn’t do that, and neither does yours.


#6

If you think it is a bug, have you reported it on the Seti UI repository?


#7

Given that I have updated Atom, and then this appeared, I don’t think it’s the theme–however, even if I did report it, the dev doesn’t seem to be active anymore.

Would you have any clue how to go about fixing this?


#8

As I’ve admitted here before, I’m not a CSS expert. Maybe @abe or @mark_hahn can help?


#9

It’s not a gap. The css selector .tab-bar .tab.active and .tab-bar .tab.active:before have border-bottom: solid 4px #4f99d3 specified. So the tab itself has the blue bottom.

I’ve never worked with themes but I’d guess the theme has that css specified. In other words it’s part of the theme to make the selected tab obvious.

I just tried adding the text below to my ~/.atom/styles.less file and I can see it change from blue to red. You can do the same for whatever you want it to be. Make it black to disappear.

.tab-bar .tab.active, .tab-bar .tab.active:before {
  border-bottom: 4px solid red;
}

This will change any and all themes you use. I don’t know how to change just the theme itself although I should probably learn.


#10

Good stuff. I appreciate it. I’ll use this and see if I can’t fix it in the theme itself. :slight_smile:


#11

The workspace has the names of the UI theme and syntax theme as classes. So if you want it to just be specified for a particular theme, you can do this:

.seti-ui {
  .tab-bar .tab.active, .tab-bar .tab.active:before {
    border-bottom: 4px solid red;
  }
}

#12

The .less change works–it changes the colors fine. No way to close that gap, though.


#13

remove height:auto; from

.list-inline.tab-bar.inset-panel

#14

You da man. I really appreciate it! :smiley: