Mirrors/ICEcoder
2
0
Fork 0
mirror of https://github.com/icecoder/ICEcoder.git synced 2026-03-05 16:24:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

floatingContainer added and CSS class & pseudo set

Browse Source 
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
This commit is contained in:
Matt Pass
2015-06-25 13:33:00 +01:00
parent fe0436762c
commit 7b99febba1
2 changed files with 3 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.php
View File

@@ -121,6 +121,7 @@ $t = $text['index'];
<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">

2
lib/ice-coder.css
View File

@@ -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;