split css out to improve loading perception
This commit is contained in:
billchurch
parent
d44e62dc3a
commit
875aecf09a
8 changed files with 278 additions and 692 deletions
|
|
@ -52,6 +52,7 @@
|
|||
"clean-webpack-plugin": "^0.1.18",
|
||||
"copy-webpack-plugin": "^4.3.1",
|
||||
"css-loader": "^0.28.9",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"nodemon": "^1.11.0",
|
||||
"snazzy": "^7.0.0",
|
||||
"snyk": "^1.39.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Web SSH full</title>
|
||||
<link rel="stylesheet" href="/webssh2.css" />
|
||||
<script src="/webssh2.bundle.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Web SSH min</title>
|
||||
<link rel="stylesheet" href="/webssh2.css" />
|
||||
<script src="/webssh2.bundle.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
248
public/webssh2.css
Normal file
248
public/webssh2.css
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
/**
|
||||
* Copyright (c) 2014 The xterm.js authors. All rights reserved.
|
||||
* Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
|
||||
* https://github.com/chjj/term.js
|
||||
* @license MIT
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*
|
||||
* Originally forked from (with the author's permission):
|
||||
* Fabrice Bellard's javascript vt100 for jslinux:
|
||||
* http://bellard.org/jslinux/
|
||||
* Copyright (c) 2011 Fabrice Bellard
|
||||
* The original design remains. The terminal itself
|
||||
* has been extended to include xterm CSI codes, among
|
||||
* other features.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Default styles for xterm.js
|
||||
*/
|
||||
|
||||
.xterm {
|
||||
font-family: courier-new, courier, monospace;
|
||||
font-feature-settings: "liga" 0;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.xterm.focus,
|
||||
.xterm:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.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.
|
||||
*/
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.xterm .xterm-helper-textarea {
|
||||
/*
|
||||
* HACK: to fix IE's blinking cursor
|
||||
* Move textarea out of the screen to the far left, so that the cursor is not visible.
|
||||
*/
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
left: -9999em;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: -10;
|
||||
/** Prevent wrapping so the IME appears against the textarea at the correct position */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.xterm .composition-view {
|
||||
/* TODO: Composition position got messed up somewhere */
|
||||
background: #000;
|
||||
color: #FFF;
|
||||
display: none;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.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 */
|
||||
background-color: #000;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.xterm canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.xterm .xterm-scroll-area {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.xterm .xterm-char-measure-element {
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
left: -9999em;
|
||||
}
|
||||
|
||||
.xterm.enable-mouse-events {
|
||||
/* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.xterm:not(.enable-mouse-events) {
|
||||
cursor: text;
|
||||
}
|
||||
body {
|
||||
font-family: helvetica, sans-serif, arial;
|
||||
font-size: 1em;
|
||||
color: #111;
|
||||
background-color: rgb(0, 0, 0);
|
||||
color: rgb(240, 240, 240);
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#header {
|
||||
color: rgb(240, 240, 240);
|
||||
background-color: rgb(0, 128, 0);
|
||||
width: 100%;
|
||||
border-color: white;
|
||||
border-style: none none solid none;
|
||||
border-width: 1px;
|
||||
text-align: center;
|
||||
flex: 0 1 auto;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#terminal-container {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#terminal-container .terminal {
|
||||
background-color: #000000;
|
||||
color: #fafafa;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#terminal-container .terminal:focus .terminal-cursor {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
#bottomdiv {
|
||||
width: 100%;
|
||||
background-color: rgb(50, 50, 50);
|
||||
border-color: white;
|
||||
border-style: solid none none none;
|
||||
border-width: 1px;
|
||||
z-index: 99;
|
||||
flex: 0 1 30px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
display: inline-block;
|
||||
color: rgb(240, 240, 240);
|
||||
background-color: rgb(50, 50, 50);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
color: rgb(240, 240, 240);
|
||||
background-color: rgb(50, 50, 50);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-color: white;
|
||||
border-style: none solid none solid;
|
||||
border-width: 1px;
|
||||
text-align: left;
|
||||
z-index: 100;
|
||||
}
|
||||
#credentials {
|
||||
display: inline-block;
|
||||
color: rgb(51, 51, 51);
|
||||
background-color: rgb(255, 127, 0);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-color: white;
|
||||
border-style: none solid none none;
|
||||
border-width: 1px;
|
||||
text-align: left;
|
||||
z-index: 100;
|
||||
}
|
||||
a.credentials {
|
||||
color: rgb(51, 51, 51);
|
||||
text-decoration: none;
|
||||
}
|
||||
#downloadLog {
|
||||
display: inline-block;
|
||||
color: rgb(240, 240, 240);
|
||||
background-color: rgb(255, 127, 0);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-color: white;
|
||||
border-style: none solid none none;
|
||||
border-width: 1px;
|
||||
text-align: left;
|
||||
z-index: 100;
|
||||
}
|
||||
a.downloadLog {
|
||||
color: rgb(240, 240, 240);
|
||||
text-decoration: none;
|
||||
}
|
||||
#toggleLog {
|
||||
display: inline-block;
|
||||
color: rgb(240, 240, 240);
|
||||
background-color: rgb(0, 127, 0);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-color: white;
|
||||
border-style: none solid none none;
|
||||
border-width: 1px;
|
||||
text-align: left;
|
||||
z-index: 100;
|
||||
}
|
||||
a.toggleLog {
|
||||
color: rgb(240, 240, 240);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Web SSH full</title>
|
||||
<link rel="stylesheet" href="/webssh2.css" />
|
||||
<script src="/webssh2.bundle.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Web SSH min</title>
|
||||
<link rel="stylesheet" href="/webssh2.css" />
|
||||
<script src="/webssh2.bundle.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
const path = require('path')
|
||||
const CleanWebpackPlugin = require('clean-webpack-plugin')
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
|
|
@ -12,15 +13,22 @@ module.exports = {
|
|||
'./src/client-full.htm',
|
||||
'./src/client-min.htm',
|
||||
'./src/favicon.ico'
|
||||
])
|
||||
]),
|
||||
new ExtractTextPlugin('[name].css')
|
||||
],
|
||||
output: {
|
||||
filename: '[name].bundle.js',
|
||||
path: path.resolve(__dirname, './public')
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.css$/, loader: 'style-loader!css-loader' }
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: 'css-loader'
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue