Fix term background and scrollbar

This commit is contained in:
CHaBou 2017-09-04 21:42:43 +02:00
parent 944f9d7e89
commit 52bb0d9b3d
No known key found for this signature in database
GPG key ID: EF8D073B729A0B33
2 changed files with 17 additions and 6 deletions

View file

@ -9,7 +9,7 @@ export default class StyleSheet extends React.PureComponent {
fontFamily, fontFamily,
fontSmoothing, fontSmoothing,
foregroundColor, foregroundColor,
backgroundColor borderColor
} = this.props } = this.props
return ( return (
@ -17,10 +17,10 @@ export default class StyleSheet extends React.PureComponent {
__html: ` __html: `
.terminal { .terminal {
${foregroundColor ? `color: ${foregroundColor};` : ''} ${foregroundColor ? `color: ${foregroundColor};` : ''}
${backgroundColor ? `background-color: ${backgroundColor};` : ''}
${fontFamily ? `font-family: ${fontFamily};` : ''} ${fontFamily ? `font-family: ${fontFamily};` : ''}
${fontSize ? `font-size: ${fontSize}px;` : ''} ${fontSize ? `font-size: ${fontSize}px;` : ''}
${fontSmoothing ? `-webkit-font-smoothing: ${fontSmoothing};` : ''} ${fontSmoothing ? `-webkit-font-smoothing: ${fontSmoothing};` : ''}
background: transparent;
font-feature-settings: "liga" 0; font-feature-settings: "liga" 0;
position: relative; position: relative;
user-select: none; user-select: none;
@ -121,7 +121,7 @@ export default class StyleSheet extends React.PureComponent {
} }
.terminal .composition-view { .terminal .composition-view {
background: #000; background: transparent;
color: #FFF; color: #FFF;
display: none; display: none;
position: absolute; position: absolute;
@ -134,8 +134,7 @@ export default class StyleSheet extends React.PureComponent {
} }
.terminal .xterm-viewport { .terminal .xterm-viewport {
/* On OS X this is required in order for the scroll bar to appear fully opaque */ background: transparent;
background-color: #000;
overflow-y: scroll; overflow-y: scroll;
} }
@ -2247,6 +2246,18 @@ export default class StyleSheet extends React.PureComponent {
background-color: #eeeeee; background-color: #eeeeee;
} }
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: ${borderColor};
}
::-webkit-scrollbar-thumb:window-inactive {
background: ${borderColor};
}
${customCSS} ${customCSS}
` `
}} /> }} />

View file

@ -126,7 +126,7 @@ export default class Terms extends Component {
fontFamily={this.props.fontFamily} fontFamily={this.props.fontFamily}
fontSmoothing={this.props.fontSmoothing} fontSmoothing={this.props.fontSmoothing}
foregroundColor={this.props.foregroundColor} foregroundColor={this.props.foregroundColor}
backgroundColor={this.props.backgroundColor} borderColor={this.props.borderColor}
/> />
</div>); </div>);
} }