jdb/lightdm-uestibulum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working on theme. Added power panel and background.

Browse Source
This commit is contained in:
Jonathan Bernard 2016-11-18 00:25:40 -06:00
parent c519afd3f6
commit 2fd4ea998f
4 changed files with 74 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
css/lightdm-uestibulum.css Normal file
View File

@ -0,0 +1,52 @@
* { margin: 0; padding: 0; }
body {
font-family: sans-serif
}
#bg {
position: fixed;
width: 100%;
display: block;
bottom: 0;
right: 0;
z-index: -1;
}
#power-panel {
color: white;
cursor: pointer;
background: rgba(8, 8, 8, 0.3);
box-shadow: 0px 0px 1em 1em (8, 8, 8, 0.3);
position: absolute;
bottom: 2em;
opacity: 0.5;
right: 2em;
transition: 1s;
}
#power-options {
border-radius: 10px;
padding: 1em;
transition: 1s;
display: none;
}
#power-panel.active #power-options {
display: block;
}
#power-panel.active #power-button { display: none; }
#power-options ul { list-style: none; }
#power-options li {
margin-bottom: 1em;
font-size: 200%;
}
#power-options li:last-child {
margin-bottom: 0;
}

BIN
img/background.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

53
index.html
View File

@ -5,56 +5,23 @@
<title>Uestibulum Greeter</title>
<link rel=stylesheet href=css/font-awesome.min.css >
<style type="text/css">
* { margin: 0; padding: 0; }
#bg {
position: fixed;
width: 100%;
display: block;
bottom: 0;
right: 0;
z-index: -1;
}
#power-panel {
position: absolute;
bottom: 2em;
right: 2em;
cursor: pointer;
}
#power-options {
background: rgba(0,0,0, 0.3);
opacity: 0;
transition: 1s;
}
#power-options.visible { opacity: 1; }
#power-options ul {
list-style: none;
}
</style>
<script type="application/javascript">
funciton showPowerOptions() {
}
</script>
<link rel=stylesheet href=css/lightdm-uestibulum.css >
</head>
<body>
<img id=bg src="bg.jpg">
<div id=power-panel>
<img id=bg src="img/background.jpg">
<div id=power-panel onmouseout='hidePowerOptions(event)'>
<div id=power-button onclick='showPowerOptions()'><i class="fa fa-power-off fa-3x"></i></div>
<div id=power-options>
<div id=power-options class=visible>
<ul>
<li><i class='fa fa-3x fa-moon-o'></i> Suspend</li>
<li><i class='fa fa-3x fa-refresh'></i> Restart</li>
<li><i class='fa fa-3x fa-power-off'></i> Shutdown</li>
<li><i class='fa fa-moon-o'></i> Suspend</li>
<li><i class='fa fa-refresh'></i> Restart</li>
<li><i class='fa fa-power-off'></i> Shutdown</li>
</ul>
</div>
</div>
<script type=application/javascript src=js/lightdm-uestibulum.js ></script>
</body>
</html>

12
js/lightdm-uestibulum.js Normal file
View File

@ -0,0 +1,12 @@
var powerOptionsEl = document.getElementById("power-options")
var powerPanelClasses = document.getElementById("power-panel").classList;
function showPowerOptions() {
powerPanelClasses.add('active');
}
function hidePowerOptions(e) {
console.log(e.target);
if (e.target != powerOptionsEl) return;
powerPanelClasses.remove('active');
}