Make session selector translucent until hover

2 files changed, 14 insertions, 3 deletions

diff --git a/index.html b/index.html
index 9f04ffa..067f8ed 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
 		<div id="message_container">
 			<span id="message_label"></span>
 		</div>
-		<select id="session_list"></select>
-		<img id="shutdown" src="iec5009.svg" onclick="lightdm.shutdown();" />
+		<select id="session_list" class="ease_opacity"></select>
+		<img id="shutdown" class="ease_opacity" src="iec5009.svg" onclick="lightdm.shutdown();" />
 	</body>
 </html>
diff --git a/petrichor.css b/petrichor.css
index 8ad5d38..1cb9696 100644
--- a/petrichor.css
+++ b/petrichor.css
@@ -13,6 +13,11 @@ body,html
 	width: 100%;
 }
 
+.ease_opacity
+{
+	transition: opacity ease 0.3s;
+}
+
 #shutdown
 {
 	position: absolute;
@@ -21,7 +26,6 @@ body,html
 	cursor: pointer;
 	opacity: 0.5;
 	width: 96px;
-	transition: opacity ease 0.3s;
 }
 
 .error-icon
@@ -137,6 +141,7 @@ a.user
 
 #session_list
 {
+	font-family: inherit;
 	position: absolute;
 	top: 50px;
 	left: 50px;
@@ -144,8 +149,14 @@ a.user
 	border-radius: 5px;
 	padding: 0.2em;
 	color: #333;
+	opacity: 0.5;
 	padding-right: 2em;
 	background: url('drop-down.svg') no-repeat right #FFF;
 	-webkit-appearance: none;
 	-moz-appearance: none; /* only for when testing */
 }
+
+#session_list:hover
+{
+	opacity: 1;
+}