test

README.md

@@ -20,3 +20,12 @@ Restart searx: `service uwsgi restart`
 
 ## NOTE:
 The minify versions of the css files are missing at the moment. So, to test things as they are now, edit `/var/www/searx/searx/templates/beetroot/base.html` and replace `<link rel="stylesheet" href="{{ url_for('static', filename='css/'+preferences.get_value('beetroot-style')+'.min.css') }}" type="text/css" />` by `<link rel="stylesheet" href="{{ url_for('static', filename='css/'+preferences.get_value('beetroot-style')+'.css') }}" type="text/css" />`
+
+## How to edit/change this theme
+- You have clone the upstream first: `git clone https://github.com/searxng/searxng.git searx`.
+- Copy the `static/themes/simple/src/less/definitions.less` from this repo to the clone.
+- Edit the `static/themes/simple/src/less/definitions.less` file of the clone with the colors you want.
+- Build the theme: in searx root folder, as the searx user, `make themes.simple`. (You make have to do this first `make node.env`)
+- Copy the css files from the clone back to this repo: `cp -r static/themes/simple/css/* /static/themes/beetroot/css/`
+
+If you want to test in live mode all your changes to the `Simple` theme, do `LIVE_THEME=simple make run` from searx root folder and edit the `static/themes/simple/src/less/definitions.less` file as you wish.

beetroot_static/css/leaflet.css

@@ -423,8 +423,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-control-attribution a:focus {
 	text-decoration: underline;
 	}
-.leaflet-control-attribution svg {
+.leaflet-attribution-flag {
 	display: inline !important;
+	vertical-align: baseline !important;
+	width: 1em;
+	height: 0.6669em;
 	}
 .leaflet-left .leaflet-control-scale {
 	margin-left: 5px;
@@ -438,12 +441,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	line-height: 1.1;
 	padding: 2px 5px 1px;
 	white-space: nowrap;
-	overflow: hidden;
 	-moz-box-sizing: border-box;
 	     box-sizing: border-box;
-
-	background: #fff;
-	background: rgba(255, 255, 255, 0.5);
+	background: rgba(255, 255, 255, 0.8);
+	text-shadow: 1px 1px #fff;
 	}
 .leaflet-control-scale-line:not(:first-child) {
 	border-top: 2px solid #777;
@@ -537,8 +538,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	}
 .leaflet-popup-scrolled {
 	overflow: auto;
-	border-bottom: 1px solid #ddd;
-	border-top: 1px solid #ddd;
 	}
 
 .leaflet-oldie .leaflet-popup-content-wrapper {
@@ -652,6 +651,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	/* Prevent printers from removing background-images of controls. */
 	.leaflet-control {
 		-webkit-print-color-adjust: exact;
-		color-adjust: exact;
+		print-color-adjust: exact;
 		}
-	}
+	}

beetroot_static/src/less/definitions.less

@@ -11,10 +11,10 @@
   --color-base-font-rgb: 68, 68, 68;
   --color-base-background: #fff;
   --color-base-background-mobile: #f2f5f8;
-  --color-url-font: #334999;
-  --color-url-visited-font: #9822c3;
+  --color-url-font: var(--disroot-green);
+  --color-url-visited-font: var(--disroot-blueish);
   /// Header Colors
-  --color-header-background: #fdfbff;
+  --color-header-background: var(--disroot-purple); //#fdfbff;
   --color-header-border: #ddd;
   /// Footer Colors
   --color-footer-background: #fdfbff;
@@ -28,7 +28,7 @@
   --color-backtotop-border: #ddd;
   --color-backtotop-background: #fff;
   /// Button Colors
-  --color-btn-background: #3050ff;
+  --color-btn-background: var(--disroot-purple);
   --color-btn-font: #fff;
   --color-show-btn-background: #bbb;
   --color-show-btn-font: #000;
@@ -46,8 +46,8 @@
   --color-success: #42db34;
   --color-success-background: lighten(#42db34, 40%);
   /// Categories Colors
-  --color-categories-item-selected-font: #3050ff;
-  --color-categories-item-border-selected: #3050ff;
+  --color-categories-item-selected-font: var(--disroot-purple-even-lighter);
+  --color-categories-item-border-selected: var(--disroot-purple-even-lighter);
   /// Autocomplete Colors
   --color-autocomplete-font: #000;
   --color-autocomplete-border: #bbb;
@@ -62,11 +62,11 @@
   --color-result-border: #ddd;
   --color-result-url-font: #000;
   --color-result-vim-selected: #f7f7f7;
-  --color-result-vim-arrow: #000bbb;
+  --color-result-vim-arrow: var(--disroot-purple);
   --color-result-description-highlight-font: #000;
-  --color-result-link-font: #000bbb;
-  --color-result-link-font-highlight: #000bbb;
-  --color-result-link-visited-font: #9822c3;
+  --color-result-link-font: var(--disroot-purple);
+  --color-result-link-font-highlight: var(--disroot-purple-even-lighter);
+  --color-result-link-visited-font: var(--disroot-green);
   --color-result-publishdate-font: #777;
   --color-result-engines-font: #545454;
   --color-result-search-url-border: #ddd;
@@ -102,13 +102,13 @@
   --color-toolkit-input-text-font: #222;
   --color-toolkit-checkbox-onoff-off-background: #ddd;
   --color-toolkit-checkbox-onoff-on-background: #ddd;
-  --color-toolkit-checkbox-onoff-on-mark-background: #3050ff;
+  --color-toolkit-checkbox-onoff-on-mark-background: var(--disroot-purple);
   --color-toolkit-checkbox-onoff-on-mark-color: #fff;
   --color-toolkit-checkbox-onoff-off-mark-background: #aaa;
   --color-toolkit-checkbox-onoff-off-mark-color: #fff;
   --color-toolkit-checkbox-label-background: #ddd;
   --color-toolkit-checkbox-label-border: #ddd;
-  --color-toolkit-checkbox-input-border: #3050ff;
+  --color-toolkit-checkbox-input-border: var(--disroot-purple);
   --color-toolkit-engine-tooltip-border: #ddd;
   --color-toolkit-engine-tooltip-background: #fff;
   --color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
@@ -229,6 +229,8 @@
   --color-doc-code-background: #300;
 }
 
+@import "disroot.less";
+
 /// Dark Theme (autoswitch based on device pref)
 @media (prefers-color-scheme: dark) {
   :root.theme-auto {
@@ -274,4 +276,4 @@
 
 // decoration of the select HTML elements
 @select-light-svg-path:   "../svg/select-light.svg";
-@select-dark-svg-path:    "../svg/select-dark.svg";
+@select-dark-svg-path:    "../svg/select-dark.svg";

beetroot_static/src/less/disroot.less

@@ -0,0 +1,25 @@
+/*
+ * Disroot flavor
+ */
+
+:root {
+  --disroot-purple: #50162D;
+  --disroot-purple-lighter: #611332;
+  --disroot-purple-even-lighter: #e7518e;
+  --disroot-purple-darker: #201c1c;
+  --disroot-green: #8EB726;
+  --disroot-green-lighter: #afcf60;
+  --disroot-green-even-lighter: #cde78c;
+  --disroot-green-darker: #71911E;
+  --disroot-blueish: #1F5C60;
+}
+
+// Category color
+.category label {
+    color: #c0bbbb;
+  }
+
+// Navbar links in right corner only on results page
+#main_results #links_on_top a, #main_results #links_on_top a:active *, #main_results #links_on_top a:hover *, #main_results #links_on_top a:link *, #main_results #links_on_top a:visited * {
+	color: #fff !important;
+}