searx

searx.css (4002B)

html, body {
  background-color: #002b36;
  color: #839496;
}
#main, #main_results {
  display: table;
  margin: auto;
}
#search {
  display: flex;
  margin: auto 15%;
  flex-direction: column;
  max-width: 80em;
}
#search > * {
  display: flex;
  flex-direction: row;
  /* width: 100%; */
}
#search > * > * {
  flex: auto;
  margin: .1em .5em;
}
#search #safesearch, #search #send_search {
  flex: 1;
}
#search #q {
  flex: 4;
  min-width: 30ch;
}
#results {
  margin: 0 2em;
}
#pagination_prev {
	float: left;
}
#pagination_next {
	float: right;
}
code, pre {
  font-family: monospace;
  background: #073642;
  word-break: break-all;
  word-wrap: break-word;
}
#linkto_preferences {
  position: absolute;
  font-size: x-large;
}
header {
  font-size: xx-large;
  color: #3498DB;
  font-weight: bold;
}
footer, header {
  margin: .5em;
  text-align: center;
  vertical-align: center;
  clear: both;
}
a {
  color: #3498DB;
  text-decoration: none;
}
input, button, select {
  padding: .10em .25em;
  margin: 0;
  border: 0;
  border-radius: .25em;
  background: #073642;
  color: unset;
  display: inline-table;
}
input[type=submit], button {
  cursor: pointer;
}
a {
  color: #3498DB;
}
p {
  max-width: 80em;
  margin: 0;
}
#sidebar {
  float: right;
  min-width: 25ch;
  max-width: 50ch;
  margin-left: .5em;
  padding-left: .5em;
  border-left: 1pt solid;
}
#sidebar p, #suggestions {
  max-width: 60em;
}
aside.infobox img {
  display: inline-table;
  float: left;
  margin-right: 1em;
}
#suggestions form {
  display: inline;
}

dt, dd {
  display: inline-table;
}
dd {
  margin-inline-start: 0.5em;
}
dl {margin: 0;}

#categories div {
  display: inline-block;
}
#search_main, #search_filters {
  display: flex;
}

.highlight {
  text-decoration-line: underline;
}

.tabs input[type=radio], #categories input {display: none;}
.tabs input[type=radio]:checked + label, #categories input:checked + label {
  background: #3498DB;
  color: #000;
}
.tabs label, #categories label {
  padding: 0 1em;
  margin: 0 .5em;
  flex-grow: 1;
  display: block;
  text-align: center;
}

#apis div {
  display: inline-block;
}

.engines, .url {
  display: inline-block;
}

.engines span, .url a, .url span {
  margin: 0 .25em;
}

/*images*/
.result-images, .result-videos {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.result-images img, .result-videos img {
  min-width: 5em;
  min-height: 5em;
  max-width: 250px;
  max-height: 250px;
}
img {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAABGdBTUEAALGPC/xhBQAAAAJiS0dEAP+Hj8y/AAAAB3RJTUUH3wwIAAgyL/YaPAAAACJJREFUCFtjfMbOAAQ/gZiFnQPEBAEmGIMIJgtIL8QEgtoAIn4D/96X1KAAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMTItMDhUMDA6MDg6NTArMDM6MDAasuuJAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE1LTEyLTA4VDAwOjA4OjUwKzAzOjAwa+9TNQAAAABJRU5ErkJggg==") repeat scroll #fff; /* taken from uMatrix */
}
.result-images span a, .result-videos span a {
  display: none;
  color: #FFF;
  position: absolute;
  bottom: 0;
  right: 0;
}
.result-images:hover span a, .result-videos:hover span a {
  display: block;
  padding: .25em;
  background-color: rgba(0,0,0,.6);
}

.category-social img {
  float: left;
  margin: .5em;
}
.category-social {
  display: table;
}
.category-social h3 {
  margin: 0;
}

/* Preferences */
.tabs {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 100%;
}
.tabs > * { order: 2; }
.tabs > label {
  order: 1;
  border-bottom: 2px solid #084999;
}
.tabs > section {
  display: none;
  min-width: 100%;
}
.tabs > input:checked + label + section {
  display: unset;
}
.tabs>input:checked~section {
  display: none;
}
.dialog-error strong {
  color: orange;
}
#main_stats .left {
	float: left;
}

/* When the device isn’t large enough */
@media (max-width: 69ch) {
  #search > * {
    flex-direction: column !important;
  }
  #search > * > * {
    margin: .2em 0;
  }
  #send_search {
    order: 1;
    margin-bottom: .75em;
  }
  #q {
    order: 2;
  }
  #safesearch {
    order: 3;
  }
}