summaryrefslogtreecommitdiff
path: root/searx/static/themes/simple/less
diff options
context:
space:
mode:
Diffstat (limited to 'searx/static/themes/simple/less')
-rw-r--r--searx/static/themes/simple/less/autocomplete.less67
-rw-r--r--searx/static/themes/simple/less/code.less83
-rw-r--r--searx/static/themes/simple/less/definitions.less135
-rw-r--r--searx/static/themes/simple/less/index.less43
-rw-r--r--searx/static/themes/simple/less/ion.less174
-rw-r--r--searx/static/themes/simple/less/mixins.less62
-rw-r--r--searx/static/themes/simple/less/normalize.less447
-rw-r--r--searx/static/themes/simple/less/preferences.less78
-rw-r--r--searx/static/themes/simple/less/search.less232
-rw-r--r--searx/static/themes/simple/less/stats.less8
-rw-r--r--searx/static/themes/simple/less/style-rtl.less6
-rw-r--r--searx/static/themes/simple/less/style.less709
-rw-r--r--searx/static/themes/simple/less/toolkit.less346
13 files changed, 2390 insertions, 0 deletions
diff --git a/searx/static/themes/simple/less/autocomplete.less b/searx/static/themes/simple/less/autocomplete.less
new file mode 100644
index 000000000..0a90d0df8
--- /dev/null
+++ b/searx/static/themes/simple/less/autocomplete.less
@@ -0,0 +1,67 @@
+@background_color: white;
+
+.autocomplete {
+ position: absolute;
+ max-height: 0;
+ overflow-y: hidden;
+ text-align: left;
+
+ &:active, &:focus, &:hover {
+ background-color: @background_color;
+ }
+
+ &:empty {
+ display: none;
+ }
+
+ > ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+
+ > li {
+ cursor: pointer;
+ padding: 5px 0 5px 10px;
+
+ &.active, &:active, &:focus {
+ background-color: @color-base;
+
+ a:active, a:focus, a:hover {
+ text-decoration: none;
+ }
+ }
+
+ &.locked {
+ cursor: inherit;
+ }
+ }
+ }
+
+ &.open {
+ display: block;
+ background-color: @background_color;
+ border: 1px solid @color-base;
+ max-height: 500px;
+ overflow-y: auto;
+ z-index:100;
+
+ &:empty {
+ display: none;
+ }
+ }
+}
+
+
+@media screen and (max-width: @results-width) {
+
+ .autocomplete {
+ bottom: 0;
+ }
+
+ .autocomplete > ul > li {
+ padding: 7px 0 7px 10px;
+ border-bottom: 1px solid @color-result-top-border;
+ text-align: left;
+ }
+
+}
diff --git a/searx/static/themes/simple/less/code.less b/searx/static/themes/simple/less/code.less
new file mode 100644
index 000000000..a688dd98d
--- /dev/null
+++ b/searx/static/themes/simple/less/code.less
@@ -0,0 +1,83 @@
+.highlight .hll { background-color: #ffffcc }
+.highlight { background: #f8f8f8; }
+.highlight .c { color: #408080; font-style: italic } /* Comment */
+.highlight .err { border: 1px solid #FF0000 } /* Error */
+.highlight .k { color: #008000; font-weight: bold } /* Keyword */
+.highlight .o { color: #666666 } /* Operator */
+.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
+.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00A000 } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0044DD } /* Generic.Traceback */
+.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #008000 } /* Keyword.Pseudo */
+.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #B00040 } /* Keyword.Type */
+.highlight .m { color: #666666 } /* Literal.Number */
+.highlight .s { color: #BA2121 } /* Literal.String */
+.highlight .na { color: #7D9029 } /* Name.Attribute */
+.highlight .nb { color: #008000 } /* Name.Builtin */
+.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
+.highlight .no { color: #880000 } /* Name.Constant */
+.highlight .nd { color: #AA22FF } /* Name.Decorator */
+.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #0000FF } /* Name.Function */
+.highlight .nl { color: #A0A000 } /* Name.Label */
+.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #19177C } /* Name.Variable */
+.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #666666 } /* Literal.Number.Float */
+.highlight .mh { color: #666666 } /* Literal.Number.Hex */
+.highlight .mi { color: #666666 } /* Literal.Number.Integer */
+.highlight .mo { color: #666666 } /* Literal.Number.Oct */
+.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
+.highlight .sc { color: #BA2121 } /* Literal.String.Char */
+.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
+.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
+.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
+.highlight .sx { color: #008000 } /* Literal.String.Other */
+.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
+.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
+.highlight .ss { color: #19177C } /* Literal.String.Symbol */
+.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #19177C } /* Name.Variable.Class */
+.highlight .vg { color: #19177C } /* Name.Variable.Global */
+.highlight .vi { color: #19177C } /* Name.Variable.Instance */
+.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
+
+.highlight pre {
+ overflow: auto;
+}
+
+.highlight .lineno {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
+
+ &::selection {
+ background: transparent; /* WebKit/Blink Browsers */
+ }
+ &::-moz-selection {
+ background: transparent; /* Gecko Browsers */
+ }
+}
diff --git a/searx/static/themes/simple/less/definitions.less b/searx/static/themes/simple/less/definitions.less
new file mode 100644
index 000000000..7a43720b8
--- /dev/null
+++ b/searx/static/themes/simple/less/definitions.less
@@ -0,0 +1,135 @@
+/*
+ * searx, A privacy-respecting, hackable metasearch engine
+ *
+ * To change the colors of the site, simple edit this variables
+ */
+
+/// Basic Colors
+
+@color-base: #3498DB;
+@color-base-dark: #084999;
+@color-base-light: #ECF0F1;
+@color-highlight: #094089;
+@color-black: #000000;
+
+///
+@color-error: #db3434;
+@color-error-background: lighten(@color-error, 40%);
+
+@color-warning: #dbba34;
+@color-warning-background: lighten(@color-warning, 40%);
+
+/// General
+
+@color-font: #444;
+@color-font-light: #888;
+
+@color-red: #25a55b;
+
+@color-url-font: #29314d;
+@color-url-visited-font: #684898;
+@results-width: 50em;
+@search-width: 40em;
+
+//
+@color-a-font: @color-base;
+@color-a-font-hover: @color-base;
+
+
+/// Start-Screen
+
+
+
+/// Search-Input
+
+@color-search-border: @color-base;
+@color-search-background: #FFF;
+@color-search-font: #222;
+
+/// Autocompleter
+
+@color-autocompleter-choices-background: #FFF;
+@color-autocompleter-choices-border: @color-base;
+@color-autocompleter-choices-border-left-right: @color-base;
+@color-autocompleter-choices-border-bottom: @color-base;
+
+@color-autocompleter-choices-font: #444;
+
+/// Answers
+@color-answers-border: @color-base-dark;
+
+// Selected
+@color-autocompleter-selected-background: #444;
+@color-autocompleter-selected-font: #FFF;
+@color-autocompleter-selected-queried-font: #9FCFFF;
+
+/// Categories
+
+@color-categories-item-selected: @color-base;
+@color-categories-item-selected-font: #FFF;
+
+@color-categories-item-border-selected: @color-base-dark;
+@color-categories-item-border-unselected: #E8E7E6;
+@color-categories-item-border-unselected-hover: @color-base;
+
+
+/// Results
+
+@color-suggestions-button-background: @color-base;
+@color-suggestions-button-font: #FFF;
+
+@color-download-button-background: @color-base;
+@color-download-button-font: #FFF;
+
+@color-result-search-background: @color-base-light;
+
+@color-result-definition-border: gray;
+@color-result-torrent-border: lightgray;
+@color-result-top-border: #E8E7E6;
+
+// Link to result
+@color-result-link-font: @color-base-dark;
+@color-result-link-visited-font: @color-url-visited-font;
+
+// Url to result
+@color-result-url-font: @color-red;
+
+// Publish Date
+@color-result-publishdate-font: @color-font-light;
+
+// Images
+@color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
+@color-result-image-span-font: #FFF;
+
+// Search-URL
+@color-result-search-url-border: #888;
+@color-result-search-url-font: #444;
+
+
+/// Settings
+
+@color-settings-fieldset: @color-base;
+@color-settings-table-striped: #dbdbdb;
+@color-settings-tr-hover: #ececec;
+
+// Labels
+@color-settings-label-allowed-background: #E74C3C;
+@color-settings-label-allowed-font: #FFF;
+
+@color-settings-label-deny-background: #2ECC71;
+@color-settings-label-deny-font: @color-font;
+
+@color-settings-return-background: @color-base;
+@color-settings-return-font: #FFF;
+
+/// Other
+
+@color-engines-font: @color-font-light;
+@color-percentage-div-background: #444;
+
+/// Load fonts from this directory.
+@icon-font-path: "../../../fonts/";
+//** File name for all font files.
+@icon-font-name: "glyphicons-halflings-regular";
+//** Element ID within SVG icon file.
+@icon-font-svg-id: "glyphicons_halflingsregular";
diff --git a/searx/static/themes/simple/less/index.less b/searx/static/themes/simple/less/index.less
new file mode 100644
index 000000000..e1efdac90
--- /dev/null
+++ b/searx/static/themes/simple/less/index.less
@@ -0,0 +1,43 @@
+.index {
+
+ text-align: center;
+
+ .title {
+ background: url('../img/searx.png') no-repeat;
+ width: 100%;
+ min-height: 80px;
+ background-position: center;
+ }
+
+ h1 {
+ font-size: 5em;
+ visibility: hidden;
+ }
+
+ #search {
+ margin: 0 auto;
+ background: inherit;
+ border: inherit;
+ }
+
+ .search_filters {
+ display: block;
+ margin: 1em 0;
+ }
+
+ .category label {
+ padding: 6px 10px;
+ border-bottom: initial !important;
+ }
+
+}
+
+@media screen and (max-width: 75em) {
+
+ div.title {
+ h1 {
+ font-size: 1em;
+ }
+ }
+
+}
diff --git a/searx/static/themes/simple/less/ion.less b/searx/static/themes/simple/less/ion.less
new file mode 100644
index 000000000..9ec6b9955
--- /dev/null
+++ b/searx/static/themes/simple/less/ion.less
@@ -0,0 +1,174 @@
+// Generated by grunt-webfont
+
+
+@font-face {
+ font-family:"ion";
+ src:url("../fonts/ion.eot?94af7082ea096aefe3a7b6642834716e");
+ src:url("../fonts/ion.eot?#iefix") format("embedded-opentype"),
+ url("../fonts/ion.woff2?94af7082ea096aefe3a7b6642834716e") format("woff2"),
+ url("../fonts/ion.woff?94af7082ea096aefe3a7b6642834716e") format("woff"),
+ url("../fonts/ion.ttf?94af7082ea096aefe3a7b6642834716e") format("truetype"),
+ url("../fonts/ion.svg?94af7082ea096aefe3a7b6642834716e#ion") format("svg");
+ font-weight:normal;
+ font-style:normal;
+}
+
+.ion-icon {
+ &:before {
+ font-family:"ion";
+ }
+ display:inline-block;
+ vertical-align:middle;
+ line-height:1;
+ font-weight:normal;
+ font-style:normal;
+ speak:none;
+ text-decoration:inherit;
+ text-transform:none;
+ text-rendering:auto;
+ -webkit-font-smoothing:antialiased;
+ -moz-osx-font-smoothing:grayscale;
+}
+
+
+// Icons
+
+.ion-navicon-round {
+ &:before {
+ content:"\f101";
+ }
+}
+
+
+.ion-search {
+ &:before {
+ content:"\f102";
+ }
+}
+
+
+.ion-play {
+ &:before {
+ content:"\f103";
+ }
+}
+
+
+.ion-link {
+ &:before {
+ content:"\f104";
+ }
+}
+
+
+.ion-chevron-up {
+ &:before {
+ content:"\f105";
+ }
+}
+
+
+.ion-chevron-left {
+ &:before {
+ content:"\f106";
+ }
+}
+
+
+.ion-chevron-right {
+ &:before {
+ content:"\f107";
+ }
+}
+
+
+.ion-arrow-down-a {
+ &:before {
+ content:"\f108";
+ }
+}
+
+
+.ion-arrow-up-a {
+ &:before {
+ content:"\f109";
+ }
+}
+
+
+.ion-arrow-swap {
+ &:before {
+ content:"\f10a";
+ }
+}
+
+
+.ion-arrow-dropdown {
+ &:before {
+ content:"\f10b";
+ }
+}
+
+
+.ion-globe {
+ &:before {
+ content:"\f10c";
+ }
+}
+
+
+.ion-time {
+ &:before {
+ content:"\f10d";
+ }
+}
+
+
+.ion-location {
+ &:before {
+ content:"\f10e";
+ }
+}
+
+
+.ion-warning {
+ &:before {
+ content:"\f10f";
+ }
+}
+
+
+.ion-error {
+ &:before {
+ content:"\f110";
+ }
+}
+
+
+.ion-film-outline {
+ &:before {
+ content:"\f111";
+ }
+}
+
+
+.ion-music-note {
+ &:before {
+ content:"\f112";
+ }
+}
+
+
+.ion-more-vertical {
+ &:before {
+ content:"\f113";
+ }
+}
+
+
+.ion-magnet {
+ &:before {
+ content:"\f114";
+ }
+}
+
diff --git a/searx/static/themes/simple/less/mixins.less b/searx/static/themes/simple/less/mixins.less
new file mode 100644
index 000000000..097ab4964
--- /dev/null
+++ b/searx/static/themes/simple/less/mixins.less
@@ -0,0 +1,62 @@
+/*
+* searx, A privacy-respecting, hackable metasearch engine
+*/
+
+// Mixins
+.text-size-adjust (@property: 100%) {
+ -webkit-text-size-adjust: @property;
+ -ms-text-size-adjust: @property;
+ -moz-text-size-adjust: @property;
+ text-size-adjust: @property;
+}
+
+.rounded-corners (@radius: 4px) {
+ -webkit-border-radius: @radius;
+ -moz-border-radius: @radius;
+ border-radius: @radius;
+}
+
+// disable user selection
+.disable-user-select () {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+// select all on focus
+.select-all-on-focus() {
+ -webkit-user-select: all;
+ -moz-user-select: all;
+ -ms-user-select: all;
+ user-select: all;
+}
+
+// see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox
+.flexbox() {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.inline-flex() {
+ display: -webkit-inline-box;
+ display: -moz-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+}
+
+.flex-direction-row() {
+ -webkit-box-direction: normal;
+ -webkit-box-orient: horizontal;
+ -moz-box-direction: normal;
+ -moz-box-orient: horizontal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
diff --git a/searx/static/themes/simple/less/normalize.less b/searx/static/themes/simple/less/normalize.less
new file mode 100644
index 000000000..fa4e73dd4
--- /dev/null
+++ b/searx/static/themes/simple/less/normalize.less
@@ -0,0 +1,447 @@
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ * IE on Windows Phone and in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+ display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+ margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+ background-color: transparent; /* 1 */
+ -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+ font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+ background-color: #ff0;
+ color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+ display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+ border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: sans-serif; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ * controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Scripting
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+ display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+ display: none;
+}
+
+/* Hidden
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/searx/static/themes/simple/less/preferences.less b/searx/static/themes/simple/less/preferences.less
new file mode 100644
index 000000000..b8e096cd5
--- /dev/null
+++ b/searx/static/themes/simple/less/preferences.less
@@ -0,0 +1,78 @@
+#main_preferences {
+ form {
+ width: 100%;
+ }
+
+ fieldset {
+ margin: 8px;
+ border: none;
+ }
+
+ legend {
+ margin: 0;
+ padding: 5px 0 0 0;
+ display: block;
+ float:left;
+ width: 300px;
+ }
+
+ .value {
+ margin: 0;
+ padding: 0;
+ float:left;
+ width: 15em;
+ }
+
+ .description {
+ margin: 0;
+ padding: 5px 0 0 0;
+ float:left;
+ width: 50%;
+ color: darken(#dcdcdc, 30%);
+ font-size: 90%;
+ }
+
+ select {
+ width: 200px;
+ font-size: inherit !important;
+ }
+
+ table {
+ border-collapse: collapse;
+ }
+
+ table td {
+ text-align: center;
+ }
+
+ .name, .shortcut {
+ text-align: left;
+ }
+
+ .preferences_back {
+ background: none repeat scroll 0 0 @color-settings-return-background;
+ color: white;
+ border: 0 none;
+ .rounded-corners;
+ cursor: pointer;
+ display: inline-block;
+ margin: 2px 4px;
+ padding: 0.5em;
+
+ a {
+ display: block;
+ color: @color-settings-return-font;
+ }
+
+ a::first-letter {
+ text-transform: uppercase;
+ }
+ }
+
+}
+
+@media screen and (max-width: 75em) {
+ .preferences_back {
+ clear: both;
+ }
+}
diff --git a/searx/static/themes/simple/less/search.less b/searx/static/themes/simple/less/search.less
new file mode 100644
index 000000000..beeac3e8a
--- /dev/null
+++ b/searx/static/themes/simple/less/search.less
@@ -0,0 +1,232 @@
+/*
+* searx, A privacy-respecting, hackable metasearch engine
+*/
+
+#search {
+ padding: 0 2em;
+ margin: 0;
+ background: #f7f7f7;
+ border-bottom: 1px solid #d7d7d7;
+}
+
+#search_wrapper {
+ padding: 10px 0;
+}
+
+.search_box {
+ margin: 0 12px 0 0;
+ display: inline-flex;
+ flex-direction: row;
+
+ white-space: nowrap;
+ /*
+ &:has(q:focus) {
+ box-shadow: 0px 0px 5px #CCC;
+}
+*/
+}
+
+#q, #send_search {
+ display: block !important;
+ border-collapse: separate;
+ box-sizing: border-box;
+ position: relative;
+
+ margin: 0;
+ padding: 2px;
+ height: 2.2em;
+ background: none repeat scroll 0 0 @color-search-background;
+ border: 1px solid @color-search-border;
+ border-radius: 0px;
+ outline: none;
+ color: @color-search-font;
+ font-size: 16px;
+ z-index: 2;
+}
+
+#q {
+ outline: medium none;
+ padding-left: 8px;
+ padding-right: 0px !important;
+ border-right: none;
+ width: @search-width;
+}
+
+#send_search {
+ border-left: none;
+ width: 2.2em;
+
+ &:hover {
+ cursor: pointer;
+ background-color: @color-search-border;
+ color: @color-base-light;
+ }
+}
+
+.no-js #send_search {
+ width: auto !important;
+}
+
+.search_filters {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+@media screen and (max-width: 75em) {
+
+ #categories {
+ font-size: 90%;
+ clear: both;
+
+ .checkbox_container {
+ margin-top: 2px;
+ margin: auto;
+ }
+ }
+
+ html.touch {
+ #main_index, #main_results {
+
+ #categories_container {
+ width: 1000px;
+ width: -moz-max-content;
+ width: -webkit-max-content;
+ width: max-content;
+
+ .category {
+ display: inline-block;
+ width: auto;
+ }
+ }
+
+ #categories {
+ width: 100%;
+ margin: 0;
+ text-align: left;
+ overflow-x: scroll;
+ overflow-y: hidden;
+ -webkit-overflow-scrolling: touch;
+ }
+ }
+ }
+
+}
+
+@media screen and (max-width: @results-width) {
+
+ #search {
+ width: 100%;
+ margin: 0;
+ padding: 0.1em 0 0 0;
+ }
+
+ #search_wrapper {
+ width: 100%;
+ margin: 0 0 0.7em 0;
+ padding: 0;
+ }
+
+ .search_box {
+ // hack, should bew 100% ?
+ width: 99%;
+ margin: 0.1em;
+ padding: 0 0.1em 0 0;
+ display: flex;
+ flex-direction: row;
+ }
+
+ #q {
+ width: auto !important;
+ flex: 1;
+ }
+
+ .search_filters {
+ display: block;
+ margin: 0.5em;
+ }
+
+ .language, .time_range {
+ width: 45%;
+ }
+
+ .category {
+ display: block;
+ width: 90%;
+
+ label {
+ border-bottom: 0;
+ }
+ }
+
+}
+
+#categories {
+ margin: 0 10px 0 0;
+ .disable-user-select;
+
+ &::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+ }
+}
+
+.category {
+ display: inline-block;
+ position: relative;
+ margin: 0 3px;
+ padding: 0px;
+
+ input {
+ display: none;
+ }
+
+ label {
+ cursor: pointer;
+ padding: 4px 10px;
+ margin: 0;
+ display: block;
+ text-transform: capitalize;
+ font-size: 0.9em;
+ border-bottom: 2px solid transparent;
+ .disable-user-select;
+ }
+
+ input[type="checkbox"]:focus + label {
+ box-shadow: 0px 0px 8px #3498DB;
+ }
+
+ /*label:hover {
+ border-bottom: 2px solid @color-categories-item-border-unselected-hover;
+ }*/
+
+ input[type="checkbox"]:checked + label {
+ background: @color-categories-item-selected;
+ color: @color-categories-item-selected-font;
+ border-bottom: 2px solid @color-categories-item-border-selected;
+ }
+}
+
+#categories_container {
+
+ position: relative;
+
+ .help {
+ position: absolute;
+ width: 100%;
+ bottom: -20px;
+ overflow: hidden;
+
+ opacity: 0;
+ transition: opacity 1s ease;
+
+ font-size: 0.8em;
+ text-position: center;
+ background: white;
+ }
+
+ &:hover .help {
+ opacity: 0.8;
+ transition: opacity 1s ease;
+ }
+
+}
diff --git a/searx/static/themes/simple/less/stats.less b/searx/static/themes/simple/less/stats.less
new file mode 100644
index 000000000..c134bd0ec
--- /dev/null
+++ b/searx/static/themes/simple/less/stats.less
@@ -0,0 +1,8 @@
+.percentage {
+ position: relative;
+ width: 300px;
+
+ div {
+ background: @color-percentage-div-background;
+ }
+}
diff --git a/searx/static/themes/simple/less/style-rtl.less b/searx/static/themes/simple/less/style-rtl.less
new file mode 100644
index 000000000..2b68bcfde
--- /dev/null
+++ b/searx/static/themes/simple/less/style-rtl.less
@@ -0,0 +1,6 @@
+@import "style.less";
+
+#search_submit {
+ left: 1px;
+ right:auto;
+}
diff --git a/searx/static/themes/simple/less/style.less b/searx/static/themes/simple/less/style.less
new file mode 100644
index 000000000..b79b3eb24
--- /dev/null
+++ b/searx/static/themes/simple/less/style.less
@@ -0,0 +1,709 @@
+/*
+* searx, A privacy-respecting, hackable metasearch engine
+*
+* To convert "style.less" to "style.css" run: $make styles
+*/
+
+@import "normalize.less";
+
+@import "definitions.less";
+
+@import "mixins.less";
+
+@import "code.less";
+
+@import "toolkit.less";
+
+@import "autocomplete.less";
+
+// ion-icon
+@import "ion.less";
+
+.ion-icon-big {
+ .ion-icon;
+ font-size: 149%;
+}
+
+// for index.html template
+@import "index.less";
+
+// for preferences.html template
+@import "preferences.less";
+
+// Search-Field
+@import "search.less";
+
+// Main LESS-Code
+html {
+ font-family: arial, sans-serif;
+ font-size: 0.9em;
+ .text-size-adjust;
+ color: @color-font;
+ padding: 0;
+ margin: 0;
+}
+
+body, main {
+ padding: 0;
+ margin: 0;
+}
+
+main {
+ width: 100%;
+ // position: absolute;
+}
+
+footer {
+ // position:absolute;
+ bottom:0;
+ width:100%;
+ height:50px;
+}
+
+#main_preferences, #main_about, #main_stats {
+ margin: 3em;
+ width: auto;
+}
+
+footer {
+ bottom: 0;
+ height: 3em;
+ margin: 1em 0;
+ padding: 1em 0;
+ clear: both;
+ width: 100%;
+ text-align: center;
+
+ p {
+ font-size: 0.9em;
+ }
+}
+
+#main_preferences h1, #main_stats h1 {
+ background: url('../img/searx.png') no-repeat;
+ background-size: auto 75%;
+ min-height: 40px;
+ margin: 0 auto;
+
+ span {
+ visibility: hidden;
+ }
+}
+
+input[type="submit"], #results button[type="submit"] {
+ padding: 0.5rem;
+ margin: 2px 4px;
+ display: inline-block;
+ background: @color-download-button-background;
+ color: @color-download-button-font;
+ .rounded-corners;
+ border: 0;
+ cursor: pointer;
+}
+
+a {
+ text-decoration: none;
+ color: @color-url-font;
+
+ &:visited {
+ color: @color-url-visited-font;
+
+ .highlight {
+ color: @color-url-visited-font;
+ }
+ }
+}
+
+article[data-vim-selected] {
+ background: #f7f7f7;
+}
+
+article[data-vim-selected]::before {
+ position: absolute;
+ left: 1em;
+ padding: 2px;
+ content: ">";
+ font-weight: bold;
+ color: @color-base;
+}
+
+article.result-images[data-vim-selected] {
+ background: @color-base;
+}
+
+article.result-images[data-vim-selected]::before {
+ display: none;
+ content: "";
+}
+
+.result {
+ margin: 19px 0 18px 0;
+ padding: 0;
+
+ h3 {
+ font-size: 1.1em;
+ word-wrap:break-word;
+ margin: 5px 0 1px 0;
+ padding: 0;
+ margin-bottom: 0;
+
+ a {
+ color: @color-result-link-font;
+ font-weight: normal;
+ font-size: 1.1em;
+
+ &:visited {
+ color: @color-result-link-visited-font;
+ }
+
+ &:focus, &:hover {
+ text-decoration: underline;
+ border: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline:none;
+ }
+ }
+ }
+
+ .cache_link, .proxyfied_link {
+ font-size: 0.9em !important;
+ }
+
+ .content, .stat, .altlink {
+ font-size: 0.9em;
+ margin: 0;
+ padding: 0;
+ max-width: 54em;
+ word-wrap:break-word;
+ line-height: 1.24;
+
+ .highlight {
+ color: @color-black;
+ background: inherit;
+ font-weight: bold;
+ }
+ }
+
+ .codelines {
+ .highlight {
+ color: inherit;
+ background: inherit;
+ font-weight: normal;
+ }
+ }
+
+ .url {
+ font-size: 0.9em;
+ margin: 0 0 3px 0;
+ padding: 0;
+ max-width: 54em;
+ word-wrap:break-word;
+ color: @color-result-url-font;
+ }
+
+ .published_date {
+ font-size: 0.8em;
+ color: @color-result-publishdate-font;
+ }
+
+ img {
+
+ &.thumbnail {
+ float: left;
+ padding: 0 5px 10px 0;
+ width: 20em;
+ min-width: 20em;
+ min-height: 8em;
+ // background: @color-base-light;
+ }
+
+ &.image {
+ float: left;
+ padding: 0 5px 10px 0;
+ width: 100px;
+ max-height: 100px;
+ object-fit: scale-down;
+ object-position: right top;
+ }
+
+ }
+
+ .break {
+ clear: both;
+ }
+
+}
+
+.category-social .image {
+ width: auto !important;
+ min-width: 48px;
+ min-height: 48px;
+ padding: 0 5px 25px 0 !important;
+}
+
+.result-videos .content {
+ overflow: hidden;
+}
+
+.engines {
+ float: right;
+ color: @color-engines-font;
+
+ span {
+ font-size: smaller;
+ margin: 0 0.5em 0 0;
+ }
+}
+
+.small_font {
+ font-size: 0.8em;
+}
+
+.highlight {
+ color: @color-highlight;
+ background: inherit;
+ font-weight: bold;
+}
+
+.result-images {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ max-height: 200px;
+
+ img {
+ float: inherit;
+ margin: 0;
+ padding: 0;
+ border: none;
+ max-height: 200px;
+ background: @color-base-dark;
+ }
+
+ span a {
+ display: none;
+ color: @color-result-image-span-font;
+ }
+
+ &:hover span a {
+ display: block;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ padding: 4px;
+ margin: 0 0 4px 4px;
+ background-color: @color-result-image-span-background-hover;
+ font-size: 0.7em;
+ }
+}
+
+.torrent_result {
+ border-left: 10px solid @color-result-torrent-border;
+ padding-left: 3px;
+
+ p {
+ margin: 3px;
+ font-size: 0.8em;
+ }
+
+ a {
+ color: @color-result-link-font;
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ &:visited {
+ color: @color-result-link-visited-font;
+ }
+ }
+}
+
+#results {
+ margin: 2em 2em 20px 2em;
+ padding: 0;
+ width: @results-width;
+}
+
+#suggestions {
+
+ .wrapper {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: flex-end;
+
+ form {
+ display: inline-block;
+ flex: 1 1 50%;
+ }
+ }
+}
+
+#suggestions, #answers, #corrections {
+ max-width: @results-width;
+}
+
+#suggestions, #answers, #infoboxes, #corrections {
+
+ input {
+ padding: 0;
+ margin: 3px;
+ font-size: 0.9em;
+ display: inline-block;
+ background: transparent;
+ color: @color-result-search-url-font;
+ cursor: pointer;
+ }
+
+ input[type="submit"], .infobox .url a {
+ color: @color-result-link-font;
+ text-decoration: none;
+ font-size: 0.9rem;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+}
+
+#corrections {
+ display: flex;
+ flex-flow: row wrap;
+ margin: 1em 0;
+
+ h4, input[type="submit"] {
+ display: inline-block;
+ margin: 0 0.5em 0 0;
+ }
+
+ input[type="submit"]::after {
+ content: ", "
+ }
+
+}
+
+#suggestions .title, #search_url .title, #apis .title {
+ margin: 2em 0 0.5em 0;
+ color: @color-font;
+}
+
+#answers {
+ margin: 10px 8px 10px 8px;
+ border: 1px solid #ddd;
+ padding: 0.9em;
+ box-shadow: 0px 0px 5px #CCC;
+
+ h4 {
+ display: none;
+ }
+
+ .answer {
+ display: block;
+ font-size: 1.2em;
+ font-weight: bold;
+ }
+}
+
+#answers, #infoboxes {
+ form {
+ min-width: 210px;
+ }
+}
+
+#sidebar {
+ position: absolute;
+ top: 100px;
+ left: 57em;
+
+ margin: 0px 2px 5px 5px;
+ padding: 0px 2px 2px;
+ max-width: 25em;
+ word-wrap: break-word;
+
+ .infobox {
+ margin: 10px 0 10px;
+ border: 1px solid #ddd;
+ padding: 0.9em;
+ font-size: 0.9em;
+ box-shadow: 0px 0px 5px #CCC;
+
+ h2 {
+ margin: 0 0 .5em 0;
+ }
+
+ img {
+ max-width: 100%;
+ max-height: 12em;
+ display: block;
+ margin: 0;
+ padding: 0;
+ }
+
+ dl {
+ margin: 0.5em 0;
+ }
+
+ dt {
+ display: inline;
+ margin: 0.5em 0.25em 0.5em 0;
+ padding: 0;
+ font-weight: bold;
+ }
+
+ dd {
+ display: inline;
+ margin: 0.5em 0;
+ padding: 0;
+ }
+
+ input {
+ font-size: 1em;
+ }
+
+ br {
+ clear: both;
+ }
+
+ .attributes, .urls {
+ clear: both;
+ }
+
+ }
+}
+
+#search_url {
+ margin-top: 8px;
+
+ div {
+ display: block;
+ border: 1px solid @color-result-search-url-border;
+ padding: 4px;
+ color: @color-result-search-url-font;
+ width: 100%;
+ display: block;
+ margin: 0.1em;
+ overflow: hidden;
+ height: 1.2em;
+ line-height: 1.2em;
+
+ pre {
+ display: block;
+ width: 200em;
+ font-size: 0.8em;
+ word-break: break-all;
+ margin: 0.1em;
+ .select-all-on-focus();
+ }
+ }
+}
+
+#linkto_preferences {
+ position: absolute;
+ right: 10px;
+ top: 0.9em;
+ padding: 0;
+ border: 0;
+ display: block;
+
+ font-size: 1.2em;
+ color: @color-search-font;
+
+ a:link *, a:hover *, a:visited *, a:active * {
+ color: @color-search-font;
+ }
+}
+
+#pagination {
+ clear: both;
+
+ br {
+ clear: both;
+ }
+}
+
+#apis {
+ margin-top: 8px;
+ clear: both;
+}
+
+#backToTop {
+ border: 1px solid #ddd;
+ margin: 0 0 0 2em;
+ padding: 0;
+ font-size: 1em;
+ box-shadow: 0px 0px 5px #CCC;
+ background: white;
+ position: fixed;
+ bottom: 85px;
+ left: @results-width;
+ transition: opacity 0.5s;
+ opacity: 0;
+
+ a {
+ display: block;
+ margin: 0;
+ padding: 0.6em;
+ }
+}
+
+@media screen and (max-width: 75em) {
+
+ #main_preferences, #main_about, #main_stats {
+ margin: 0.5em;
+ width: auto;
+ }
+
+ #suggestions, #answers {
+ margin-top: 1em;
+ }
+
+ #infoboxes {
+ position: inherit;
+ max-width: inherit;
+
+ .infobox {
+ clear:both;
+
+ img {
+ float: left;
+ max-width: 10em;
+ margin: 0.5em 0.5em 0.5em 0;
+ }
+ }
+
+ }
+
+ #sidebar {
+ position: static;
+ max-width: @results-width;
+ margin: 0 0 2px 0;
+ padding: 0;
+ float: none;
+ border: none;
+ width: auto;
+
+ input {
+ border: 0;
+ }
+ }
+
+ #apis {
+ display: none;
+ }
+
+ #search_url {
+ display: none;
+ }
+
+ .result {
+ border-bottom: 1px solid @color-result-top-border;
+ margin: 0;
+ padding-top: 8px;
+ padding-bottom: 6px;
+
+ h3 {
+ margin: 0 0 1px 0;
+ }
+
+ .thumbnail {
+ max-width: 98%;
+ }
+
+ .url {
+
+ span.url {
+ display: block;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ width: 100%;
+ }
+
+ a {
+ float: right;
+ padding: 0 0.5em;
+ }
+
+ }
+
+ .engines {
+ float: right;
+ padding: 0 0 3px 0;
+ }
+ }
+
+ .result-images {
+ border-bottom: none !important;
+ }
+
+ .image_result {
+ max-width: 98%;
+ img {
+ max-width: 98%;
+ }
+ }
+}
+
+
+@media screen and (max-width: @results-width) {
+
+ article[data-vim-selected]::before {
+ display: none;
+ content: "";
+ }
+
+ #linkto_preferences {
+ display: none;
+ postion: fixed !important;
+ top: 100px;
+ right: 0px;
+ }
+
+ #sidebar {
+ margin: 0 5px 2px 5px;
+ }
+
+ #corrections {
+ margin: 1em 5px 1em 5px;
+ }
+
+ #results {
+ margin: 0;
+ padding: 0;
+ width: initial;
+ }
+
+ #backToTop {
+ left: 40em;
+ bottom: 35px;
+ }
+
+ .result {
+ padding: 8px 10px 6px 10px;
+ }
+
+ .result-images {
+ margin: 0;
+ padding: 0;
+ border: none;
+ }
+
+}
+
+@media screen and (max-width: 35em) {
+
+ .result-videos {
+
+ img.thumbnail {
+ float: none !important;
+ }
+ .content {
+ overflow: inherit;
+ }
+
+ }
+
+}
diff --git a/searx/static/themes/simple/less/toolkit.less b/searx/static/themes/simple/less/toolkit.less
new file mode 100644
index 000000000..641747c6c
--- /dev/null
+++ b/searx/static/themes/simple/less/toolkit.less
@@ -0,0 +1,346 @@
+// other solution : http://stackoverflow.com/questions/1577598/how-to-hide-parts-of-html-when-javascript-is-disabled/13857783#13857783
+html.no-js .hide_if_nojs {
+ display: none;
+}
+
+html.js .show_if_nojs {
+ display: none;
+}
+
+.center {
+ text-align: center;
+}
+
+.right {
+ float: right ;
+}
+
+.left {
+ float: left;
+}
+
+.invisible {
+ display: none;
+}
+
+.danger {
+ background-color: @color-error-background;
+}
+
+.badge {
+ display: inline-block;
+ color: #fff;
+ background-color: #777;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: baseline;
+ min-width: 10px;
+ padding: 1px 5px;
+ border-radius: 5px;
+}
+
+// table
+table {
+
+ width: 100%;
+
+ &.striped {
+ tr {
+ border-bottom: 1px solid @color-settings-tr-hover;
+ }
+ }
+}
+
+th {
+ padding: 0.4em;
+}
+
+td {
+ padding: 0 4px;
+}
+
+tr {
+ &:hover {
+ background: @color-settings-tr-hover;
+ }
+}
+
+// dialog
+.dialog() {
+ position: relative;
+ width: 70%;
+ padding: 1em 1em 1em 2.7em;
+ margin: 0em 8% 1em 8%;
+ border: 1px solid black;
+ border-radius: 4px;
+ text-align: left;
+
+ &:before {
+ position: absolute;
+ top: 0.5em;
+ left: 0.5em;
+ font-family:"ion";
+ font-size: 1.5em;
+ }
+
+ .close {
+ float:right;
+ position: relative;
+ top: -3px;
+ color: inherit;
+ font-size: 1.5em;
+ }
+
+ ul, ol, p {
+ margin: 1px 0 0 0;
+ }
+
+}
+
+.dialog-error {
+ .dialog();
+ color: @color-error;
+ background: @color-error-background;
+ border-color: @color-error;
+ .ion-error();
+}
+
+.dialog-warning {
+ .dialog();
+ color: @color-warning;
+ background: @color-warning-background;
+ border-color: @color-warning;
+ .ion-warning();
+}
+
+// btn-collapse
+.btn-collapse {
+ cursor: pointer;
+}
+
+//
+.scrollx {
+ overflow-x: auto;
+ overflow-y: hidden;
+ display: block;
+ padding: 0;
+ margin: 0;
+ border: none;
+}
+
+// tabs
+.tabs .tabs > label {
+ font-size: 90%;
+}
+
+.tabs {
+ .flexbox();
+ flex-wrap: wrap;
+ width: 100%;
+ min-width: 100%;
+
+ & > * {
+ order: 2;
+ }
+
+ & > input[type=radio] {
+ display: none;
+ }
+
+ & > label {
+ order: 1;
+ padding: 0.7em;
+ margin: 0 0.7em;
+ letter-spacing:0.5px;
+ text-transform: uppercase;
+
+ border: solid white;
+ border-width: 0px 0px 2px 0;
+
+ .disable-user-select();
+ cursor: pointer;
+ }
+
+ & > label:hover {
+ border-bottom: 2px solid @color-categories-item-border-selected;
+ }
+
+ & > section {
+ min-width: 100%;
+ padding: 0.7rem 0;
+ box-sizing: border-box;
+ border-top: 1px solid black;
+ display: none;
+ }
+
+ // default selection
+ & > label:last-of-type {
+ border-bottom: 2px solid @color-categories-item-border-selected;
+ background: @color-categories-item-selected;
+ color: @color-categories-item-selected-font;
+ font-weight: bold;
+ letter-spacing:-0.1px;
+ }
+
+ & > section:last-of-type {
+ display: block;
+ }
+
+}
+
+html body .tabs > input:checked {
+ ~ section {
+ display: none;
+ }
+ ~ label {
+ position: inherited;
+ background: inherit;
+ border-bottom: 2px solid transparent;
+ font-weight: normal;
+ color: inherit;
+
+ &:hover {
+ border-bottom: 2px solid @color-categories-item-border-selected;
+ }
+ }
+ + label {
+ border-bottom: 2px solid @color-categories-item-border-selected;
+ background: @color-categories-item-selected;
+ color: @color-categories-item-selected-font;
+ font-weight: bold;
+ letter-spacing:-0.1px;
+ }
+ + label + section {
+ display: block;
+ }
+}
+
+// select
+select {
+ height: 28px;
+ margin: 0 1em 0 0;
+ padding: 2px 8px 2px 0 !important;
+ color: @color-search-font;
+ font-size: 12px;
+ z-index: 2;
+
+ &:hover, &:focus {
+ cursor: pointer;
+ }
+}
+
+@supports ((background-position-x: 100%) and ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none))) {
+
+ select {
+ appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ border: none;
+ border-bottom: 1px solid #d7d7d7;
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTI4LDE5MiAyNTYsMzIwIDM4NCwxOTIiLz48L2c+PC9zdmc+Cg==) no-repeat;
+ background-position-x: 105%;
+ background-size: 2em;
+ background-origin: content-box;
+ outline: medium none;
+
+ &:hover, &:focus {
+ border-bottom: 1px solid @color-search-border;
+ }
+
+ }
+
+}
+
+// checkbox-onoff
+@supports (border-radius: 50px) {
+ .checkbox-onoff {
+ display: inline-block;
+ width: 40px;
+ height: 10px;
+ background: #dcdcdc;
+ margin: 8px auto;
+ position: relative;
+ border-radius: 50px;
+ label {
+ display: block;
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ top: -5px;
+ cursor: pointer;
+ border-radius: 50px;
+ box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
+ transition: all 0.4s ease;
+
+ left: 27px;
+ background-color: #3498DB;
+ }
+ input[type=checkbox] {
+ visibility: hidden;
+ &:checked + label {
+ left: -5px;
+ background: #dcdcdc;
+ }
+ }
+ }
+}
+
+// checkbox
+@supports (transform: rotate(-45deg)) {
+ .checkbox {
+ width: 20px;
+ position: relative;
+ margin: 20px auto;
+ label {
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: white;
+ border-radius: 4px;
+ box-shadow: inset 0px 1px 1px white, 0px 1px 4px rgba(0,0,0,0.5);
+ &:after {
+ content: '';
+ width: 9px;
+ height: 5px;
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ border: 3px solid #333;
+ border-top: none;
+ border-right: none;
+ background: transparent;
+ opacity: 0;
+ transform: rotate(-45deg);
+ }
+ }
+
+ input[type=checkbox] {
+ visibility: hidden;
+ &:checked + label:after {
+ border-color: #3498DB;
+ opacity: 1;
+ }
+ }
+
+ // disabled : can't be focused, show only the check mark
+ input[disabled] + label {
+ background-color: transparent !important;
+ box-shadow: none !important;
+ cursor: inherit;;
+ }
+
+ // if not checked and possible to checked then display a "light" check mark on hover
+ input:not(:checked):not([readonly]):not([disabled]) + label:hover::after {
+ opacity: 0.5;
+ }
+ }
+}
+
+@media screen and (max-width: 50em) {
+ .tabs > label {
+ width: 100%;
+ }
+}
7apu2bq3rhoylwmucxizk54afw5jyda7pho4j5zdcqpwkufke7zdzwad.onion