Skip to content

Commit 595ce6f

Browse files
code-ashercode-asher
committed
Update styling
Just sort of winging it.
1 parent b1760c8 commit 595ce6f

11 files changed

Lines changed: 145 additions & 170 deletions

File tree

‎src/browser/pages/error.css‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
11
.error-display {
22
box-sizing: border-box;
3-
color: #fcfcfc;
43
padding: 20px;
54
text-align: center;
65
}
76

7+
.error-display > .header {
8+
font-size: 6rem;
9+
margin: 0;
10+
}
11+
12+
.error-display > .body {
13+
color: #444;
14+
font-size: 1.2rem;
15+
}
16+
817
.error-display > .links {
9-
margin-top: 1rem;
18+
margin-top: 16px;
1019
}
1120

1221
.error-display > .links > .link {
13-
color: #b6b6b6;
22+
color: rgb(87, 114, 245);
1423
text-decoration: none;
1524
}
1625

1726
.error-display > .links > .link:hover {
18-
color: #fcfcfc;
1927
text-decoration: underline;
2028
}

‎src/browser/pages/error.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
88
/>
99
<meta http-equiv="Content-Security-Policy" content="style-src 'self'; manifest-src 'self'; img-src 'self' data:;" />
10-
<title>code-server {{ERROR_TITLE}}</title>
10+
<title>{{ERROR_TITLE}} - code-server</title>
1111
<link rel="icon" href="{{BASE}}/static-{{COMMIT}}/src/browser/media/favicon.ico" type="image/x-icon" />
1212
<link
1313
rel="manifest"

‎src/browser/pages/global.css‎

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,68 @@ body,
88

99
body {
1010
background: rgb(244, 247, 252);
11-
color: #f4f4f4;
11+
color: #111;
1212
margin: 0;
1313
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
1414
"Segoe UI Emoji", "Segoe UI Symbol";
1515
overflow: hidden;
1616
}
1717

18+
input,
1819
button {
1920
font-family: inherit;
20-
font-size: inherit;
21+
font-size: 1rem;
22+
line-height: 1rem;
23+
}
24+
25+
.-button {
26+
background-color: rgb(87, 114, 245);
27+
border-radius: 5px;
28+
border: none;
29+
box-sizing: border-box;
30+
color: white;
31+
cursor: pointer;
32+
padding: 18px 20px;
33+
text-decoration: none;
2134
}
2235

2336
.center-container {
2437
align-items: center;
2538
box-sizing: border-box;
2639
display: flex;
40+
flex-direction: column;
2741
justify-content: center;
2842
padding: 20px;
2943
}
44+
45+
.card-box {
46+
background-color: rgb(250, 253, 258);
47+
border-radius: 5px;
48+
box-shadow: rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
49+
max-width: 650px;
50+
width: 100%;
51+
}
52+
53+
.card-box > .header {
54+
border-bottom: 1px solid #ddd;
55+
color: #444;
56+
padding: 30px;
57+
}
58+
59+
.card-box > .header > .main {
60+
margin: 0;
61+
font-size: 1.5rem;
62+
}
63+
64+
.card-box > .header > .sub {
65+
color: #555;
66+
margin-top: 10px;
67+
}
68+
69+
.card-box > .content {
70+
padding: 40px;
71+
}
72+
73+
.card-box + .card-box {
74+
margin-top: 26px;
75+
}

‎src/browser/pages/home.css‎

Lines changed: 8 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,8 @@
1-
.info-blocks {
2-
max-width: 500px;
3-
width: 100%;
4-
}
5-
6-
.info-block > .header {
7-
font-size: 1.3rem;
8-
margin: 1.5rem 0;
9-
}
10-
11-
.info-block > .none {
12-
color: #b6b6b6;
13-
}
14-
15-
.info-block + .info-block {
16-
border-top: 1px solid #666;
17-
margin-top: 1rem;
18-
}
19-
201
.block-row {
212
display: flex;
223
}
234

245
.block-row > .item {
25-
color: #c4c4c4;
266
flex: 1;
277
}
288

@@ -31,16 +11,17 @@
3111
}
3212

3313
.block-row > .item > .sub {
34-
color: #888;
14+
font-size: 0.95em;
3515
}
3616

3717
.block-row .-link {
38-
cursor: pointer;
18+
color: rgb(87, 114, 245);
19+
display: block;
3920
text-decoration: none;
4021
}
4122

4223
.block-row .-link:hover {
43-
color: #fafafa;
24+
text-decoration: underline;
4425
}
4526

4627
.block-row > .item > .icon {
@@ -51,8 +32,8 @@
5132
}
5233

5334
.block-row > .item > .icon.-missing {
54-
background-color: #eee;
55-
color: #b6b6b6;
35+
background-color: rgb(87, 114, 245);
36+
color: #fff;
5637
text-align: center;
5738
}
5839

@@ -67,16 +48,12 @@
6748
}
6849

