MAPG-147 [WIP]

MAPG-145 add CSS ::selection attribute

public/static/css/mapguesser.css

@@ -17,6 +17,11 @@ button::-moz-focus-inner, input::-moz-focus-inner {
     border: 0;
 }
 
+::selection {
+    background-color: #28a745;
+    color: #ffffff;
+}
+
 p, h1, h2, input, textarea, select, button, a {
     font-family: 'Roboto', sans-serif;
 }

views/maps.php

@@ -63,6 +63,63 @@ $cssFiles = [
         <?php endif; ?>
     </div>
 </div>
+
+<style>
+div.popup {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    width: 250px;
+}
+div.popup>div.content, div.popup>div.tipContainer>div.tip {
+    background: white;
+    color: #333;
+    border: solid #555 1px;
+}
+
+div.popup>div.content {
+    margin-top: 20px;
+    padding: 20px 10px 8px 10px;
+    border-radius: 3px;
+}
+
+div.popup>div.tipContainer {
+    width: 40px;
+    height: 20px;
+    position: absolute;
+    top: 1px;
+    left: 50%;
+    margin-left: -20px;
+    overflow: hidden;
+}
+
+div.popup>div.tipContainer>div.tip {
+    width: 20px;
+    height: 20px;
+    padding: 1px;
+    margin: 10px auto 0;
+    transform: rotate(45deg);
+}
+
+div.popup>a.closeButton {
+    position: absolute;
+    top: 20px;
+    right: 0;
+    padding: 2px 6px;
+    color: #555;
+}
+</style>
+
+<div class="popup">
+    <div class="tipContainer">
+        <div class="tip"></div>
+    </div>
+    <div class="content">
+        <p>A pretty CSS3 popup.<br>Easily customizable.</p>
+    </div>
+    <a class="closeButton" href="#close">×</a>
+</div>
+
 <?php if ($isAdmin): ?>
 <script>
     (function() {