Merge branch 'develop'

SimonAlling · Mar 17, 2017 · f1a91eb · f1a91eb
2 parents 34dc24e + bee69b6
commit f1a91eb
Show file tree

Hide file tree

Showing 18 changed files with 539 additions and 145 deletions.
diff --git a/ZATACKA.html b/ZATACKA.html
@@ -17,22 +17,22 @@
     <meta property="og:image"              content="http://kurve.se/resources/kurve-share.png" />
 
     <link rel="stylesheet" href="Zatacka.css" />
-    <link rel="apple-touch-icon" sizes="57x57" href="/resources/icon/apple-icon-57x57.png" />
-    <link rel="apple-touch-icon" sizes="60x60" href="/resources/icon/apple-icon-60x60.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="/resources/icon/apple-icon-72x72.png" />
-    <link rel="apple-touch-icon" sizes="76x76" href="/resources/icon/apple-icon-76x76.png" />
-    <link rel="apple-touch-icon" sizes="114x114" href="/resources/icon/apple-icon-114x114.png" />
-    <link rel="apple-touch-icon" sizes="120x120" href="/resources/icon/apple-icon-120x120.png" />
-    <link rel="apple-touch-icon" sizes="144x144" href="/resources/icon/apple-icon-144x144.png" />
-    <link rel="apple-touch-icon" sizes="152x152" href="/resources/icon/apple-icon-152x152.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/resources/icon/apple-icon-180x180.png" />
-    <link rel="icon" type="image/png" sizes="192x192"  href="/resources/icon/android-icon-192x192.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/resources/icon/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="96x96" href="/resources/icon/favicon-96x96.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/resources/icon/favicon-16x16.png" />
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" sizes="57x57" href="resources/icon/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="resources/icon/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="resources/icon/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="resources/icon/apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="resources/icon/apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="resources/icon/apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="resources/icon/apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="resources/icon/apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="resources/icon/apple-icon-180x180.png" />
+    <link rel="icon" type="image/png" sizes="192x192"  href="resources/icon/android-icon-192x192.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="resources/icon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="resources/icon/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="resources/icon/favicon-16x16.png" />
+    <link rel="manifest" href="manifest.json" />
     <meta name="msapplication-TileColor" content="#ffffff" />
-    <meta name="msapplication-TileImage" content="/resources/icon/ms-icon-144x144.png" />
+    <meta name="msapplication-TileImage" content="resources/icon/ms-icon-144x144.png" />
     <meta name="theme-color" content="#ffffff" />
 
     <script src="js/SupportCheck_JS.js"></script>
@@ -107,6 +107,7 @@ <h1>Achtung, die Kurve!</h1>
                 <a id="button-hide-settings" class="corner icon-button"></a>
                 <form id="settings-form"></form>
             </div>
+            <div id="dialogs" class="hidden overlay"></div>
         </div>
         </div>
         </div>
@@ -122,22 +123,15 @@ <h1>Achtung, die Kurve!</h1>
         </aside>
     </div>
 
-    <div id="debug">
-        <span id="debug_red"></span>
-        <span id="debug_yellow"></span>
-        <span id="debug_orange"></span>
-        <span id="debug_green"></span>
-        <span id="debug_pink"></span>
-        <span id="debug_blue"></span>
-    </div>
-
     <script src="js/strings.js"></script>
     <script src="js/lib/Queue.js"></script>
     <script src="js/lib/mainloop.min.js"></script>
     <script src="js/lib/Utilities.js"></script>
     <script src="js/lib/Message.js"></script>
     <script src="js/lib/InfoMessage.js"></script>
     <script src="js/lib/WarningMessage.js"></script>
+    <script src="js/lib/Dialog.js"></script>
+    <script src="js/lib/ConfirmationDialog.js"></script>
     <script src="js/locales/Zatacka.en_US.js"></script>
     <script src="js/lib/preferences/Preference.js"></script>
     <script src="js/lib/preferences/PreferenceWithValue.js"></script>

