dark mode and websockets

[kismet-logviewer.git] / logviewer / static / css / layout.css

diff --git a/logviewer/static/css/layout.css b/logviewer/static/css/layout.css
index bcd77a3..309803a 100755 (executable)
--- a/logviewer/static/css/layout.css
+++ b/logviewer/static/css/layout.css
@@ -1,11 +1,27 @@
+:root {\r
+    --layout-link-color: #000;\r
+    --layout-link-hover-color: #333;\r
+    --layout-input-text-color: #000;\r
+    --layout-offset-background-color: #FFF;\r
+       --layout-offset-background-light-color: #e9e9e9;\r
+}\r
+\r
+[data-theme="dark"] {\r
+    --layout-link-color: #FFF;\r
+    --layout-link-hover-color: #BBB;\r
+    --layout-input-text-color: #FFF;\r
+    --layout-input-background-color: #444;\r
+    --layout-offset-background-color: #444;\r
+       --layout-offset-background-light-color: #666;\r
+}\r
+\r
 /*\r
 -----------------------------------------------\r
 Grey Box Method - Layout CSS\r
 ----------------------------------------------- */\r
 \r
 body {\r
-       background: #eee;\r
-       color: #333;\r
+    font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;\r
        font-size: 11px;\r
        padding: 0;\r
 }\r
@@ -14,12 +30,19 @@ body {
 /* anchors\r
 ----------------------------------------------- */\r
 a {\r
-       color: #000;\r
+       color: var(--layout-link-color);\r
        font-weight:bold;\r
        text-decoration: none;\r
 }\r
 a:hover {\r
-       color:#333;\r
+       color: var(--layout-link-hover-color);\r
+}\r
+\r
+/* input\r
+----------------------------------------------- */\r
+input { \r
+    color: var(--layout-input-text-color);\r
+    background-color: var(--layout-input-background-color);\r
 }\r
 \r
 \r
@@ -27,7 +50,6 @@ a:hover {
 ----------------------------------------------- */\r
 .container_12,\r
 .container_16 {\r
-       background:#fff;\r
 }\r
 \r
 \r
@@ -129,7 +151,7 @@ p {
        margin-bottom:1em;\r
 }\r
 blockquote {\r
-       font-family: Georgia, 'Times New Roman', serif;\r
+       xfont-family: Georgia, 'Times New Roman', serif;\r
        font-size:1.2em;\r
        padding-left:1em;\r
        border-left:4px solid #ccc;\r
@@ -185,14 +207,14 @@ ul.section li {
        text-transform:uppercase;\r
 }\r
 ul.section li a {\r
-       background:#bbb;\r
+       xbackground:#bbb;\r
 }\r
 ul.section li a:hover {\r
-       background:#aaa;\r
+       xbackground:#aaa;\r
 }\r
 ul.section li a:active {\r
        color:#fff;\r
-       background:#666;\r
+       xbackground:#666;\r
 }\r
 ul.section li li a {\r
        background:#ddd;\r
@@ -203,24 +225,24 @@ ul.section li li a:hover {
 }\r
 ul.section li li a:active {\r
        color:#000;\r
-       background:#fff;\r
+       xbackground:#fff;\r
 }\r
 ul.section ul li {\r
        text-transform:none;\r
 }\r
 ul.section ul.current li a {\r
-       background:#eee;\r
+       xbackground:#eee;\r
        border-bottom:1px solid #fff;\r
 }\r
 ul.section ul.current li a:hover {\r
-       background:#ddd;\r
+       xbackground:#ddd;\r
 }\r
 ul.section ul.current li a:active {\r
-       background:#fff;\r
+       xbackground:#fff;\r
 }\r
 ul.section li a.current {\r
        color:#fff;\r
-       background:#666;\r
+       xbackground:#666;\r
 }\r
 ul.section li a.current:hover {\r
        background:#555;\r
@@ -271,16 +293,16 @@ tbody th,
 tbody td {\r
        border-top:1px solid #bbb;\r
        border-bottom:1px solid #bbb;\r
-       background:#eee;\r
+       xbackground:#eee;\r
 }\r
 tbody tr.odd th,\r
 tbody tr.odd td {\r
-       background:#fff;\r
+       xbackground:#fff;\r
 }\r
 tfoot th,\r
 tfoot td {\r
        border-top:2px solid #666;\r
-       background:#eee;\r
+       background:#555;\r
 }\r
 tfoot tr.total th,\r
 tfoot tr.total td {\r
@@ -304,13 +326,13 @@ fieldset {
        border:1px solid #bbb;\r
        padding:10px;\r
        position:relative;\r
-       background:#e9e9e9;\r
+       background: var(--layout-offset-background-light-color);\r
        margin-bottom:10px;\r
 }\r
 legend {\r
        font-size:1.1em;\r
        padding:.4em .8em;\r
-       background:#fff;\r
+       background: var(--layout-offset-background-color);\r
        border:1px solid #bbb;\r
 }\r
 fieldset.login p {\r