Skip to content

Commit fd5f497

Browse files
tirithentirithen
committed
Adds power menu and places styles in external CSS
1 parent a3df2e2 commit fd5f497

File tree

6 files changed

+284
-95
lines changed

6 files changed

+284
-95
lines changed

‎css/style.css

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
html {
2+
background: #000;
3+
}
4+
5+
body {
6+
font-size: 16px;
7+
font-family: sans-serif;
8+
color: #fff;
9+
}
10+
11+
input, button {
12+
font-size: 2rem;
13+
border: none;
14+
border-radius: 0.5rem;
15+
}
16+
17+
button {
18+
min-width: 4rem;
19+
min-height: 4rem;
20+
margin: 0.3rem;
21+
padding: 0.1rem 0.2rem;
22+
background: #fff;
23+
color: #000;
24+
transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
25+
}
26+
27+
button::-moz-focus-inner,
28+
a::-moz-focus-inner {
29+
border: none;
30+
}
31+
32+
a:active, a:focus {
33+
outline: none;
34+
}
35+
36+
button:focus {
37+
color: #000;
38+
}
39+
40+
button:active {
41+
background: #000;
42+
color: #fff;
43+
}
44+
45+
button[disabled] {
46+
background: #333;
47+
color: #555;
48+
}
49+
50+
button.small {
51+
min-width: 2.5rem;
52+
min-height: 2rem;
53+
}
54+
55+
input {
56+
width: 80%;
57+
box-sizing: border-box;
58+
padding: 0.2rem;
59+
}
60+
61+
input[type="range"] {
62+
background: transparent;
63+
margin-top: -0.5rem;
64+
margin-bottom: -1rem;
65+
}
66+
67+
input[type="text"] {
68+
font-size: 1.5rem;
69+
padding: 0.5rem;
70+
}
71+
72+
.center {
73+
text-align: center;
74+
z-index: 2;
75+
position: relative;
76+
}
77+
78+
label {
79+
position: relative;
80+
top: -0.2rem;
81+
}
82+
83+
.site-heading {
84+
position: absolute;
85+
color: #555;
86+
z-index: 1;
87+
transform: rotate(90deg);
88+
top: 5rem;
89+
left: -4.5rem;
90+
}
91+
92+
.hide {
93+
display: none;
94+
}
95+
96+
.power {
97+
position: absolute;
98+
top: 1.5rem;
99+
right: 1.7rem;
100+
width: 1.5rem;
101+
height: 1.5rem;
102+
border-radius: 50%;
103+
background: transparent;
104+
border: 0.4rem solid #fff;
105+
display: block;
106+
transition: border 0.3s ease-in-out;
107+
}
108+
109+
.power:before {
110+
content: ".";
111+
color: transparent;
112+
position: absolute;
113+
top: -0.4rem;
114+
right: 0.45rem;
115+
background: #000;
116+
width: 0.6rem;
117+
height: 0.5rem;
118+
z-index: 2;
119+
display: block;
120+
opacity: 1;
121+
transition: opacity 0.3s;
122+
}
123+
124+
.power:after {
125+
content: '.';
126+
font-size: none;
127+
color: transparent;
128+
position: absolute;
129+
top: -0.6rem;
130+
right: 0.55rem;
131+
background: #fff;
132+
border-radius: 0.1rem;
133+
width: 0.4rem;
134+
height: 1.4rem;
135+
z-index: 3;
136+
display: block;
137+
transition: background 0.3s ease-in-out;
138+
}
139+
140+
.power:active:before {
141+
opacity: 0;
142+
}
143+
144+
.power[disabled] {
145+
border-color: #333;
146+
}
147+
148+
.power[disabled]:before {
149+
opacity: 1;
150+
}
151+
152+
.power[disabled]:after {
153+
background: #333;
154+
}
155+
156+
.overlay {
157+
display: none;
158+
z-index: 100;
159+
position: fixed;
160+
top: 0;
161+
bottom: 0;
162+
left: 0;
163+
right: 0;
164+
background: #000;
165+
opacity: 0;
166+
transition: opacity 0.5s ease-in-out;
167+
}
168+
169+
.overlay.show {
170+
opacity: 0.8;
171+
}
172+
173+
.menu {
174+
list-style-type: none;
175+
background: #000;
176+
border: 0.2rem solid #fff;
177+
width: 80%;
178+
z-index: 101;
179+
position: fixed;
180+
top: -100%;
181+
right: 10%;
182+
padding: 2rem;
183+
border-radius: 2rem;
184+
box-sizing: border-box;
185+
transition: top 0.5s ease-in-out;
186+
}
187+
188+
.menu.show {
189+
top: 2rem;
190+
}
191+
192+
.menu-item {
193+
margin: 0.2rem;
194+
width: 100%;
195+
text-align: center;
196+
padding: 0.5rem;
197+
}

‎data/en-US.properties

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,6 @@ address_label = Kodi IP/Address (add :port if not port 80)
1010
address_input.placeholder = 192.168.1.10:8080
1111
prompt_username = Kodi requires authentication credentials. Please enter username:
1212
prompt_password = Please enter password:
13+
shutdown = Shutdown the system
14+
restart = Restart
15+
exit = Exit

‎data/sv-SE.properties

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,6 @@ address_label = Kodi IP/Adress (lägg till :port om inte port 80)
1010
address_input.placeholder = 192.168.1.10:8080
1111
prompt_username = Kodi kräver inloggning. Ange användarnamn:
1212
prompt_password = Ange lösenord:
13+
shutdown = Stäng av systemet
14+
restart = Starta om
15+
exit = Avsluta

‎index.html

Lines changed: 9 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -4,103 +4,19 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
66
<title data-l10n-id="app_title"></title>
7-
<style>
8-
html {
9-
background: #000;
10-
}
11-
12-
body {
13-
font-size: 16px;
14-
font-family: sans-serif;
15-
color: #fff;
16-
}
17-
18-
input, button {
19-
font-size: 2rem;
20-
border: none;
21-
border-radius: 0.5rem;
22-
}
23-
24-
button {
25-
min-width: 4rem;
26-
min-height: 4rem;
27-
margin: 0.3rem;
28-
padding: 0.1rem 0.2rem;
29-
background: #fff;
30-
color: #000;
31-
transition: background 0.3s, color 0.3s;
32-
}
33-
34-
button::-moz-focus-inner {
35-
border: none;
36-
}
37-
38-
button:focus {
39-
color: #000;
40-
}
41-
42-
button:active {
43-
background: #000;
44-
color: #fff;
45-
}
46-
47-
button[disabled] {
48-
background: #333;
49-
color: #555;
50-
}
51-
52-
button.small {
53-
min-width: 2.5rem;
54-
min-height: 2rem;
55-
}
56-
57-
input {
58-
width: 80%;
59-
box-sizing: border-box;
60-
padding: 0.2rem;
61-
}
62-
63-
input[type="range"] {
64-
background: transparent;
65-
margin-top: -0.5rem;
66-
margin-bottom: -1rem;
67-
}
68-
69-
input[type="text"] {
70-
font-size: 1.5rem;
71-
padding: 0.5rem;
72-
}
73-
74-
.center {
75-
text-align: center;
76-
z-index: 2;
77-
position: relative;
78-
}
79-
80-
label {
81-
position: relative;
82-
top: -0.2rem;
83-
}
84-
85-
.site-heading {
86-
position: absolute;
87-
color: #555;
88-
z-index: 1;
89-
transform: rotate(90deg);
90-
top: 5rem;
91-
left: -4.5rem;
92-
}
93-
94-
.hide {
95-
display: none;
96-
}
97-
</style>
98-
<script src="js/app.js" defer></script>
7+
<link rel="stylesheet" href="css/style.css">
998
<link rel="prefetch" type="application/l10n" href="data/locales.ini">
1009
<script src="js/libs/l10n.js" defer></script>
10+
<script src="js/app.js" defer></script>
10111
</head>
10212
<body>
10313
<h1 data-l10n-id="app_title" class="site-heading"></h1>
14+
<a disabled href="#power-options" id="power" class="power"></a>
15+
<ul id="power-options" class="menu">
16+
<li><button data-l10n-id="shutdown" class="menu-item" data-value="shutdown"></button></li>
17+
<li><button data-l10n-id="restart" class="menu-item" data-value="restart"></button></li>
18+
<li><button data-l10n-id="exit" class="menu-item" data-value="exit"></button></li>
19+
</ul>
10420
<div class="center">
10521
<button type="button" id="up">▲</button>
10622
</div>
@@ -121,7 +37,6 @@ <h1 data-l10n-id="app_title" class="site-heading"></h1>
12137
<button type="button" class="small" id="next">▶❙</button>
12238
</div>
12339
<div class="center">
124-
<!--<button type="button" disabled class="small" id="power">Power</button>-->
12540
<button type="button" class="small" id="stop">◾</button>
12641
<button type="button" class="small" id="home">🏠</button>
12742
<button type="button" class="small" id="info">ℹ</button>
@@ -142,5 +57,6 @@ <h1 data-l10n-id="app_title" class="site-heading"></h1>
14257
<input type="text" id="address" data-l10n-id="address_input">
14358
</p>
14459
</div>
60+
<div id="overlay" class="overlay"></div>
14561
</body>
14662
</html>

0 commit comments

Comments
 (0)