Hyper: Font Opacity on 2.0 does not work in the same way?

[iamthemovie]

• [X] I am on the latest Hyper.app version
• [X] I have searched the issues of this repo and believe that this is not a duplicate

• OS version and name: Windows 10 x64 (Redstone 3)
• Hyper.app version: 2.0
• Link of a Gist with the contents of your .hyper.js: https://gist.github.com/iamthemovie/71c924d36400df5d582f93adbf87d104
• Relevant information from devtools _(CMD+ALT+I on macOS, CTRL+SHIFT+I elsewhere)_:
• The issue is reproducible in vanilla Hyper.app: Using the hyper-material-box and hyperlinks.

Issue

Just updated to 2.0 and it looks like the font opacity is stuck. I was running the latest of 1.X hyper and this was working fine but literally just updated and my font is no longer the correct opacity. I realise this plugin maybe at fault but since it worked on 1.X and now has issues on 2.X I wondered if anyone could point in the direction where this problem might stem from?

1.0 (Nice and lovely)

2.0 (Still nice, not as easy to love)

Edit: The colours look darker between versions on this also https://github.com/zeit/hyper/issues/2821

[chabou]

Yes default colors has been changed: https://github.com/zeit/hyper/pull/2670
We are now using iTerm2 defautls and it permits usage of bright colors.

You can restore previous color scheme by setting in your config, old color scheme:

    colors: {
      black: '#000000',
      red: '#ff0000',
      green: '#33ff00',
      yellow: '#ffff00',
      blue: '#0066ff',
      magenta: '#cc00ff',
      cyan: '#00ffff',
      white: '#d0d0d0',
      lightBlack: '#808080',
      lightRed: '#ff0000',
      lightGreen: '#33ff00',
      lightYellow: '#ffff00',
      lightBlue: '#0066ff',
      lightMagenta: '#cc00ff',
      lightCyan: '#00ffff',
      lightWhite: '#ffffff'
  }

[Astrophizz]

Even themes look dimmer than they did in 1.x. It's not just a matter of the default color scheme changing.

[iamthemovie]

Totally agree, this didn’t fix anything for me.
On Tue, 17 Apr 2018 at 16:46, Dillon [e-mail] wrote:

Even themes look dimmer than they did in 1.x. It's not just a matter of
the default color scheme changing.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/zeit/hyper/issues/2827#issuecomment-382041652, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAWhfCjCkmpyj_rLu6ThsNxbppAVX-g4ks5tpg5ygaJpZM4TW3Ih
.

[mashaal]

I am experiencing the same issue -- it seems the culprit is a line of css is setting my active window to .5 opacity. I've disabled all of my plugins and issue still persists.

#hyper .term_fit:not(.term_term) {
  opacity: .5
}

[mashaal]

Not great, but this will fix it for the time being.

In the config css...

// custom css to embed in the main window
    css: `
      .term_fit:not(.term_term) {
        opacity: 1 !important
      }
    `,

[iamthemovie]

@mashaal does this that take into account active pane? For instance if you split then before 2.0 the opacity would be 0.6 on the non-active window (which is super useful). I know it's a temporary fix, I'm just putting this comment for the guys at zeit's benefit 😄

[mashaal]

@iamthemovie i saw on a higher up node there was an active class with an opacity set -- not totally sure what the term_fit opacity is meant to be controlling. I feel like this may be an issue with conflicting css -- please see gif below -- in the inspector it shows the css line being overridden, but the .5 opacity is still being rendered regardless?

[danielcorin]

Admittedly a hacky fix as I haven't done my due diligence on the use of these class selectors in the css but the following works for me on macOS, Hyper 2.0.0 (stable):

css: `
  .terminal:not(.focus) {
    opacity: 0.6;
  }
  .terminal.focus {
    opacity: 1;
  }`,

[pvorona]

For some reason in my hyper this css is in style tag (I've changed 0.6 to 1 but still WTF? why is it here?):

[chabou]

I added inactive pane dimming in hyper-pane plugin recently.
CSS class selection should be done carefully. Please see:
https://github.com/chabou/hyper-pane/commit/75aba86318259c8df00d9ba0713b4e2de9ba9a80

[ahmadawais]

I'm using this to debug this issue.

// Custom css to embed in the main window.
    css: `
      .term_fit:not(.term_term) {
        opacity: 1 !important
      }
      .terminal: not(.focus) {
        opacity: 1;
        }
      .terminal.focus {
        opacity: 1;
      }
    `,