Switch to dark theme

Author: SamuelTallet

static/css/mpg.css

@@ -1,13 +1,35 @@
 :root {
 
-    --mpg-color-light: #7bcc29;
-    --mpg-color-regular: #6eb825;
-    --mpg-color-dark: #5dad1d;
+    --mpg-background-color: rgb(64, 64, 64);
+    --mpg-brand-color-darker: hsl(93, 71%, 40%);
+    --mpg-brand-color-lighter: hsl(90, 67%, 48%);
+    --mpg-brand-color: hsl(90, 67%, 43%);
+    --mpg-code-background-color: rgb(51, 51, 51);
+    --mpg-code-padding: 10px;
+    --mpg-danger-color: hsl(354, 70%, 54%);
+    --mpg-info-color: hsl(188, 78%, 41%);
+    --mpg-json-boolean-color: hsl(351, 94%, 83%);
+    --mpg-json-key-color: hsl(174, 68%, 56%);
+    --mpg-json-number-color: hsl(120, 67%, 75%);
+    --mpg-json-string-color: hsl(39, 84%, 50%);
+    --mpg-primary-color-darker: hsl(252, 53%, 50%);
+    --mpg-primary-color: hsl(252, 53%, 55%);
+    --mpg-secondary-color: hsl(45, 100%, 51%);
+    --mpg-secondary-color-darker: hsl(45, 100%, 45%);
+    --mpg-text-color: white;
 
 }
 
+*:focus {
+
+    box-shadow: none !important;
+
+}
+
 body {
 
+    background-color: var(--mpg-background-color);
+    color: var(--mpg-text-color);
     font-family: Arial, sans-serif;
 
 }
@@ -33,14 +55,13 @@ body {
         -ms-flex-pack: start;
         justify-content: flex-start;
 
-    
     }
 
 }
 
 .bg-dark {
 
-    background-color: var(--mpg-color-dark) !important;
+    background-color: var(--mpg-brand-color-darker) !important;
 
 }
 