diff --git a/Zatacka.css b/Zatacka.css
@@ -64,22 +64,43 @@ input[type="radio"] + label::before {
 /* Actual checkbox: */
 input[type="checkbox"] + label::before {
     border: 1px white solid;
-    background-position: 0 0;
+    background-position: 0 -48px;
+}
+
+/* Actual checkbox on hover/focus: */
+input[type="checkbox"] + label:hover::before, input[type="checkbox"] + label:focus::before {
+    border: 1px white solid;
+    background-position: -16px -48px;
 }
 
 /* Actual checkbox when checked: */
 input[type="checkbox"]:checked + label::before {
-    background-position: 0 -48px;
+    background-position: -32px -48px;
+}
+
+/* Actual checkbox when checked on hover/focus: */
+input[type="checkbox"]:checked + label:hover::before, input[type="checkbox"]:checked + label:focus::before {
+    background-position: -48px -48px;
 }
 
 /* Actual radio button: */
 input[type="radio"] + label::before {
     background-position: 0 -64px;
 }
 
+/* Actual radio button on hover/focus: */
+input[type="radio"] + label:hover::before, input[type="radio"] + label:focus::before {
+    background-position: -16px -64px;
+}
+
 /* Actual radio button when checked: */
 input[type="radio"]:checked + label::before {
-    background-position: 0 -80px;
+    background-position: -32px -64px;
+}
+
+/* Actual radio button when checked on hover/focus: */
+input[type="radio"]:checked + label:hover::before, input[type="radio"]:checked + label:focus::before {
+    background-position: -48px -64px;
 }
 
 input[type="checkbox"] + label,
@@ -95,6 +116,29 @@ select {
     cursor: pointer;
 }
 
+button {
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    background-color: rgba(0, 0, 0, 0);
+    color: white;
+    height: 32px;
+    cursor: pointer;
+    width: calc(50% - 8px);
+}
+
+button:hover, button:focus, button:focus:active {
+    outline: none;
+}
+
+button:focus {
+    border-color: rgba(255, 255, 255, 1);
+    background-color: rgba(255, 255, 255, 0.03);
+}
+
+button:hover {
+    border-color: rgba(255, 255, 255, 1);
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
 .button {
     align-items: center;
     background-color: rgba(255, 255, 255, 0.16);
@@ -153,6 +197,10 @@ select {
     cursor: none;
 }
 
+.nocursor.tempcursor {
+    cursor: auto;
+}
+
 .icon-button {
     background-image: url("resources/kurve-icons.png");
     cursor: pointer;
@@ -171,29 +219,6 @@ select {
     top: 16px;
 }
 
-#debug {
-    background-color: black;
-    border: 1px white solid;
-    display: none;
-    left: 0;
-    position: fixed;
-    top: 0;
-    z-index: 50;
-}
-
-#debug span {
-    font-family: monospace;
-    font-size: 16px;
-    display: block;
-}
-
-#debug_red { color: #FF2800; }
-#debug_yellow { color: #C3C300; }
-#debug_orange { color: #FF7900; }
-#debug_green { color: #00CB00; }
-#debug_pink { color: #DF51B6; }
-#debug_blue { color: #00A2CB; }
-
 #wrapper {
     align-items: center;
     display: flex;
@@ -240,7 +265,7 @@ select {
 }
 
 .hidden {
-    display: none;
+    display: none !important;
 }
 
 .unobtrusive {
@@ -310,13 +335,16 @@ select {
 
 #settings {
     background-color: rgba(0, 0, 0, 0.95);
+}
+
+#settings {
     padding: 50px 80px 50px 80px;
 }
 
 #settings-form > div {
     box-sizing: border-box;
     margin: 12px 0;
-    opacity: 0.6;
+    opacity: 0.7;
 }
 
 #settings-form > div.half-width {
@@ -353,10 +381,6 @@ select {
     padding: 0 4px;
 }
 
-#settings-form input[type="checkbox"] + label {
-    margin-left: 13px; /* to align with fieldset content */
-}
-
 #settings-form fieldset input[type="radio"] + label {
     margin-left: 4px; /* to align with legend */
 }
@@ -418,6 +442,41 @@ select {
     display: block;
 }
 
+#dialogs {
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+}
+
+.dialog {
+    background-color: rgba(0, 0, 0, 0.9);
+    border: 1px solid white;
+    cursor: auto !important;
+    padding: 16px;
+    width: 240px;
+}
+
+.dialog p {
+    min-height: 64px;
+}
+
+.alert.dialog button {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.confirmation.dialog button {
+    margin-right: 16px;
+}
+
+.confirmation.dialog button:last-of-type {
+    margin-right: 0;
+}
+
+
+
 .canvasHeight {
     height: 480px;
 }

diff --git a/index.html b/index.html
@@ -18,22 +18,22 @@
 
     <link rel="stylesheet" href="Zatacka.css" />
     <link rel="stylesheet" href="kurve.se.css" />
-    <link rel="apple-touch-icon" sizes="57x57" href="/resources/icon/apple-icon-57x57.png" />
-    <link rel="apple-touch-icon" sizes="60x60" href="/resources/icon/apple-icon-60x60.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="/resources/icon/apple-icon-72x72.png" />
-    <link rel="apple-touch-icon" sizes="76x76" href="/resources/icon/apple-icon-76x76.png" />
-    <link rel="apple-touch-icon" sizes="114x114" href="/resources/icon/apple-icon-114x114.png" />
-    <link rel="apple-touch-icon" sizes="120x120" href="/resources/icon/apple-icon-120x120.png" />
-    <link rel="apple-touch-icon" sizes="144x144" href="/resources/icon/apple-icon-144x144.png" />
-    <link rel="apple-touch-icon" sizes="152x152" href="/resources/icon/apple-icon-152x152.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/resources/icon/apple-icon-180x180.png" />
-    <link rel="icon" type="image/png" sizes="192x192"  href="/resources/icon/android-icon-192x192.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/resources/icon/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="96x96" href="/resources/icon/favicon-96x96.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/resources/icon/favicon-16x16.png" />
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" sizes="57x57" href="resources/icon/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="resources/icon/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="resources/icon/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="resources/icon/apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="resources/icon/apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="resources/icon/apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="resources/icon/apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="resources/icon/apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="resources/icon/apple-icon-180x180.png" />
+    <link rel="icon" type="image/png" sizes="192x192"  href="resources/icon/android-icon-192x192.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="resources/icon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="resources/icon/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="resources/icon/favicon-16x16.png" />
+    <link rel="manifest" href="manifest.json" />
     <meta name="msapplication-TileColor" content="#ffffff" />
-    <meta name="msapplication-TileImage" content="/resources/icon/ms-icon-144x144.png" />
+    <meta name="msapplication-TileImage" content="resources/icon/ms-icon-144x144.png" />
     <meta name="theme-color" content="#ffffff" />
 
     <script src="js/SupportCheck_JS.js"></script>