mirror of
https://github.com/coder/code-server.git
synced 2024-12-29 12:43:36 +03:00
Update styling
Just sort of winging it.
This commit is contained in:
Asher
parent
b1760c8d29
commit
595ce6f5e3
@ -1,20 +1,28 @@
|
||||
.error-display {
|
||||
box-sizing: border-box;
|
||||
color: #fcfcfc;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-display > .header {
|
||||
font-size: 6rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-display > .body {
|
||||
color: #444;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.error-display > .links {
|
||||
margin-top: 1rem;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.error-display > .links > .link {
|
||||
color: #b6b6b6;
|
||||
color: rgb(87, 114, 245);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.error-display > .links > .link:hover {
|
||||
color: #fcfcfc;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<meta http-equiv="Content-Security-Policy" content="style-src 'self'; manifest-src 'self'; img-src 'self' data:;" />
|
||||
<title>code-server {{ERROR_TITLE}}</title>
|
||||
<title>{{ERROR_TITLE}} - code-server</title>
|
||||
<link rel="icon" href="{{BASE}}/static-{{COMMIT}}/src/browser/media/favicon.ico" type="image/x-icon" />
|
||||
<link
|
||||
rel="manifest"
|
||||
|
||||
@ -8,22 +8,68 @@ body,
|
||||
|
||||
body {
|
||||
background: rgb(244, 247, 252);
|
||||
color: #f4f4f4;
|
||||
color: #111;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol";
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.-button {
|
||||
background-color: rgb(87, 114, 245);
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 18px 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.center-container {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
background-color: rgb(250, 253, 258);
|
||||
border-radius: 5px;
|
||||
box-shadow: rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
|
||||
max-width: 650px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-box > .header {
|
||||
border-bottom: 1px solid #ddd;
|
||||
color: #444;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.card-box > .header > .main {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-box > .header > .sub {
|
||||
color: #555;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card-box > .content {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.card-box + .card-box {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
@ -1,28 +1,8 @@
|
||||
.info-blocks {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-block > .header {
|
||||
font-size: 1.3rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.info-block > .none {
|
||||
color: #b6b6b6;
|
||||
}
|
||||
|
||||
.info-block + .info-block {
|
||||
border-top: 1px solid #666;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.block-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.block-row > .item {
|
||||
color: #c4c4c4;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@ -31,16 +11,17 @@
|
||||
}
|
||||
|
||||
.block-row > .item > .sub {
|
||||
color: #888;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.block-row .-link {
|
||||
cursor: pointer;
|
||||
color: rgb(87, 114, 245);
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.block-row .-link:hover {
|
||||
color: #fafafa;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.block-row > .item > .icon {
|
||||
@ -51,8 +32,8 @@
|
||||
}
|
||||
|
||||
.block-row > .item > .icon.-missing {
|
||||
background-color: #eee;
|
||||
color: #b6b6b6;
|
||||
background-color: rgb(87, 114, 245);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -67,16 +48,12 @@
|
||||
}
|
||||
|
||||
.kill-form > .kill {
|
||||
background-color: transparent;
|
||||
background-color: rgb(87, 114, 245);
|
||||
border: none;
|
||||
color: #b6b6b6;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.kill-form > .kill:hover {
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
@ -20,15 +20,18 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="center-container">
|
||||
<div class="info-blocks">
|
||||
<!-- TEMP: Only VS Code for now. -->
|
||||
<!-- <div class="info-block"> -->
|
||||
<!-- <h2 class="header">Running Applications</h2> -->
|
||||
<!-- {{APP_LIST:RUNNING}} -->
|
||||
<!-- </div> -->
|
||||
<!-- TEMP: Only VS Code for now. -->
|
||||
<!-- <div class="info-block"> -->
|
||||
<!-- <h2 class="header">Running Applications</h2> -->
|
||||
<!-- {{APP_LIST:RUNNING}} -->
|
||||
<!-- </div> -->
|
||||
|
||||
<div class="info-block">
|
||||
<h2 class="header">Launch</h2>
|
||||
<div class="card-box">
|
||||
<div class="header">
|
||||
<h2 class="main">Launch</h2>
|
||||
<div class="sub">Choose an application to launch below.</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="block-row">
|
||||
<a class="item -link" href="./vscode">
|
||||
<img class="icon" src="./static-{{COMMIT}}/lib/vscode/resources/linux/code.png" />
|
||||
@ -36,22 +39,27 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-block">
|
||||
<h2 class="header">Version</h2>
|
||||
<div class="card-box">
|
||||
<div class="header">
|
||||
<h2 class="main">Version</h2>
|
||||
<div class="sub">Version information and updates.</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
{{UPDATE:NAME}}
|
||||
</div>
|
||||
|
||||
<!-- <div class="info-block"> -->
|
||||
<!-- <h2 class="header">Editors</h2> -->
|
||||
<!-- {{APP_LIST:EDITORS}} -->
|
||||
<!-- </div> -->
|
||||
|
||||
<!-- <div class="info-block"> -->
|
||||
<!-- <h2 class="header">Other</h2> -->
|
||||
<!-- {{APP_LIST:OTHER}} -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
<!-- <div class="info-block"> -->
|
||||
<!-- <h2 class="header">Editors</h2> -->
|
||||
<!-- {{APP_LIST:EDITORS}} -->
|
||||
<!-- </div> -->
|
||||
|
||||
<!-- <div class="info-block"> -->
|
||||
<!-- <h2 class="header">Other</h2> -->
|
||||
<!-- {{APP_LIST:OTHER}} -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,65 +1,33 @@
|
||||
body {
|
||||
overflow: auto;
|
||||
}
|
||||
.center-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: 20px 40px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 5px;
|
||||
box-shadow: rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
|
||||
color: rgba(0, 0, 0, 0.37);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
padding: 20px 40px;
|
||||
position: relative;
|
||||
|
||||
height: 300px;
|
||||
min-width: 320px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.main {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.login-form > .header {
|
||||
align-items: center;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.login-form > .header > .sub {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.login-form > .field {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.login-form > .error {
|
||||
color: red;
|
||||
margin-top: 1rem;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.login-form > .field > .password {
|
||||
border: 1px solid #ddd;
|
||||
background: rgb(244, 247, 252);
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
flex: 1;
|
||||
font-size: 20px;
|
||||
background-color: rgb(244, 247, 252);
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ddd;
|
||||
box-sizing: border-box;
|
||||
color: black;
|
||||
min-width: 100px;
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.login-form > .user {
|
||||
@ -67,14 +35,5 @@ body {
|
||||
}
|
||||
|
||||
.login-form > .field > .submit {
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
margin-left: 20px;
|
||||
|
||||
background-color: rgb(87, 114, 245);
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@ -22,31 +22,34 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="center-container">
|
||||
<form class="login-form" method="post">
|
||||
<div class="card-box">
|
||||
<div class="header">
|
||||
<div class="main">Welcome to code-server</div>
|
||||
<h1 class="main">Welcome to code-server</h1>
|
||||
<div class="sub">Please log in below. Check code-server's logs for the generated password.</div>
|
||||
</div>
|
||||
<input class="user" type="text" autocomplete="username" />
|
||||
<input id="base" type="hidden" name="base" value="/" />
|
||||
<div class="field">
|
||||
<!-- The onfocus code places the cursor at the end of the value. -->
|
||||
<input
|
||||
required
|
||||
autofocus
|
||||
value="{{VALUE}}"
|
||||
onfocus="const value=this.value;this.value='';this.value=value;"
|
||||
class="password"
|
||||
type="password"
|
||||
placeholder="PASSWORD"
|
||||
name="password"
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
|
||||
<input class="submit" value="SUBMIT" type="submit" />
|
||||
<div class="content">
|
||||
<form class="login-form" method="post">
|
||||
<input class="user" type="text" autocomplete="username" />
|
||||
<input id="base" type="hidden" name="base" value="/" />
|
||||
<div class="field">
|
||||
<!-- The onfocus code places the cursor at the end of the value. -->
|
||||
<input
|
||||
required
|
||||
autofocus
|
||||
value="{{VALUE}}"
|
||||
onfocus="const value=this.value;this.value='';this.value=value;"
|
||||
class="password"
|
||||
type="password"
|
||||
placeholder="PASSWORD"
|
||||
name="password"
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
<input class="submit -button" value="SUBMIT" type="submit" />
|
||||
</div>
|
||||
{{ERROR}}
|
||||
</form>
|
||||
</div>
|
||||
{{ERROR}}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
|
||||
@ -2,39 +2,11 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.update-form > .apply {
|
||||
background-color: transparent;
|
||||
color: #b6b6b6;
|
||||
cursor: pointer;
|
||||
border: 1px solid #b6b6b6;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.update-form > .apply:hover {
|
||||
color: #fafafa;
|
||||
border-color: #fafafa;
|
||||
}
|
||||
|
||||
.update-form > .current {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.update-form > .links {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.update-form > .links > .link {
|
||||
color: #b6b6b6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.update-form > .links > .link:hover {
|
||||
color: #fcfcfc;
|
||||
text-decoration: underline;
|
||||
.update-form > .cancel {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.update-form > .error {
|
||||
color: red;
|
||||
margin-top: 1rem;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
@ -19,13 +19,18 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="center-container">
|
||||
<form class="update-form" method="post">
|
||||
<h2 class="header">Update</h2>
|
||||
{{UPDATE_STATUS}} {{ERROR}}
|
||||
<div class="links">
|
||||
<a class="link" href="{{BASE}}">go home</a>
|
||||
<div class="card-box">
|
||||
<div class="header">
|
||||
<h1 class="main">Update</h1>
|
||||
<div class="sub">Update code-server.</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="content">
|
||||
<form class="update-form" method="post">
|
||||
{{UPDATE_STATUS}} {{ERROR}}
|
||||
<a class="cancel -button" href="{{BASE}}">Cancel</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -166,7 +166,7 @@ export class MainHttpProvider extends HttpProvider {
|
||||
if (this.update.isLatestVersion(update)) {
|
||||
return `<div class="block-row">
|
||||
<div class="item">
|
||||
${update.version}
|
||||
Latest: ${update.version}
|
||||
<div class="sub">Up to date</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
@ -178,13 +178,13 @@ export class MainHttpProvider extends HttpProvider {
|
||||
}
|
||||
|
||||
return `<div class="block-row">
|
||||
<a class="item -link" href="./update">
|
||||
${update.version}
|
||||
<div class="item">
|
||||
Latest: ${update.version}
|
||||
<div class="sub">Out of date</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="item">
|
||||
${humanize(update.checked)}
|
||||
<a class="sub -link" href="./update/check">Check now</a>
|
||||
<a class="sub -link" href="./update">Update now</a>
|
||||
</div>
|
||||
<div class="item" >Current: ${this.update.currentVersion}</div>
|
||||
</div>`
|
||||
|
||||
@ -162,10 +162,7 @@ export class UpdateHttpProvider extends HttpProvider {
|
||||
throw new Error("No update available")
|
||||
}
|
||||
|
||||
return `<button type="submit" class="apply">
|
||||
Update to ${update.version}
|
||||
</button>
|
||||
<div class="current">Current: ${this.currentVersion}</div>`
|
||||
return `<button type="submit" class="apply -button">Update to ${update.version}</button>`
|
||||
}
|
||||
|
||||
public async tryUpdate(route: Route): Promise<HttpResponse> {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user