@@ -90,10 +111,8 @@ body {
 
     .navbar-brand, .navbar-nav .nav-link {
 
-        top: 15px;
-        padding-top: 10px;
-        padding-bottom: 15px;
-    
+        /* FIXME */
+
     }
 
     .navbar-nav {
@@ -123,9 +142,9 @@ body {
     display: block;
     position: absolute;
     right: 10px;
-    top: 10px;
+    top: 14px;
 
-    color: white;
+    color: var(--mpg-text-color);
 
 }
 
@@ -139,12 +158,15 @@ body {
 
 }
 
-.navbar-nav .nav-link.active {
+.navbar-nav .nav-link {
 
-    background-color: white;
-    color: black !important;
+    opacity: 0.5;
+
+}
+
+.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
 
-    border-radius: 5px;
+    opacity: 1;
 
 }
 
@@ -199,29 +221,83 @@ button, input {
 
 }
 
+.CodeMirror,
+.json-container {
+
+    background-color: var(--mpg-code-background-color);
+    font-family: Consolas, monospace;
+    padding: var(--mpg-code-padding);
+
+}
+
+.CodeMirror .cm-keyword {
+
+    color: var(--mpg-json-string-color);
+
+}
+
+.CodeMirror .cm-variable, /* Cf. Relaxed JSON syntax. */
+.CodeMirror .cm-property,
+.json-container .json-key {
+
+    color: var(--mpg-json-key-color);
+
+}
+
+.CodeMirror .cm-string,
+.json-container .json-string {
+
+    color: var(--mpg-json-string-color);
+
+}
+
+.CodeMirror .cm-number,
+.json-container .json-number {
+
+    color: var(--mpg-json-number-color);
+
+}
+
+.CodeMirror .cm-atom,
+.json-container .json-boolean {
+
+    color: var(--mpg-json-boolean-color);
+
+}
+
 .CodeMirror {
 
-    width: 100%;
+    border: none;
+    color: var(--mpg-text-color);
     height: auto;
+    margin-bottom: 10px;
     min-height: 60px;
+    width: 100%;
 
-    margin-bottom: 10px;
-    border: 1px solid #ddd;
+}
 
-    font-family: Consolas, monospace;
+.CodeMirror .CodeMirror-selected {
+
+    background-color: black;
+
+}
+
+li.CodeMirror-hint-active {
+
+    background-color: var(--mpg-brand-color);
 
 }
 
 .CodeMirror .mpg-history-pop-button {
 
+    background: none;
+    border: none;
+    color: var(--mpg-text-color);
     position: absolute;
-    right: 0;
-    top: 0;
+    right: 8px;
+    top: 8px;
     z-index: 100;
 
-    border: none;
-    background: none;
-
 }
 
 .CodeMirror .mpg-history-pop-button:focus {
@@ -230,16 +306,16 @@ button, input {
 
 }
 
-.CodeMirror-hints {
+.CodeMirror-cursor {
 
-    font-family: Consolas, monospace;
-    font-size: 100%;
+    border-color: var(--mpg-text-color);
 
 }
 
-.json-container {
+.CodeMirror-hints {
 
     font-family: Consolas, monospace;
+    font-size: 100%;
 
 }
 
@@ -252,14 +328,13 @@ button, input {
 
 .json-container .json-value[data-document-field-is-updatable="true"]:hover {
 
-    cursor: url("../images/edit-icon-32x32.png") 16 16, text;
-    outline: 1.5px solid #ddd;
+    cursor: url("../images/pencil-icon.svg") 16 16, text;
 
 }
 
-.json-container .json-string {
+.json-container .json-value {
 
-    min-width: 50px; /* This hack allows empty string update. */
+    min-width: 50px; /* This hack allows update of a short or empty value. */
 
 }
 
@@ -269,6 +344,20 @@ button, input {
 
 }
 
+.mpg-database-link, .mpg-collection-link {
+
+    color: var(--mpg-text-color);
+
+}
+
+.mpg-database-link:hover, .mpg-collection-link:hover,
+.mpg-database-link.active, .mpg-collection-link.active {
+
+    color: var(--mpg-brand-color);
+    font-weight: bold;
+
+}
+
 #mpg-find-button, #mpg-delete-one-button {
 
     margin-left: 10px;
@@ -277,15 +366,15 @@ button, input {
 
 .btn-success {
 
-    background-color: var(--mpg-color-regular);
-    border-color: var(--mpg-color-regular);
+    background-color: var(--mpg-brand-color);
+    border-color: var(--mpg-brand-color);
 
 }
 
 .btn-success:hover, .btn-success:focus {
 
-    background-color: var(--mpg-color-dark);
-    border-color: var(--mpg-color-dark);
+    background-color: var(--mpg-brand-color-darker);
+    border-color: var(--mpg-brand-color-darker);
 
 }
 
@@ -295,6 +384,35 @@ button, input {
 
 }
 
+.btn-primary {
+
+    background-color: var(--mpg-primary-color);
+    border-color: var(--mpg-primary-color);
+
+}
+
+.btn-primary:hover, .btn-primary:focus {
+
+    background-color: var(--mpg-primary-color-darker) !important;
+    border-color: var(--mpg-primary-color-darker) !important;
+
+}
+
+.btn-secondary {
+
+    background-color: var(--mpg-secondary-color);
+    border-color: var(--mpg-secondary-color);
+    color: black !important;
+
+}
+
+.btn-secondary:hover, .btn-secondary:focus {
+
+    background-color: var(--mpg-secondary-color-darker) !important;
+    border-color: var(--mpg-secondary-color-darker) !important;
+
+}
+
 #mpg-export-button, #mpg-open-create-user-modal-button {
 
     position: relative;
@@ -317,6 +435,31 @@ button, input {
 
 }
 
+.alert {
+
+    border: none;
+    color: var(--mpg-text-color);
+
+}
+
+.alert-danger {
+
+    background-color: var(--mpg-danger-color);
+
+}
+
+.alert-info {
+
+    background-color: var(--mpg-info-color);
+
+}
+
+.alert-success {
+
+    background-color: var(--mpg-brand-color-darker);
+
+}
+
 .alert-dismissible {
 
     width: fit-content;
@@ -339,7 +482,24 @@ button, input {
 
 }
 
-.table td {
+#mpg-users-table,
+#mpg-indexes-table {
+
+    background-color: white;
+
+}
+
+#mpg-users-table thead th,
+#mpg-indexes-table thead th {
+
+    background-color: var(--mpg-code-background-color);
+    border: none;
+    color: var(--mpg-text-color);
+
+}
+
+#mpg-users-table tbody td,
+#mpg-indexes-table tbody td {
 
     vertical-align: middle;
 
@@ -352,6 +512,12 @@ button, input {
 
 }
 
+#mpg-create-user-modal label {
+
+    color: black;
+
+}
+
 @media screen and (min-width: 768px) {
 
     #mpg-create-user-modal {

static/images/edit-icon-32x32.png

@@ -36,7 +36,8 @@ var JsonView = (function (exports) {
         documentFieldName = params.documentFieldName;
 
     // XXX Modification made for MongoDB PHP GUI.
-    return "\n    <div class=\"line\">\n      <div class=\"empty-icon\"></div>\n      <div class=\"json-key\">".concat(key, "</div>\n      <div class=\"json-separator\">:</div>\n      <div data-document-id=\"" + documentId + "\" data-document-field-is-updatable=\"" + documentFieldIsUpdatable + "\" data-document-field-name=\"" + documentFieldName + "\" data-document-field-type=\"" + type + "\" class=\"json-value json-").concat(type, "\">").concat(value, "</div>\n    </div>\n  ");
+    var title = ( documentFieldIsUpdatable === 'true' ) ? 'Edit value' : '';
+    return "\n    <div class=\"line\">\n      <div class=\"empty-icon\"></div>\n      <div class=\"json-key\">".concat(key, "</div>\n      <div class=\"json-separator\">:</div>\n      <div data-document-id=\"" + documentId + "\" data-document-field-is-updatable=\"" + documentFieldIsUpdatable + "\" data-document-field-name=\"" + documentFieldName + "\" data-document-field-type=\"" + type + "\" title=\"" + title + "\" class=\"json-value json-").concat(type, "\">").concat(value, "</div>\n    </div>\n  ");
   }
 
   function hideNodeChildren(node) {