6950
.kill-form > .kill {
70-
background-color: transparent;
51+
background-color: rgb(87, 114, 245);
7152
border: none;
72-
color: #b6b6b6;
53+
color: #fff;
7354
cursor: pointer;
7455
font-size: 1rem;
7556
line-height: 1rem;
7657
margin: 0;
7758
padding: 0;
7859
}
79-
80-
.kill-form > .kill:hover {
81-
color: #fafafa;
82-
}

‎src/browser/pages/home.html‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,38 +20,46 @@
2020
</head>
2121
<body>
2222
<div class="center-container">
23-
<div class="info-blocks">
24-
<!-- TEMP: Only VS Code for now. -->
25-
<!-- <div class="info-block"> -->
26-
<!-- <h2 class="header">Running Applications</h2> -->
27-
<!-- {{APP_LIST:RUNNING}} -->
28-
<!-- </div> -->
23+
<!-- TEMP: Only VS Code for now. -->
24+
<!-- <div class="info-block"> -->
25+
<!-- <h2 class="header">Running Applications</h2> -->
26+
<!-- {{APP_LIST:RUNNING}} -->
27+
<!-- </div> -->
2928

30-
<div class="info-block">
31-
<h2 class="header">Launch</h2>
29+
<div class="card-box">
30+
<div class="header">
31+
<h2 class="main">Launch</h2>
32+
<div class="sub">Choose an application to launch below.</div>
33+
</div>
34+
<div class="content">
3235
<div class="block-row">
3336
<a class="item -link" href="./vscode">
3437
<img class="icon" src="./static-{{COMMIT}}/lib/vscode/resources/linux/code.png" />
3538
VS Code
3639
</a>
3740
</div>
3841
</div>
42+
</div>
3943

40-
<div class="info-block">
41-
<h2 class="header">Version</h2>
44+
<div class="card-box">
45+
<div class="header">
46+
<h2 class="main">Version</h2>
47+
<div class="sub">Version information and updates.</div>
48+
</div>
49+
<div class="content">
4250
{{UPDATE:NAME}}
4351
</div>
52+
</div>
4453

45-
<!-- <div class="info-block"> -->
46-
<!-- <h2 class="header">Editors</h2> -->
47-
<!-- {{APP_LIST:EDITORS}} -->
48-
<!-- </div> -->
54+
<!-- <div class="info-block"> -->
55+
<!-- <h2 class="header">Editors</h2> -->
56+
<!-- {{APP_LIST:EDITORS}} -->
57+
<!-- </div> -->
4958

50-
<!-- <div class="info-block"> -->
51-
<!-- <h2 class="header">Other</h2> -->
52-
<!-- {{APP_LIST:OTHER}} -->
53-
<!-- </div> -->
54-
</div>
59+
<!-- <div class="info-block"> -->
60+
<!-- <h2 class="header">Other</h2> -->
61+
<!-- {{APP_LIST:OTHER}} -->
62+
<!-- </div> -->
5563
</div>
5664
</body>
5765
</html>

‎src/browser/pages/login.css‎

Lines changed: 5 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,39 @@
11
body {
22
overflow: auto;
33
}
4-
.center-container {
5-
width: 100vw;
6-
height: 100vh;
7-
padding: 20px 40px;
8-
min-height: 400px;
9-
}
104

115
.login-form {
12-
border-radius: 5px;
13-
box-shadow: rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
14-
color: rgba(0, 0, 0, 0.37);
156
display: flex;
167
flex-direction: column;
178
flex: 1;
189
justify-content: center;
19-
padding: 20px 40px;
20-
position: relative;
21-
22-
height: 300px;
23-
min-width: 320px;
24-
max-width: 500px;
25-
}
26-
27-
.main {
28-
font-size: 40px;
29-
}
30-
31-
.login-form > .header {
32-
align-items: center;
33-
color: black;
34-
}
35-
36-
.login-form > .header > .sub {
37-
margin-top: 10px;
3810
}
3911

4012
.login-form > .field {
41-
margin-top: 40px;
4213
display: flex;
4314
flex-direction: row;
4415
width: 100%;
45-
height: 50px;
4616
}
4717

4818
.login-form > .error {
4919
color: red;
50-
margin-top: 1rem;
20+
margin-top: 16px;
5121
}
5222

5323
.login-form > .field > .password {
24+
background-color: rgb(244, 247, 252);
25+
border-radius: 5px;
5426
border: 1px solid #ddd;
55-
background: rgb(244, 247, 252);
5627
box-sizing: border-box;
57-
padding: 1rem;
58-
flex: 1;
59-
font-size: 20px;
60-
border-radius: 5px;
6128
color: black;
62-
min-width: 100px;
29+
flex: 1;
30+
padding: 16px;
6331
}
6432

6533
.login-form > .user {
6634
display: none;
6735
}
6836

6937
.login-form > .field > .submit {
70-
font-size: 20px;
71-
border: none;
72-
box-sizing: border-box;
7338
margin-left: 20px;
74-
75-
background-color: rgb(87, 114, 245);
76-
color: white;
77-
font-family: monospace;
78-
padding: 10px 20px;
79-
border-radius: 5px;
8039
}

0 commit comments

Comments
 (0)