floatingContainer added and CSS class & pseudo set

mattpass · mattpass · commit 7b99febba1bf · 2015-06-25T13:33:00.000+01:00
DOM elem has an ID as a hook so we can target later
Class sets a 55px square block for a 11x11 grid of 5px squares, hidden
to begin with, also with border for contrast and image-rendering value
of pixelated, so we get sharp pixels squares at our 5x zoom
Pseudo class added, 3px square as it has a 1px border, positioned to sit
over the 6th square (centre) in our 11px square grid
diff --git a/index.php b/index.php
@@ -121,6 +121,7 @@
 	<div class="popupVCenter">
 		<div class="popup" id="mediaContainer"></div>
 	</div>
+	<div class="floatingContainer" id="floatingContainer"></div>
 </div>
 
 <div id="loadingMask" class="blackMask" style="visibility: visible" onContextMenu="return false">
diff --git a/lib/ice-coder.css b/lib/ice-coder.css
@@ -31,6 +31,8 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
 .blackMask {position: fixed; display: table; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; background-color: rgba(0,0,0,0.8); text-align: center; z-index: 100}
 .blackMask .popupVCenter {#position: absolute; display: table-cell; #top: 50%; vertical-align: middle; text-align: center}
 .popupVCenter .popup {#position: relative; #top: -50%; text-align: center; color: #fff; font-size: 10px}
+.floatingContainer {position: absolute; top: 0; left: 0; width: 55px; height: 55px; visibility: hidden; border: solid 1px #444; image-rendering: pixelated}
+.floatingContainer:before {position: absolute; display: inline-block; width: 3px; height: 3px; left: 25px; top: 25px; content: ''; border: solid 1px #b00}
 .whiteGlow {box-shadow: 0 0 8px 2px rgba(255,255,255,0.6)}
 
 .spinner {width: 50px; height: 50px; margin: 20px auto; background: #fff;
