beetroot_static/css/leaflet.css

@@ -658,4 +658,4 @@ svg.leaflet-image-layer.leaflet-interactive path {
 		-webkit-print-color-adjust: exact;
 		print-color-adjust: exact;
 		}
-	}
+	}

beetroot_static/src/less/disroot.less

@@ -3,49 +3,72 @@
  */
 
 :root {
-  --disroot-dark-black: #1f222b;
-  --disroot-purple: #50162d;
-  --disroot-purple-lighter: #61273e; //#80264a;
-  --disroot-purple-even-lighter: #83495f; //#e7518e;
-  --disroot-purple-darker: #201c1c;
-  --disroot-green: #8eb726;
-  --disroot-green-lighter: #afcf60;
-  --disroot-green-even-lighter: #cde78c;
-  --disroot-green-darker: #71911e;
-  --disroot-blueish: #1f5c60;
-  --disroot-blueish-lighter: #38989f;
-  --color-btn-font: white;
+  --disroot-white: #ddd;
+  --color-btn-font: #ddd;
+  /* background colors */
+  --disroot-lightmode: #ddd;
+  --disroot-darkmode: hsl(225, 16%, 15%); //#1f222b;
+  --disroot-darkmode-light: hsl(225, 15%, 20%); //#2b2f3b //#2a2e3a;
+  --disroot-darkmode-lighter: hsl(227, 14%, 25%); //#383c4a;
+  /* primary color light theme*/
+  //--primary-l-h: 336;
+  //--primary-l-s: 57%;
+  //--primary-l-l: 20%;
+  //--disroot-red: hsl(var(--primary-l-h), var(--primary-l-s), var(--primary-l-l));
+  //--disroot-red-light: hsl(var(--primary-l-h), calc(var(--primary-l-s) - 14%), calc(var(--primary-l-l) + 7%));
+  //--disroot-red-lighter: hsl(var(--primary-l-h), calc(var(--primary-l-s) - 23%), calc(var(--primary-l-l) + 13%));
+  //--disroot-red-even-lighter: hsl(var(--primary-l-h), calc(var(--primary-l-s) - 29%), calc(var(--primary-l-l) + 43%));
+  --disroot-red: hsl(336, 57%, 20%); //#50162d;
+  --disroot-red-light: hsl(336, 43%, 27%); //#61273e;
+  --disroot-red-lighter: hsl(336, 34%, 33%); //#72384f; 
+  --disroot-red-even-lighter:	hsl(336, 28%, 64%); //#bd899e; 
+  /* primary color dark theme*/
+  --disroot-green: hsl(77, 66%, 43%); //#8eb726;
+  --disroot-green-lighter: hsl(77, 54%, 59%); //#afcf60;
+  --disroot-green-even-lighter: hsl(77, 45%, 73%); //#c8d99b;
+  --disroot-green-darker: hsl(77, 66%, 34%); //#71911e;
+  /* secondary color */
+  --disroot-blueish: hsl(184, 51%, 25%); //#1f5c60;
+  --disroot-blueish-lighter: hsl(184, 30%, 44%); //#4f8f93;
+
   --color-url-font: var(--disroot-green);
   --color-url-visited-font: var(--disroot-blueish);
-  --color-header-background: var(--disroot-purple);
-  --color-btn-background: var(--disroot-purple);
-  --color-categories-item-selected-font: var(--disroot-purple-even-lighter);
-  --color-categories-item-border-selected: var(--disroot-purple-even-lighter);
-  --color-result-vim-arrow: var(--disroot-purple);
-  --color-result-link-font: var(--disroot-purple);
-  --color-result-link-font-highlight: var(--disroot-purple-even-lighter);
+  --color-header-background: var(--disroot-red-light);
+  --color-btn-background: var(--disroot-red-light);
+  --color-categories-item-selected-font: var(--disroot-red-even-lighter);
+  --color-categories-item-border-selected: var(--disroot-red-even-lighter);
+  --color-result-vim-arrow: var(--disroot-red-light);
+  --color-result-link-font: var(--disroot-red-light);
+  --color-result-link-font-highlight: var(--disroot-red-even-lighter);
   --color-result-link-visited-font: var(--disroot-green);
-  --color-toolkit-checkbox-onoff-on-mark-background: var(--disroot-purple);
-  --color-toolkit-checkbox-input-border: var(--disroot-purple);
-  --color-search-background-hover: var(--disroot-purple);
+  --color-toolkit-checkbox-onoff-on-mark-background: var(--disroot-red-light);
+  --color-toolkit-checkbox-input-border: var(--disroot-red-light);
+  --color-search-background-hover: var(--disroot-red-light);
 }
 .dark-themes() {
-  --color-base-background: var(--disroot-dark-black);
-  --color-base-background-mobile: var(--disroot-dark-black);
-  --color-url-font: var(--disroot-green);
-  --color-url-visited-font: var(--disroot-blueish-lighter);
-  --color-header-background: var(--disroot-purple-darker);
-  --color-btn-background: var(--disroot-purple);
+  --color-base-background: var(--disroot-darkmode-light);
+  --color-base-background-mobile: var(--disroot-darkmode-light);
+  --color-base-font: var(--disroot-white);
+  --color-search-background: none; //var(--disroot-white);
+  --color-search-shadow: var(--disroot-white);
+  --color-url-font: var(--disroot-red-even-lighter);
+  --color-url-visited-font: var(--disroot-blueish);
+  --color-header-background: var(--disroot-darkmode-light);
+  --color-footer-background: var(--disroot-darkmode-light);
+  --color-btn-background: var(--disroot-red-light);
   --color-btn-font: var(--color-base-font);
-  --color-categories-item-selected-font: var(--disroot-purple-even-lighter);
-  --color-categories-item-border-selected: var(--disroot-purple-even-lighter);
-  --color-result-vim-arrow: var(--disroot-purple);
-  --color-result-link-font: var(--disroot-purple-lighter);
-  --color-result-link-font-highlight: var(--disroot-purple-even-lighter);
-  --color-result-link-visited-font: var(--disroot-green);
-  --color-toolkit-checkbox-input-border: var(--disroot-purple-lighter);
-  --color-search-background-hover: var(--disroot-purple-lighter);
+  --color-categories-item-selected-font: var(--disroot-white);
+  --color-categories-item-border-selected: var(--disroot-red-even-lighter);
+  --color-result-vim-arrow: var(--disroot-red-light);
+  --color-result-vim-selected: var(--disroot-lighter);
+  --color-result-link-font: var(--disroot-green);
+  --color-result-link-font-highlight: var(--disroot-blueish);
+  --color-result-link-visited-font: var(--disroot-blueish-lighter);
+  --color-result-background: var(--disroot-darkmode);
+  --color-toolkit-checkbox-input-border: var(--disroot-red-lighter);
+  --color-search-background-hover: var(--disroot-red-lighter);
 }
