playing around with opacity

2 files changed, 31 insertions, 5 deletions

diff --git a/public/default.css b/public/default.css
index e6f7ecd..0021c38 100644
--- a/public/default.css
+++ b/public/default.css
@@ -108,19 +108,42 @@ div.displayclean li .info {
 }
 
 div.displayclean li .moreinfo {
+	position:fixed;
+	top:0em;
+	left:0em;
+	right:0em;
+	bottom:0em;
+	z-index: 4;
+	display: none;
+}
+
+div.displayclean li .moreinfo-bgbox {
+	display: block;
+	position: absolute;
+	top:0em;
+	left:0em;
+	right:0em;
+	bottom:0em;
+	background-color: black;
+	z-index: 5;
+	opacity: 0.8;
+}
+
+div.displayclean li .moreinfo-inner {
+	position:absolute;
 	color:#000000;
 	font-size:2.1em;
-	position:fixed;
 	top:1em;
 	left:1em;
 	right:1em;
 	min-height: 1em;
 	max-height: 90%;
 	background-color: white;
-	border: 0.2em inset #666666;
-	z-index: 5;
-	display: none;
+	border: 0.2em solid black;
+	z-index: 6;
 	overflow: auto;
+	display: block;
+	opacity: 1;
 }
 
 div.displayclean li .collapsed-moreinfo {
diff --git a/templates/clean.html.ep b/templates/clean.html.ep
index 61ee6d6..f53b90b 100644
--- a/templates/clean.html.ep
+++ b/templates/clean.html.ep
@@ -50,6 +50,8 @@
       </span>
 %   }
     <span class="moreinfo">
+    <div class="moreinfo-bgbox"></div>
+    <span class="moreinfo-inner">
     <div class="mheader">
     <span class="train-line"><%= $departure->{train_type} // q{???} %></span><!--
  --><span class="train-line"><%= $departure->{train_line} // q{} %></span>
@@ -138,7 +140,8 @@
 %     }
       </ul>
 %   }
-    </span>
+    </span> <!-- moreinfo-inner -->
+    </span> <!-- moreinfo -->
 %   if ($departure->{info} and length $departure->{info}) {
       <span class="info">
 %=    $departure->{info}