xterm.js/src/style.css

   1 html,body {
   2     height: 100%;
   3     min-height: 100%;
   4     margin: 0;
   5     padding: 0;
   6     overflow: hidden;
   7     font-family: Consolas,"DejaVu Sans Mono","Liberation Mono",Courier,monospace;
   8     background-color: #101010;
   9 }
  10
  11 .terminal {
  12     background-color: #101010;
  13     color: #f0f0f0;
  14     font-size: 10pt;
  15     font-family: Consolas,"DejaVu Sans Mono","Liberation Mono",Courier,monospace;
  16     font-variant-ligatures: none;
  17     -moz-osx-font-smoothing: grayscale;
  18     -webkit-font-smoothing: antialiased;
  19 }
  20
  21 .terminal .xterm-viewport {
  22     background-color: rgba(121, 121, 121, 0);
  23     -webkit-background-clip: text;
  24     -webkit-text-fill-color: transparent;
  25     transition: background-color 800ms linear;
  26 }
  27
  28 /* fix line height on firefox */
  29 .xterm-rows > div > span {
  30     display: inline-block;
  31 }
  32
  33 #terminal-container {
  34     height: 100%;
  35     width: auto;
  36 }
  37
  38 #wrap {
  39     height: 100%;
  40     width: auto;
  41     box-sizing: border-box;
  42     padding: 5px;
  43 }
  44
  45 #status_bar {
  46   position: fixed;
  47   top: 0;
  48   left: 0;
  49   width: 100%;
  50   z-index: 500;
  51   transform: translateY(-100%);
  52
  53   transition: 0.25s ease-in-out;
  54
  55   visibility: hidden;
  56   opacity: 0;
  57
  58   padding: 5px;
  59
  60   display: flex;
  61   flex-direction: row;
  62   justify-content: center;
  63   align-content: center;
  64
  65   line-height: 25px;
  66   color: #fff;
  67
  68   border-bottom: 1px solid rgba(0, 0, 0, 0.9);
  69 }
  70
  71 #status_bar.open {
  72   transform: translateY(0);
  73   visibility: visible;
  74   opacity: 1;
  75 }
  76
  77 #status_bar.normal {
  78   background: rgba(128,128,128,0.9);
  79 }
  80 #status_bar.error {
  81   background: rgba(200,55,55,0.9);
  82 }
  83 #status_bar.warning {
  84   background: rgba(180,180,30,0.9);
  85 }
  86
  87 #pve_start_info {
  88     color: white;
  89     text-align: center;
  90     font-size: 20px;
  91     padding: 6px;
  92 }
  93
  94 #connect_dlg {
  95   transition: 0.2s ease-in-out;
  96
  97   transform: scale(0, 0);
  98   visibility: hidden;
  99   opacity: 0;
 100   font-family: Helvetica;
 101 }
 102
 103 #connect_dlg.pve_open {
 104   transform: scale(1, 1);
 105   visibility: visible;
 106   opacity: 1;
 107 }
 108
 109 #connect_btn {
 110   cursor: pointer;
 111   padding: 6px;
 112   color: white;
 113   background:#4c4c4c;;
 114   border-radius: 8px;
 115   text-align: center;
 116   font-size: 20px;
 117   box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
 118 }
 119 #connect_btn div {
 120   margin: 2px;
 121   padding: 5px 30px;
 122   border: 1px solid #2f2f2f;
 123   border-bottom-width: 2px;
 124   border-radius: 5px;
 125   background:#4c4c4c;;
 126
 127   /* This avoids it jumping around when :active */
 128   vertical-align: middle;
 129 }
 130 #connect_btn div:active {
 131   border-bottom-width: 1px;
 132   margin-top: 3px;
 133 }
 134
 135 div.center {
 136   display: flex;
 137   align-items: center;
 138   justify-content: center;
 139   position: fixed;
 140   top: 0;
 141   left: 0;
 142   width: 100%;
 143   height: 100%;
 144 }