Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example stylesheet adjustments to fix some common issues #12

Open
ctrlplusb opened this issue Jan 23, 2017 · 4 comments
Open

Example stylesheet adjustments to fix some common issues #12

ctrlplusb opened this issue Jan 23, 2017 · 4 comments

Comments

@ctrlplusb
Copy link

ctrlplusb commented Jan 23, 2017

Hey 😃

I have been putting fixes in my custom stylesheet to help with some common problems I have been experiencing. It helps with #10 and #11

I thought it worth sharing here. I will keep updating it as I find more issues/fixes. Perhaps after a while we could consider patching your plugin with some of these.

/**
 * FIXES FOR APEX-UI-SLIM AND APEX-SYNTAX PLUGINS 
 * Last Updated: 2017/01/23 12:57 UTC+00:00
 */

// Drops the tree-view on left so that the OS X controls aren't overlayed.
atom-panel.tool-panel.panel-left .tree-view-scroller {
  margin-top: 30px;
}

// We dont't want to see the title bar.
atom-panel.panel-header .title-bar {
  visibility: hidden;
}

// Fixes Modals as their widths vary drastically and tend to shift as you
// type input, so preferring a fixed width.
.tree-view-dialog,
.modal.overlay > .select-list {
  width: 80vw;
}

// The highlighted/selected text is too invisible to see.
.command-palette .list-group .character-match {
  color: #000;
}

// Fix the highlighting of items in the tree-view, as the colors change,
// especially with git status it's easier to use an underline to indicate
// the currently selected item.
.tree-view .directory.selected > .header,
.tree-view .list-item.selected {
  color: #212529;
  text-decoration: underline;
}

// Show currently selected item in select lists.
.select-list .list-group li.selected {
  border-left: solid 1px #212529;
}

// We want our wrap guides still. :)
atom-text-editor .wrap-guide, atom-text-editor .wrap-guide {
  background-color: #edecec;
}

// Fixes text highlight on modal popups
.modal atom-text-editor .highlight > .region {
  background: #edecec !important;
}

The above works well with the apex-ui-slim and apex-syntax plugins, along with the atom setting to allow custom titlebars enabled:

screenshot 2017-01-23 09 26 18

@tj
Copy link
Member

tj commented Jan 23, 2017

awesome thanks I'll try and check those out when I have time :D

@ctrlplusb
Copy link
Author

Sure thing, no problem. Still more to be added so no rush.

@tj
Copy link
Member

tj commented Jan 23, 2017

Woot. The main thing that has bugging me is the highlighting in menus needs some more contrast for sure haha.. some day

@jbreuer95
Copy link

Thanks, i added some of these manually :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants