aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--LICENSE2
-rw-r--r--Makefile10
-rw-r--r--image/bg.jpg (renamed from bg.jpg)bin230938 -> 230938 bytes
-rw-r--r--image/cancel.pngbin0 -> 1125 bytes
-rw-r--r--image/drop-down.svg (renamed from drop-down.svg)0
-rw-r--r--image/iec5009.svg (renamed from iec5009.svg)0
-rw-r--r--image/reboot.pngbin0 -> 3790 bytes
-rw-r--r--image/shutdown.pngbin0 -> 3477 bytes
-rw-r--r--index.html25
-rw-r--r--index.theme.in (renamed from index.theme)2
-rw-r--r--petrichor.css75
-rw-r--r--petrichor.js10
12 files changed, 117 insertions, 7 deletions
diff --git a/LICENSE b/LICENSE
index 171e2d3..30eccb6 100644
--- a/LICENSE
+++ b/LICENSE
@@ -13,7 +13,7 @@ modification, are permitted provided that the following conditions are met:
this list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
- and/or other materials provided with the distribution.
+ and/or other materials provided with the distribution.
3. The name of the author may not be used to endorse or promote products
derived from this software without specific prior written permission.
diff --git a/Makefile b/Makefile
index 889509f..a30c6fc 100644
--- a/Makefile
+++ b/Makefile
@@ -1,5 +1,7 @@
PREFIX=/usr/
DESTDIR=
+VERSION=1.0
+
THEME_FILES=\
index.html \
@@ -10,8 +12,9 @@ THEME_FILES=\
iec5009.svg \
drop-down.svg
-all:
+.PHONY: all install
+all: $(THEME_FILES)
install:
for f in $(THEME_FILES) ; do \
@@ -19,3 +22,8 @@ install:
done
install -Dm 644 LICENSE "$(DESTDIR)/$(PREFIX)/share/licenses/petrichor/LICENSE"
+clean:
+ rm index.theme
+
+index.theme: index.theme.in
+ sed -e 's/{VERSION}/$(VERSION)/g' $^ > $@
diff --git a/bg.jpg b/image/bg.jpg
index 5ad178e..5ad178e 100644
--- a/bg.jpg
+++ b/image/bg.jpg
Binary files differ
diff --git a/image/cancel.png b/image/cancel.png
new file mode 100644
index 0000000..4d6a0ca
--- /dev/null
+++ b/image/cancel.png
Binary files differ
diff --git a/drop-down.svg b/image/drop-down.svg
index 9dafd13..9dafd13 100644
--- a/drop-down.svg
+++ b/image/drop-down.svg
diff --git a/iec5009.svg b/image/iec5009.svg
index ec62caa..ec62caa 100644
--- a/iec5009.svg
+++ b/image/iec5009.svg
diff --git a/image/reboot.png b/image/reboot.png
new file mode 100644
index 0000000..52695ec
--- /dev/null
+++ b/image/reboot.png
Binary files differ
diff --git a/image/shutdown.png b/image/shutdown.png
new file mode 100644
index 0000000..d2a7b96
--- /dev/null
+++ b/image/shutdown.png
Binary files differ
diff --git a/index.html b/index.html
index 5fa7934..6b1b34d 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,30 @@
<div id="message-container">
<span id="message-label"></span>
</div>
+ <a id="mask" href="#" onclick="hide_element('power-confirm');hide_element('mask');"></a>
+ <div id="power-confirm" onclick="document.getElementById('mask').click();">
+ <ul>
+ <li>
+ <a class="button" href="#" onclick="lightdm.shutdown();">
+ <div class="icon" id="icon-shutdown"></div>
+ <span>Power off</span>
+ </a>
+ </li>
+ <li>
+ <a class="button" href="#" onclick="lightdm.restart();">
+ <div class="icon" id="icon-reboot"></div>
+ <span>Restart</span>
+ </a>
+ </li>
+ <li>
+ <a class="button" href="#" onclick="hide_element('power-confirm');hide_element('mask');">
+ <div class="icon" id="icon-cancel"></div>
+ <span>Cancel</span>
+ </a>
+ </li>
+ </ul>
+ </div>
<select id="session-list" class="ease-opacity"></select>
- <img id="shutdown" class="ease-opacity" src="iec5009.svg" onclick="lightdm.shutdown();" />
+ <img id="shutdown" class="ease-opacity" src="image/iec5009.svg" onclick="show_element('power-confirm');show_element('mask');" />
</body>
</html>
diff --git a/index.theme b/index.theme.in
index 13639be..c1e6a14 100644
--- a/index.theme
+++ b/index.theme.in
@@ -1,6 +1,6 @@
[theme]
name=Petrichor
-version=1.0
+version={VERSION}
description=Petrichor Theme
engine=lightdm-webkit2-greeter
url=index.html
diff --git a/petrichor.css b/petrichor.css
index 72d1b6e..a8ef1ad 100644
--- a/petrichor.css
+++ b/petrichor.css
@@ -1,7 +1,7 @@
html
{
color: #FFF;
- background-image: url('bg.jpg');
+ background-image: url('image/bg.jpg');
background-size: cover;
font-family: "Roboto Condensed";
}
@@ -18,6 +18,75 @@ body,html
transition: opacity ease 0.3s;
}
+#mask
+{
+ text-align: center;
+ transition: visibility 0s linear 0.15s, opacity 0.15s linear;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ bottom: 0px;
+ background-color: rgba(0,0,0,0.7);
+ visibility: hidden;
+ opacity: 0;
+}
+
+#power-confirm
+{
+ position: absolute;
+ left: 50%;
+ bottom: 50px;
+ visibility: hidden;
+ opacity: 0;
+}
+
+#power-confirm > ul
+{
+ display: inline-block;
+ margin: 0px 0px 0px -50%;
+}
+
+#power-confirm li
+{
+ text-align: center;
+ list-style: none;
+ display: inline-block;
+ margin-left: 2em;
+ margin-right: 2em;
+}
+
+#power-confirm li a
+{
+ text-decoration: none;
+ color: inherit;
+ font-size: 1.5em;
+ display: inline-block;
+}
+
+#power-confirm li div
+{
+ display: block;
+ height: 96px;
+ width: 96px;
+ border-radius: 48px;
+}
+
+#icon-shutdown
+{
+ background: url('image/shutdown.png') #C33;
+}
+
+#icon-reboot
+{
+ background: url('image/reboot.png') #33C;
+}
+
+#icon-cancel
+{
+ background: url('image/cancel.png') #3C3;
+}
+
#shutdown
{
position: absolute;
@@ -106,7 +175,7 @@ a.user
transition: visibility 0s linear 0.15s, opacity 0.15s linear;
}
-#password-container.shown, #message-container.shown
+#password-container.shown, #message-container.shown, #mask.shown, #power-confirm.shown
{
visibility: visible;
opacity: 1;
@@ -151,7 +220,7 @@ a.user
color: #333;
opacity: 0.5;
padding-right: 2em;
- background: url('drop-down.svg') no-repeat right #FFF;
+ background: url('image/drop-down.svg') no-repeat right #FFF;
-webkit-appearance: none;
-moz-appearance: none; /* only for when testing */
}
diff --git a/petrichor.js b/petrichor.js
index b5e06ed..fa4a100 100644
--- a/petrichor.js
+++ b/petrichor.js
@@ -2,6 +2,16 @@ password_prompt = false;
selected_user = null;
time_remaining = 0
+function show_element(id)
+{
+ document.getElementById(id).classList.add("shown");
+}
+
+function hide_element(id)
+{
+ document.getElementById(id).classList.remove("shown");
+}
+
function show_prompt(text, type)
{
password_prompt = true;