updated logging, added theming, added settings button

static/css/dark.css

@@ -0,0 +1,74 @@
+:root {
+    --html-bg: #1c1c1c;
+    --font-fg: #f1f3f4;
+    --fg: #BABCBE;
+
+    --search-bg: #161616;
+    --search-bg-input: #333333;
+    --search-bg-input-border: #3C4043;
+    --search-select: #282828;
+
+    --border: #303134;
+
+    --link: #8ab4f8;
+    --link-visited: #c58af9;
+
+    --snip-border: #303134;
+    --snip-background: #282828;
+    --snip-text: #f1f3f4;
+
+    --settings-border: #5f6368;
+    --button: #333333;
+
+    --footer-bg: #161616;
+    --footer-font: #999da2;
+
+    --highlight: #bcc0c3;
+
+    --blue: #8ab4f8;
+
+    --green: #31b06e;
+
+    --search-button: #BABCBE;
+    
+    --image-view: #161616;
+    --image-view-titlebar: #161616;
+    --view-image-color: #000000;
+    --image-select: #303030;
+    --fff: #fff;
+
+    --publish-info: #7f869e;
+    
+    color-scheme: dark;
+}
+
+.calc-btn:hover {
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.calc-btn-2:hover {
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.calc-btn-2 {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+}
+
+.calc-btn {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+}
+
+.calc {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.view-image-search {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+}
+
+.view-image-search:hover {
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}

static/css/light.css

@@ -0,0 +1,72 @@
+:root {
+    --html-bg: #ffffff;
+    --font-fg: #000000;
+    --fg: #202124;
+
+    --search-bg: #ffffff;
+    --search-bg-input: #f6f6f6;
+    --search-bg-input-border: #dadce0;
+    --search-select: #eeeeee;
+
+    --border: #dadce0;
+
+    --link: #1a0dab;
+    --link-visited: #681da8;
+
+    --snip-border: #dadce0;
+    --snip-background: #ffffff;
+    --snip-text: #000000;
+
+    --settings-border: #5f6368;
+    --button: #f6f6f6;
+
+    --footer-bg: #f6f6f6;
+    --footer-font: #353535;
+
+    --highlight: #202124;
+
+    --blue: #4285f4;
+
+    --green: #202124;
+    
+    --image-view: #ffffff;
+    --image-view-titlebar: #ffffff;
+    --view-image-color: #f1f3f4;
+    --image-select: #f6f6f6;
+    --fff: #fff;
+
+    --publish-info: #202124;
+
+    --search-button: #202124;
+}
+
+.wrapper-results:hover,
+.wrapper-results:focus-within,
+.wrapper:hover,
+.wrapper:focus-within {
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08) !important;
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1) !important;
+}
+
+.check p {
+    color: var(--highlight) !important;
+}
+
+.image_view {
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08) !important;
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1) !important;
+}
+
+.search-menu {
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08) !important;
+}
+
+.view-image-search {
+    box-shadow: none;
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1) !important;
+}
+
+.view-image-search:hover {
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08) !important;
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1) !important;
+}

static/css/style.css

@@ -120,6 +120,7 @@
 }
 
 .clean {
+    margin-top: 30px;
     max-width: 775px;
 }
 
@@ -556,7 +557,7 @@ hr {
     left: 0;
     right: 0;
     z-index: 2;
-    border: 2px solid var(--search-bg-input-border);
+    border: 1px solid var(--search-bg-input-border);
 }
 
 .wrapper input {
@@ -689,7 +690,8 @@ hr {
 }
 
 .kno_wiki_show {
-    display: initial !important;
+  display: initial !important;
+  border-radius: 6px;
 }
 
 .open-in-new-tab * {
@@ -796,6 +798,7 @@ form.torrent-sort {
     transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
     border: 1px solid var(--border);
     border-radius: 10px;
+    top: 24px;
 }
 
 .search-menu h2 {
@@ -1164,7 +1167,7 @@ p {
     background-color: inherit;
     font-size: 14px;
     font-family: 'Inter';
-    margin-right: 10px;
+    margin-right: 14px;
     color: var(--search-button);
     margin-top: 72px;
     padding-bottom: 11px;
@@ -1218,6 +1221,10 @@ p {
     margin-top: -2px;
 }
 
+.link {
+    color: var(--link);
+}
+
 .results a:visited h3,
 .result_sublink a:visited h3 {
     color: var(--link-visited);
@@ -1236,6 +1243,7 @@ p {
 .results p,
 .result_sublink p {
     margin-top: 0px;
+    color: var(--font-fg);
 }
 
 .results a,
@@ -1245,6 +1253,7 @@ p {
 .result_sublink a:hover,
 .result_sublink a:visited {
     text-decoration: none;
+    /* color: #ebecf7; */
     font-size: 14px;
 }
 
@@ -1287,6 +1296,12 @@ p {
     font-size: 22px;
 }
 
+.wiki_known_for {
+  margin: 0px;
+  font-weight: normal;
+  margin-bottom: 10px;
+}
+
 .snip img {
     float: right;
     max-width: 30%;
@@ -1295,8 +1310,7 @@ p {
     margin-left: 10px;
 }
 
-.snip a {
-    display: block;
+.snip .wiki_link {
     margin-top: 10px;
     text-decoration: none;
     color: var(--link);
@@ -1310,6 +1324,28 @@ p {
     text-decoration: underline;
 }
 
+.snip .about {
+  font-size: 18px;
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.factpoint {
+  color: var(--fg);
+  font-weight: bold;
+  vertical-align: text-top;
+  text-align: left;
+  padding-right: 14px;
+}
+
+.fact a {
+  color: var(--link);
+  text-decoration: none;
+}
+.fact a:visited {
+  color: var(--link-visited);
+}
+
 .snipp {
     padding: 10px;
     border-bottom: 1px solid var(--border);
@@ -1690,7 +1726,7 @@ body, h1, p, a, input, button {
         margin-top: 0px;
         top: 0px;
         left: 0px;
-        background-color: var(--search-bg);
+        /* background-color: var(--search-bg); */
     }
 
     .mobile-none {
@@ -1860,8 +1896,7 @@ body, h1, p, a, input, button {
         color: var(--link) !important;
     }
 }
-
-/* Variables for light theme */
+/* 
 :root {
     --background-color: #ffffff;
     --text-color: #000000;
@@ -1890,7 +1925,6 @@ body, h1, p, a, input, button {
     --box-shadow: #00000020; 
 }
 
-/* Styles for dark theme */
 @media (prefers-color-scheme: dark) {
     :root {
         --background-color: #202124;
@@ -1919,4 +1953,4 @@ body, h1, p, a, input, button {
         --green: #8ab4f8;
         --box-shadow: #ffffff20; 
     }
-}
+} */