+@results-margin: 0.325rem;
 // Category color
 .category label {
   color: var(--color-btn-font);
@@ -60,15 +83,35 @@
 .results_endpoint #links_on_top a:visited * {
   color: #fff !important;
 }
+.result {
+  background-color: var(--color-result-background);
+  border-radius: 2px;
+  margin-top: 1em;
+}
 
 // Navbar magnifying glass color
 #search_logo svg g circle,
 #search_logo svg g path {
-  stroke: var(--disroot-purple-even-lighter);
+  stroke: var(--disroot-red-even-lighter);
 }
 
 #search_logo svg g rect {
-  fill: var(--disroot-purple-even-lighter);
+  fill: var(--disroot-red-even-lighter);
+}
+
+#categories_container {
+  //background-color: var(--disroot-red);
+}
+
+//Search box
+.search_box {
+  background-color: var(--disroot-darkmode);
+  border: 0.5px groove var(--disroot-white);
+}
+
+//Cache link
+.cache_link:visited {
+//  color: var(--disroot-red);
 }
 
 //Logo
@@ -83,7 +126,7 @@
   margin-top: 13vh;
 }
 
-// Have a slightly more bright disroot purple color on logo png
+// Have a slightly more bright disroot red color on logo png
 // when in dark mode
 // .theme-dark .index .title {
 //   filter: brightness(1.25);
@@ -93,7 +136,7 @@
 //   filter: brightness(1.25);
 //}
 
-// Have a slightly more bright disroot purple color on logo
+// Have a slightly more bright disroot red color on logo
 #search_logo {
   filter: brightness(1.25);
 }