Skip to content

Commit 133709b

Browse files
YukaiiYukaii
committed
Extract style out of index.html as it grows
1 parent 7c2cd71 commit 133709b

2 files changed

Lines changed: 88 additions & 91 deletions

File tree

‎app.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
html,
2+
body {
3+
margin: 0;
4+
height: 100%;
5+
background-color: #f8f8f8;
6+
overflow: hidden;
7+
font-family: Arial, Helvetica, sans-serif;
8+
}
9+
10+
body {
11+
display: flex;
12+
flex-direction: column;
13+
}
14+
15+
webview {
16+
flex: 1;
17+
}
18+
19+
#title-bar {
20+
-webkit-app-region: drag;
21+
padding: 0.3em 0.7em;
22+
display: flex;
23+
flex-direction: row;
24+
justify-content: space-between;
25+
background-color: #f8f8f8;
26+
color: #484848;
27+
transition: color 0.5s, background-color 0.5s;
28+
}
29+
30+
#title-bar.dark {
31+
background-color: #333333;
32+
color: white;
33+
}
34+
35+
#title-bar .window-control {
36+
float: right;
37+
-webkit-app-region: no-drag;
38+
}
39+
40+
navbar {
41+
height: 23px;
42+
align-items: center;
43+
width: 100%;
44+
display: flex;
45+
-webkit-app-region: drag;
46+
background-color: #f8f8f8;
47+
color: #484848;
48+
transition: color 0.5s, background-color 0.5s;
49+
}
50+
51+
#navbar-container {
52+
font-size: 0.9em;
53+
font-family: "Courier New", Courier, monospace;
54+
display: flex;
55+
flex: 1;
56+
justify-content: space-between;
57+
-webkit-user-select: none;
58+
user-select: none;
59+
}
60+
61+
navbar.dark {
62+
background-color: #333333;
63+
color: white;
64+
}
65+
66+
navbar.dark .control-buttons>*:hover {
67+
color: white;
68+
}
69+
70+
#navbar-container .control-buttons {
71+
flex: 1;
72+
display: flex;
73+
}
74+
75+
#navbar-container .control-buttons>* {
76+
margin: 0 .3em;
77+
cursor: pointer;
78+
-webkit-user-select: none;
79+
-webkit-app-region: no-drag;
80+
height: 23px;
81+
display: flex;
82+
align-items: center;
83+
}
84+
85+
#navbar-container .control-buttons>*:hover {
86+
color: #c1c1c1;
87+
}

‎index.html‎

Lines changed: 1 addition & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -5,97 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link rel="stylesheet" type="text/css" href="vendor/font-awesome.min.css">
8-
<style>
9-
html, body {
10-
margin: 0;
11-
height: 100%;
12-
background-color: #f8f8f8;
13-
overflow: hidden;
14-
font-family: Arial, Helvetica, sans-serif;
15-
}
16-
17-
body {
18-
display: flex;
19-
flex-direction: column;
20-
}
21-
22-
webview {
23-
flex: 1;
24-
}
25-
26-
#title-bar {
27-
-webkit-app-region: drag;
28-
padding: 0.3em 0.7em;
29-
display: flex;
30-
flex-direction: row;
31-
justify-content: space-between;
32-
33-
background-color: #f8f8f8;
34-
color: #484848;
35-
36-
transition: color 0.5s, background-color 0.5s;
37-
}
38-
39-
#title-bar.dark {
40-
background-color: #333333;
41-
color: white;
42-
}
43-
44-
#title-bar .window-control {
45-
float: right;
46-
-webkit-app-region: no-drag;
47-
}
48-
49-
navbar {
50-
height: 23px;
51-
align-items: center;
52-
width: 100%;
53-
display: flex;
54-
-webkit-app-region: drag;
55-
background-color: #f8f8f8;
56-
color: #484848;
57-
58-
transition: color 0.5s, background-color 0.5s;
59-
}
60-
61-
#navbar-container {
62-
font-size: 0.9em;
63-
font-family: "Courier New", Courier, monospace;
64-
display: flex;
65-
flex: 1;
66-
justify-content: space-between;
67-
-webkit-user-select: none;
68-
user-select: none;
69-
}
70-
71-
navbar.dark {
72-
background-color: #333333;
73-
color: white;
74-
}
75-
76-
navbar.dark .control-buttons > *:hover {
77-
color: white;
78-
}
79-
80-
#navbar-container .control-buttons {
81-
flex: 1;
82-
display: flex;
83-
}
84-
85-
#navbar-container .control-buttons > * {
86-
margin: 0 .3em;
87-
cursor: pointer;
88-
-webkit-user-select: none;
89-
-webkit-app-region: no-drag;
90-
height: 23px;
91-
display: flex;
92-
align-items: center;
93-
}
94-
95-
#navbar-container .control-buttons > *:hover {
96-
color: #c1c1c1;
97-
}
98-
</style>
8+
<link rel="stylesheet" type="text/css" href="./app.css">
999
</head>
10010
<body>
10111
<div id="title-bar">

0 commit comments

Comments
 (0)