@arcblock/terminal 3.1.17 → 3.1.18

package/src/styles.js

@@ -3,158 +3,9 @@ import styled from '@emotion/styled';
 // Terminal Player Root with camelCase styles
 export const PlayerRoot = styled.div({
   // Base styles for .terminal-player
-  display: 'inline-block',
+  display: 'block',
   position: 'relative',
-  fontSize: 0,
-
-  // Terminal styles
-  '& .terminal': { display: 'inline-block' },
-
-  '& .terminal .xterm .xterm-viewport': { overflowY: 'hidden !important' },
-
-  // Terminal frame
-  '& .terminal-frame': { position: 'relative' },
-
-  // Reset styles for terminal divs
-  '& .terminal div': {
-    margin: 0,
-    padding: 0,
-    border: 0,
-    outline: 0,
-    fontWeight: 'inherit',
-    fontStyle: 'inherit',
-    fontSize: '100%',
-    verticalAlign: 'baseline',
-  },
-
-  // Window theme
-  '&.terminal-window .terminal-frame': {
-    borderRadius: 6,
-    border: '1px solid #b3b3b3',
-    boxShadow: '0px 0px 18px #b3b3b3',
-    margin: 18,
-    overflow: 'hidden',
-
-    '& .terminal-titlebar': {
-      background: '#e8e8e8',
-      borderBottom: '1px solid #b1aeb1',
-      borderTop: '1px solid #f3f1f3',
-      borderTopLeftRadius: 6,
-      borderTopRightRadius: 6,
-      color: '#3b4247',
-      fontSize: 14,
-      height: 22,
-      lineHeight: '22px',
-      position: 'relative',
-      textAlign: 'center',
-      width: '100%',
-
-      '& .buttons': { left: 8, lineHeight: '0px', position: 'absolute', top: 3.5 },
-
-      '& .close-button': {
-        background: '#ff5c5c',
-        borderRadius: '50%',
-        border: '1px solid #e33e41',
-        display: 'inline-block',
-        height: 12,
-        width: 12,
-      },
-
-      '& .minimize-button': {
-        background: '#ffbd4c',
-        borderRadius: '50%',
-        border: '1px solid #e09e3e',
-        display: 'inline-block',
-        height: 12,
-        marginLeft: 4,
-        width: 12,
-      },
-
-      '& .maximize-button': {
-        background: '#00ca56',
-        borderRadius: '50%',
-        border: '1px solid #14ae46',
-        display: 'inline-block',
-        height: 12,
-        marginLeft: 4,
-        width: 12,
-      },
-    },
-
-    '& .terminal-body': { backgroundColor: '#1d1d1d', padding: 10 },
-  },
-
-  // Floating theme
-  '&.terminal-floating .terminal-frame': {
-    backgroundColor: '#1d1d1d',
-    borderRadius: 6,
-    boxShadow: '0px 0px 18px #b3b3b3',
-    margin: 18,
-    overflow: 'hidden',
-
-    '& .terminal-titlebar': {
-      color: 'white',
-      fontSize: 14,
-      height: 34,
-      lineHeight: '34px',
-      position: 'relative',
-      textAlign: 'center',
-      width: '100%',
-
-      '& .buttons': { left: 13, lineHeight: '0px', position: 'absolute', top: 9 },
-
-      '& .close-button': { background: '#ff5c5c', borderRadius: '50%', display: 'inline-block', height: 15, width: 15 },
-
-      '& .minimize-button': {
-        background: '#ffbd4c',
-        borderRadius: '50%',
-        display: 'inline-block',
-        height: 15,
-        lineHeight: '10px',
-        marginLeft: 4,
-        width: 15,
-      },
-
-      '& .maximize-button': {
-        background: '#00ca56',
-        borderRadius: '50%',
-        display: 'inline-block',
-        height: 15,
-        lineHeight: '10px',
-        marginLeft: 4,
-        width: 15,
-      },
-    },
-
-    '& .terminal-body': { padding: 20 },
-  },
-
-  // Solid theme
-  '&.terminal-solid .terminal-frame': {
-    backgroundColor: '#1d1d1d',
-    borderRadius: 6,
-    boxShadow: '0px 0px 18px #b3b3b3',
-    margin: 18,
-    overflow: 'hidden',
-
-    '& .terminal-titlebar': {
-      color: 'white',
-      fontSize: 14,
-      position: 'relative',
-      textAlign: 'center',
-      width: '100%',
-
-      '& .title': {
-        margin: '15px 15px 15px',
-
-        '&:empty': { display: 'none' },
-      },
-
-      '& .buttons': { display: 'none' },
-    },
-
-    '& .terminal-body': { padding: 20 },
-  },
+  overflow: 'hidden',
 
   // Player controls
   '& .controller': {
@@ -236,16 +87,22 @@ export const PlayerRoot = styled.div({
   '& .start svg': {
     cursor: 'pointer',
     fill: '#eaeaea',
-    height: 130,
+    width: 100,
+    height: 100,
     left: '50%',
     marginLeft: -65,
     marginTop: -65,
     position: 'absolute',
     top: '50%',
-    width: 130,
+
     zIndex: 20,
     filter: 'drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4))',
     WebkitFilter: 'drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4))',
+    opacity: 0.6,
+    '&:hover': {
+      opacity: 0.8,
+      transition: 'all 0.3s ease',
+    },
   },
 
   '&.small .start svg': { height: 60, marginLeft: -30, marginTop: -30, width: 60 },
@@ -258,8 +115,6 @@ export const PlayerRoot = styled.div({
     MsTransform: 'translate(0px, 8px)',
   },
 
-  '& .cover:hover + .start svg, & .start:hover svg': { fill: 'white' },
-
   '&.started .cover, &.started .start': { display: 'none' },
 
   '& .terminal-watermark': { zIndex: 99999 },
@@ -267,27 +122,31 @@ export const PlayerRoot = styled.div({
 
 // Terminal Root with camelCase xterm styles
 export const TerminalRoot = styled.div({
-  // Xterm base styles
+  // Base xterm styles
   '& .xterm': {
-    fontFeatureSettings: "'liga' 0",
+    cursor: 'text',
     position: 'relative',
     userSelect: 'none',
-    MsUserSelect: 'none',
-    WebkitUserSelect: 'none',
-    cursor: 'text',
-
-    '&.focus, &:focus': { outline: 'none' },
-
-    '&.enable-mouse-events': { cursor: 'default' },
-
-    '&.xterm-cursor-pointer': { cursor: 'pointer' },
+    msUserSelect: 'none',
+    webkitUserSelect: 'none',
+  },
 
-    '&.column-select.focus': { cursor: 'crosshair' },
+  '& .xterm.focus, & .xterm:focus': {
+    outline: 'none',
   },
 
-  '& .xterm .xterm-helpers': { position: 'absolute', top: 0, zIndex: 5 },
+  '& .xterm .xterm-helpers': {
+    position: 'absolute',
+    top: 0,
+    // The z-index of the helpers must be higher than the canvases in order for IMEs to appear on top
+    zIndex: 5,
+  },
 
   '& .xterm .xterm-helper-textarea': {
+    padding: 0,
+    border: 0,
+    margin: 0,
+    // Move textarea out of the screen to the far left, so that the cursor is not visible
     position: 'absolute',
     opacity: 0,
     left: '-9999em',
@@ -295,40 +154,51 @@ export const TerminalRoot = styled.div({
     width: 0,
     height: 0,
     zIndex: -5,
+    // Prevent wrapping so the IME appears against the textarea at the correct position
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     resize: 'none',
   },
 
   '& .xterm .composition-view': {
+    // TODO: Composition position got messed up somewhere
     background: '#000',
-    color: '#fff',
+    color: '#FFF',
     display: 'none',
     position: 'absolute',
     whiteSpace: 'nowrap',
     zIndex: 1,
-
-    '&.active': { display: 'block' },
   },
 
-  '& .xterm .xterm-viewport': {
-    backgroundColor: '#000',
-    overflowY: 'scroll',
-    cursor: 'default',
-    position: 'absolute',
-    right: 0,
-    left: 0,
-    top: 0,
-    bottom: 0,
+  '& .xterm .composition-view.active': {
+    display: 'block',
   },
 
+  // '& .xterm .xterm-viewport': {
+  //   // On OS X this is required in order for the scroll bar to appear fully opaque
+  //   backgroundColor: 'transparent',
+  //   overflowY: 'scroll',
+  //   cursor: 'default',
+  //   position: 'absolute',
+  //   right: 0,
+  //   left: 0,
+  //   top: 0,
+  //   bottom: 0,
+  // },
+
   '& .xterm .xterm-screen': {
     position: 'relative',
+  },
 
-    '& canvas': { position: 'absolute', left: 0, top: 0 },
+  '& .xterm .xterm-screen canvas': {
+    position: 'absolute',
+    left: 0,
+    top: 0,
   },
 
-  '& .xterm .xterm-scroll-area': { visibility: 'hidden' },
+  '& .xterm .xterm-scroll-area': {
+    visibility: 'hidden',
+  },
 
   '& .xterm-char-measure-element': {
     display: 'inline-block',
@@ -339,7 +209,21 @@ export const TerminalRoot = styled.div({
     lineHeight: 'normal',
   },
 
-  '& .xterm .xterm-accessibility, & .xterm .xterm-message': {
+  '& .xterm.enable-mouse-events': {
+    // When mouse events are enabled (eg. tmux), revert to the standard pointer cursor
+    cursor: 'default',
+  },
+
+  '& .xterm.xterm-cursor-pointer, & .xterm .xterm-cursor-pointer': {
+    cursor: 'pointer',
+  },
+
+  '& .xterm.column-select.focus': {
+    // Column selection mode
+    cursor: 'crosshair',
+  },
+
+  '& .xterm .xterm-accessibility:not(.debug), & .xterm .xterm-message': {
     position: 'absolute',
     left: 0,
     top: 0,
@@ -347,11 +231,73 @@ export const TerminalRoot = styled.div({
     right: 0,
     zIndex: 10,
     color: 'transparent',
+    pointerEvents: 'none',
+  },
+
+  '& .xterm .xterm-accessibility-tree:not(.debug) *::selection': {
+    color: 'transparent',
+  },
+
+  '& .xterm .xterm-accessibility-tree': {
+    userSelect: 'text',
+    whiteSpace: 'pre',
+  },
+
+  '& .xterm .live-region': {
+    position: 'absolute',
+    left: '-9999px',
+    width: '1px',
+    height: '1px',
+    overflow: 'hidden',
+  },
+
+  '& .xterm-dim': {
+    // Dim should not apply to background, so the opacity of the foreground color is applied
+    // explicitly in the generated class and reset to 1 here
+    opacity: '1 !important',
+  },
+
+  // Text decoration styles
+  '& .xterm-underline-1': { textDecoration: 'underline' },
+  '& .xterm-underline-2': { textDecoration: 'double underline' },
+  '& .xterm-underline-3': { textDecoration: 'wavy underline' },
+  '& .xterm-underline-4': { textDecoration: 'dotted underline' },
+  '& .xterm-underline-5': { textDecoration: 'dashed underline' },
+
+  '& .xterm-overline': {
+    textDecoration: 'overline',
   },
 
-  '& .xterm .live-region': { position: 'absolute', left: '-9999px', width: 1, height: 1, overflow: 'hidden' },
+  '& .xterm-overline.xterm-underline-1': { textDecoration: 'overline underline' },
+  '& .xterm-overline.xterm-underline-2': { textDecoration: 'overline double underline' },
+  '& .xterm-overline.xterm-underline-3': { textDecoration: 'overline wavy underline' },
+  '& .xterm-overline.xterm-underline-4': { textDecoration: 'overline dotted underline' },
+  '& .xterm-overline.xterm-underline-5': { textDecoration: 'overline dashed underline' },
 
-  '& .xterm-dim': { opacity: 0.5 },
+  '& .xterm-strikethrough': {
+    textDecoration: 'line-through',
+  },
 
-  '& .xterm-underline': { textDecoration: 'underline' },
+  // Decoration styles
+  '& .xterm-screen .xterm-decoration-container .xterm-decoration': {
+    zIndex: 6,
+    position: 'absolute',
+  },
+
+  '& .xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer': {
+    zIndex: 7,
+  },
+
+  '& .xterm-decoration-overview-ruler': {
+    zIndex: 8,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    pointerEvents: 'none',
+  },
+
+  '& .xterm-decoration-top': {
+    zIndex: 2,
+    position: 'relative',
+  },
 });