diff options
| -rw-r--r-- | LICENSE | 2 | ||||
| -rw-r--r-- | Makefile | 10 | ||||
| -rw-r--r-- | image/bg.jpg (renamed from bg.jpg) | bin | 230938 -> 230938 bytes | |||
| -rw-r--r-- | image/cancel.png | bin | 0 -> 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.png | bin | 0 -> 3790 bytes | |||
| -rw-r--r-- | image/shutdown.png | bin | 0 -> 3477 bytes | |||
| -rw-r--r-- | index.html | 25 | ||||
| -rw-r--r-- | index.theme.in (renamed from index.theme) | 2 | ||||
| -rw-r--r-- | petrichor.css | 75 | ||||
| -rw-r--r-- | petrichor.js | 10 |
12 files changed, 117 insertions, 7 deletions
@@ -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. @@ -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' $^ > $@ Binary files differdiff --git a/image/cancel.png b/image/cancel.png Binary files differnew file mode 100644 index 0000000..4d6a0ca --- /dev/null +++ b/image/cancel.png 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 Binary files differnew file mode 100644 index 0000000..52695ec --- /dev/null +++ b/image/reboot.png diff --git a/image/shutdown.png b/image/shutdown.png Binary files differnew file mode 100644 index 0000000..d2a7b96 --- /dev/null +++ b/image/shutdown.png @@ -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; |
