From 22711ca071a2a69a9c06b5ee49979834c169d3d2 Mon Sep 17 00:00:00 2001 From: Roberto Beltran Date: Sat, 12 Sep 2020 21:41:07 +0000 Subject: [PATCH] add styles --- searx/static/themes/courgette/css/style.css | 898 +++++++++++++++++- searx/static/themes/courgette/less/style.less | 287 ++++-- 2 files changed, 1085 insertions(+), 100 deletions(-) diff --git a/searx/static/themes/courgette/css/style.css b/searx/static/themes/courgette/css/style.css index 508c4b60..cc46079d 100644 --- a/searx/static/themes/courgette/css/style.css +++ b/searx/static/themes/courgette/css/style.css @@ -1 +1,897 @@ -a,h2{color:#666}.center,html{position:relative}#categories_container>div,.top_margin a{display:inline-block}#categories,.center{text-align:center}#categories .hidden,.cache_link,.highlight .c,.highlight .cm,.highlight .ge,.highlight .sd{font-style:italic}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input[type=search]{-webkit-appearance:textfield}h2{text-transform:uppercase}body{font-family:sans-serif;line-height:1.5;margin:0;background:#EEE}html{min-height:100%}.title h1{font-size:7em;color:#3498DB;margin:-20px auto 0;line-height:100px;padding-bottom:20px}.center{max-width:70em;background:rgba(255,255,255,.6);padding:2em;margin:7% auto 0}.center.search{position:static;width:auto;background:0 0;margin:auto;padding-top:1.8em}@media screen and (min-width:1001px){.center:after{content:"";z-index:-1;background:url(../img/bg-body-index.jpg) no-repeat;background-size:cover;width:100%;height:100%;top:0;left:0;position:fixed}.center.search:after{content:none}}.autocompleter-choices{position:absolute;margin:0;padding:0;background:#FFF}.autocompleter-choices li{padding:.5em 1em}.autocompleter-choices li:hover{background:#3498DB;color:#FFF;cursor:pointer}.top_margin{position:absolute;bottom:-3.5em;width:100%;left:0}.top_margin a{margin-right:1em;color:#FFF;text-decoration:none}.top_margin a:focus,.top_margin a:hover{text-decoration:underline}@media screen and (max-width:1000px){.center{background:0 0}.top_margin a{color:#333}}.checkbox_container{margin-top:1.5em}.checkbox_container label{padding:.5em 1em;color:#333;cursor:pointer;font-size:.9em}.checkbox_container input[type=checkbox]:checked+label,.checkbox_container label:hover{background:#3498DB;color:#FFF}.checkbox_container input[type=checkbox]{position:absolute;top:-9999px}#categories .hidden{display:none;position:absolute;bottom:1em;left:0;text-align:center;width:100%;font-size:.9em;color:#333}#categories:hover .hidden,.right a{display:block}@media screen and (max-width:900px){#categories_container{letter-spacing:-5px}#categories_container>div{letter-spacing:normal;margin-top:1em}.checkbox_container{margin:0}.checkbox_container label{display:block;background:#CCC;padding:1em;border:1px solid #FFF}.top_margin{position:static}#categories .hidden{position:static;display:block}}@media screen and (max-width:900px) and (min-width:501px){#categories_container>div{width:31%;margin-left:2.333%}#categories_container>div:nth-child(3n+1){margin-left:0}}@media screen and (max-width:500px){#categories_container>div{width:48%;margin-left:2%;font-size:.9em}#categories_container>div:nth-child(2n+1){margin-left:0}.title h1{background:url(../img/searx-mobile.png) no-repeat;width:200px;height:39px}}#search_wrapper{position:relative}.q{padding:.5em 3em .5em 1em;width:100%;font-size:1.5em;border:0;color:#666}.cache_link,.result p{font-size:.9em}#search_submit{position:absolute;top:0;right:0;border:0;background:url(../img/search-icon.png) center center/65% auto no-repeat #3498DB;text-indent:-9999px;width:5em;height:100%;cursor:pointer}#sidebar,.right{position:fixed;width:15em;right:0;text-align:right}#search_submit:focus,#search_submit:hover{background-color:#0665A2}#sidebar{background:#3498DB;top:0;height:100%;padding:1.5em}.right{bottom:1.5em;z-index:1;padding:0 1.5em}.right a{color:#FFF;text-decoration:none}#sidebar form,#suggestions form,.row fieldset{display:inline-block}.right a:focus,.right a:hover{text-decoration:underline}#preferences{background:url(../img/preference-icon.png) right center/12% auto no-repeat;padding-right:1.8em}#search_url input{border:0;padding:.5em}#sidebar>div{margin-bottom:1em;color:#FFF}#sidebar input[type=submit]{background:#CCC;border:0;padding:.5em 1em;cursor:pointer;margin-top:.5em}#sidebar input[type=submit]:focus,#sidebar input[type=submit]:hover{color:#FFF;background-color:#0665A2}#results{padding:0 17em 0 2em}.result .engines{text-align:right}.result .content{margin:0;color:#666}.result .url{margin-top:0;color:#FF6530}.result .favicon{float:left;position:relative;top:.5em;margin-right:.5em}.definition_result{background:#CCC;padding:1em}.definition_result .result_title,.definition_result p{margin:0}.result_title{margin-bottom:0;font-weight:400}.result_title a{color:#3498DB;text-decoration:none}#answers,#suggestions span{color:#666}.result_title a:focus,.result_title a:hover{text-decoration:underline}.cache_link{color:#666}.search.center{padding-right:17em}#answers{border:2px solid #3498DB;padding:20px;text-align:center;max-width:70em;margin:0 auto 20px}#suggestions{margin-bottom:1em}#suggestions form{vertical-align:top;margin-bottom:.5em}#suggestions input[type=submit]{color:#333;padding:.5em 1em;border:0;background:#CCC;cursor:pointer}#suggestions input[type=submit]:focus,#suggestions input[type=submit]:hover{background:#3498DB;color:#FFF}#pagination{margin:1.5em 0 2em}#pagination form+form{float:right;margin-top:-2em}input[type=submit]{display:inline-block;background:#3498DB;color:#FFF;border:0;padding:.6em 1em;cursor:pointer}input[type=submit]:focus,input[type=submit]:hover{background:#0665A2}.row{max-width:60em;margin:auto}.row a{color:#3498DB}.row form{letter-spacing:-5px}.row form>*{letter-spacing:normal}.row p{margin:0}.row fieldset{width:48%;vertical-align:top}.row fieldset:last-of-type{display:block;width:auto;background:0 0;padding:0}fieldset,table tr:nth-child(odd){background:#CCC}.row fieldset:nth-child(odd){margin-right:2%}.row fieldset:nth-child(2){min-height:10.5em}@media screen and (max-width:900px){.row{margin:0 1em}.row fieldset{width:49%}.row fieldset,.row fieldset:nth-child(odd){margin-right:0}.row fieldset:first-child{width:100%;margin-right:0}.row fieldset:nth-child(even){margin-right:2%}}@media screen and (max-width:800px){.row fieldset,select{width:100%}table{font-size:.8em}#sidebar,.right{display:none}#results{padding:0 2em}.search.center{padding-right:2em}}@media screen and (max-width:400px){.row #categories_container>div{width:100%;margin-left:0}}fieldset{border:0;margin:1em 0;padding:1.5em}table{width:100%;text-align:left;border:1px solid #CCC;border-collapse:collapse}table th{background:#999;color:#FFF}table td,table th{padding:.5em 1em;border:1px solid #FFF}.engine_checkbox label{padding:.5em;background:#3498DB;color:#FFF;cursor:pointer}.engine_checkbox .deny{background:#3498DB}.engine_checkbox .allow{display:none;background:#666}.engine_checkbox input{display:none}.engine_checkbox input:checked+.allow{display:inline}.engine_checkbox input:checked+.allow+.deny{display:none}.row input[type=submit]{font-size:1em;margin:1em 0 2em}.row .right{position:static;display:inline-block}.row .right a{color:#333;width:auto;text-align:left;padding:0}.small_font{font-size:.8em}table th{padding:1em}legend{background:#EEE;padding:0 1em;position:relative}select{border:1px solid #DDD;padding:.5em .8em;font-size:1em}.highlight .hll{background-color:#ffc}.highlight{font-weight:700;background:#f8f8f8}.highlight .c{color:#408080}.highlight .err{border:1px solid red}.highlight .k{color:green;font-weight:700}.highlight .o{color:#666}.highlight .cm{color:#408080}.highlight .cp{color:#BC7A00}.highlight .c1,.highlight .cs{color:#408080;font-style:italic}.highlight .gd{color:#A00000}.highlight .gr{color:red}.highlight .gh{color:navy;font-weight:700}.highlight .gi{color:#00A000}.highlight .go{color:#888}.highlight .gp{color:navy;font-weight:700}.highlight .gs{font-weight:700}.highlight .gu{color:purple;font-weight:700}.highlight .gt{color:#04D}.highlight .kc,.highlight .kd,.highlight .kn{color:green;font-weight:700}.highlight .kp{color:green}.highlight .kr{color:green;font-weight:700}.highlight .kt{color:#B00040}.highlight .m{color:#666}.highlight .s{color:#BA2121}.highlight .na{color:#7D9029}.highlight .nb{color:green}.highlight .nc{color:#00F;font-weight:700}.highlight .no{color:#800}.highlight .nd{color:#A2F}.highlight .ni{color:#999;font-weight:700}.highlight .ne{color:#D2413A;font-weight:700}.highlight .nf{color:#00F}.highlight .nl{color:#A0A000}.highlight .nn{color:#00F;font-weight:700}.highlight .nt{color:green;font-weight:700}.highlight .nv{color:#19177C}.highlight .ow{color:#A2F;font-weight:700}.highlight .w{color:#bbb}.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#666}.highlight .s2,.highlight .sb,.highlight .sc{color:#BA2121}.highlight .sd{color:#BA2121}.highlight .se{color:#B62;font-weight:700}.highlight .sh{color:#BA2121}.highlight .si{color:#B68;font-weight:700}.highlight .sx{color:green}.highlight .sr{color:#B68}.highlight .s1{color:#BA2121}.highlight .ss{color:#19177C}.highlight .bp{color:green}.highlight .vc,.highlight .vg,.highlight .vi{color:#19177C}.highlight .il{color:#666}.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}.highlight .lineno::selection{background:0 0}.highlight .lineno::-moz-selection{background:0 0} \ No newline at end of file +/* this is just vice pink in rgb */ +/* This is just vice blue in rgb */ +/* Fonts */ +/* Source Sans Pro */ +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('../fonts/SourceSansPro-Regular.otf.woff2') format('woff2'); +} +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url('../fonts/SourceSansPro-Black.otf.woff2') format('woff2'); +} +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('../fonts/SourceSansPro-Bold.otf.woff2') format('woff2'); +} +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('../fonts/SourceSansPro-Semibold.otf.woff2') format('woff2'); +} +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url('../fonts/SourceSansPro-Light.otf.woff2') format('woff2'); +} +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url('../fonts/SourceSansPro-ExtraLight.otf.woff2') format('woff2'); +} +/* IBM Plex Copyright © 2017 IBM Corp. with Reserved Font Name "Plex" +This Font Software is licensed under the SIL Open Font License, Version 1.1. */ +@font-face { + font-family: "IBM Plex"; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url('../fonts/IBMPlexMono-Medium.otf') format('opentype'); +} +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +input[type="search"] { + -webkit-appearance: textfield; +} +body { + font-family: "Source Sans Pro", sans-serif; + line-height: 1.5; + margin: 0; + background: white; +} +html { + position: relative; + min-height: 100%; +} +h1 { + margin-bottom: 0; +} +a { + text-decoration: none; + color: inherit; +} +.title h1 { + font-size: 7em; + color: #1D353B; + margin: 0 auto; + line-height: 100px; + margin-top: -20px; + padding-bottom: 20px; + font-weight: 300; +} +.title h1 .Miami { + font-weight: 900; +} +.center { + max-width: 70em; + text-align: center; + background: #ffffff; + padding: 3em 3em 2em 3em; + margin: 7% auto 0; + position: relative; +} +.center.search { + position: static; + width: auto; + background: none; + margin: auto; + padding-top: 1.8em; +} +@media screen and (min-width: 1001px) { + .center:after { + content: ""; + z-index: -1; + background: url(../img/bg-body-index.jpg) no-repeat; + background-size: cover; + width: 100%; + height: 100%; + top: 0; + left: 0; + position: fixed; + } + .center.search:after { + content: none; + } +} +.autocompleter-choices { + position: absolute; + margin: 0; + padding: 0; + background: #FFF; +} +.autocompleter-choices li { + padding: 0.5em 1em; +} +.autocompleter-choices li:hover { + background: #f890e7; + color: #FFF; + cursor: pointer; +} +#categories { + text-align: center; +} +fieldset #categories { + margin-top: -1.5em; +} +.top_margin { + position: absolute; + bottom: -3.5em; + width: 100%; + left: 0; + background-color: white; + padding-bottom: 1em; +} +.top_margin a { + display: inline-block; + margin-right: 0.5em; + margin-left: 0.5em; + text-decoration: none; + color: #282828; + padding: .5em 1em; + border-radius: 4px; + font-weight: 500; + font-family: "IBM Plex", monospace; + font-size: 0.8em; +} +.top_margin a:hover::before, +.top_margin a:focus::before { + content: "/"; +} +@media screen and (max-width: 1000px) { + .center { + background: none; + } + .top_margin a { + color: #282828; + } +} +.checkbox_container { + margin-top: 1.5em; +} +.checkbox_container label { + padding: 0.5em 1em; + color: #282828; + cursor: pointer; + font-size: 0.9em; + background: rgba(248, 144, 231, 0.3); + transition: all 0.8s ease; +} +.checkbox_container label:hover { + background: rgba(11, 211, 211, 0.4); + color: #282828; +} +.checkbox_container input[type="checkbox"] { + position: absolute; + top: -9999px; +} +.checkbox_container input[type="checkbox"]:checked + label { + background: rgba(11, 211, 211, 0.4); + color: #282828; +} +#categories_container > div { + display: inline-block; +} +#categories .hidden { + display: none; + position: absolute; + bottom: 1em; + left: 0; + text-align: center; + width: 100%; + font-size: 0.9em; + font-style: italic; + color: #282828; +} +#categories:hover .hidden { + display: block; +} +@media screen and (max-width: 900px) { + #categories_container { + letter-spacing: -5px; + } + #categories_container > div { + letter-spacing: normal; + margin-top: 1em; + } + .checkbox_container { + margin: 0; + } + .checkbox_container label { + display: block; + padding: 1em; + } + .top_margin { + position: static; + } + #categories .hidden { + position: static; + display: block; + } +} +@media screen and (max-width: 900px) and (min-width: 501px) { + #categories_container > div { + width: 31%; + margin-left: 2.333%; + } + #categories_container > div:nth-child(3n+1) { + margin-left: 0; + } +} +@media screen and (max-width: 500px) { + #categories_container > div { + width: 48%; + margin-left: 2%; + font-size: 0.9em; + } +} +#search_wrapper { + position: relative; + display: flex; + flex-direction: row-reverse; +} +.q { + padding: 0.5em 3em 0.5em 0; + width: 100%; + font-size: 1.5em; + border: 0; + border-bottom: 1px solid #f890e7; + color: #282828; + transition: all 1.2s ease; + background-color: white; +} +#search_submit { + position: absolute; + top: 0; + right: 0; + border: 0; + background: url("../img/search-icon.png") no-repeat scroll center center / 57% auto #f890e7; + text-indent: -9999px; + width: 5em; + height: 100%; + cursor: pointer; + transition: all 1.2s ease; +} +#search_submit:hover, +#search_submit:focus { + background-color: #0bd3d3; +} +#search_submit:hover + .q { + border-bottom-color: #0bd3d3; +} +#sidebar { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} +#sidebar #apis { + display: flex; + align-items: center; +} +.right { + padding-bottom: 0.1em; +} +.right a { + text-decoration: none; +} +.right a:hover::before, +.right a:focus::before { + content: "$ "; +} +#preferences { + text-decoration: none; + font-family: "IBM Plex", mono; + font-weight: 500; + font-size: 0.8em; +} +#preferences:hover::before, +#preferences:focus::before { + content: "/"; +} +#search_url input { + border: 0; + padding: 0.5em; +} +#sidebar > div { + margin: 0; + margin-right: 1em; + margin-left: 1em; +} +#sidebar form { + display: inline-block; +} +#sidebar input[type="submit"] { + border: 0; + padding: 0.5em 1em; + cursor: pointer; + margin-left: 1em; +} +#results { + max-width: 100ch; + margin: auto; +} +.result p { + font-size: 0.9em; +} +.result .engines { + text-align: right; +} +.result .content { + margin: 0; + color: #666; +} +.result .url { + margin-top: 0; + color: #FF6530; +} +.result .favicon { + float: left; + position: relative; + top: 0.5em; + margin-right: 0.5em; +} +.definition_result { + background: #CCC; + padding: 1em; +} +.definition_result .result_title, +.definition_result p { + margin: 0; +} +.result_title { + margin-bottom: 0; + font-weight: normal; +} +.highlight { + font-weight: bold; +} +.result_title a { + color: #282828; + background-color: rgba(248, 144, 231, 0.3); + text-decoration: none; + transition: background 1.2s ease; +} +.result_title a:hover, +.result_title a:focus { + background-color: rgba(11, 211, 211, 0.4); +} +.cache_link { + color: #666; + font-size: 0.9em; + font-style: italic; +} +.search.center { + max-width: 111ch; +} +#answers { + border: 2px solid #f890e7; + padding: 20px; + color: #666; + text-align: center; + max-width: 70em; + margin: 0 auto 20px; +} +#suggestions { + margin-bottom: 1em; +} +#suggestions span { + color: #666; +} +#suggestions form { + display: inline-block; + vertical-align: top; + margin-bottom: 0.5em; +} +#suggestions input[type="submit"] { + color: #282828; + padding: 0.5em 1em; + border: 0; + background: #CCC; + cursor: pointer; +} +#suggestions input[type="submit"]:hover, +#suggestions input[type="submit"]:focus { + background: #f890e7; + color: #FFF; +} +#pagination { + margin: 1.5em 0 2em; +} +#pagination form + form { + float: right; + margin-top: -2em; +} +input[type="submit"] { + display: inline-block; + background: rgba(248, 144, 231, 0.3); + color: #282828; + border: 0; + padding: 0.5em 2em; + cursor: pointer; + transition: background 1s ease; +} +input[type="submit"]:hover, +input[type="submit"]:focus { + background: rgba(11, 211, 211, 0.4); +} +.row { + max-width: 60em; + margin: auto; +} +.row a { + color: #f890e7; +} +.row form { + letter-spacing: -5px; +} +.row form > * { + letter-spacing: normal; +} +.row p { + margin: 0; +} +.row fieldset { + display: inline-block; + width: 48%; + vertical-align: top; +} +.row fieldset:last-of-type { + width: auto; +} +.row fieldset:nth-child(odd) { + margin-right: 2%; +} +.row fieldset:nth-child(2) { + min-height: 9em; +} +@media screen and (max-width: 900px) { + .row { + margin: 0 1em; + } + .row fieldset { + width: 49%; + } + .row fieldset, + .row fieldset:nth-child(odd) { + margin-right: 0; + } + .row fieldset:first-child { + width: 100%; + margin-right: 0; + } + .row fieldset:nth-child(even) { + margin-right: 2%; + } +} +@media screen and (max-width: 800px) { + .row fieldset { + width: 100%; + } + select { + width: 100%; + } + table { + font-size: 0.8em; + } + .right { + display: none; + } + #sidebar { + display: none; + } + #results { + padding: 0 2em; + } + .search.center { + padding-right: 2em; + } + .title h1 { + font-size: 15vw; + } +} +@media screen and (max-width: 400px) { + .row #categories_container > div { + width: 100%; + margin-left: 0; + } +} +fieldset { + border: 2px solid #f890e7; + border-radius: 5px; + margin: 1em 0; + background: white; + padding: 1.5em; +} +table { + width: auto; + margin: auto; + text-align: left; + border-collapse: collapse; +} +table th, +table td { + padding: 0.5em 1em; +} +.engine_checkbox label { + padding: 0.5em; + background: #f890e7; + color: #FFF; + cursor: pointer; +} +.engine_checkbox .deny { + background: #0bd3d3; +} +.engine_checkbox .allow { + display: none; + background: #f890e7; +} +.engine_checkbox input { + display: none; +} +.engine_checkbox input:checked + .allow { + display: inline; +} +.engine_checkbox input:checked + .allow + .deny { + display: none; +} +.row input[type="submit"] { + font-size: 1em; + margin: 1em 2em 2em 0; +} +.row .right { + position: static; + display: inline-block; +} +.row .right a { + color: #282828; + width: auto; + text-align: left; + padding: 0; +} +.small_font { + font-size: 0.8em; +} +table th { + padding: 1em; +} +legend { + background: white; + padding: 0 1em; + position: relative; + border: 2px solid #f890e7; + border-radius: 5px; + font-family: "IBM Plex", monospace; + font-size: 0.9em; +} +select { + border: 1px solid #282828; + padding: 0.25em 1em; + font-size: 1em; + background-color: white; +} +.preferences-actions > * { + margin-right: 2em; +} +.highlight .hll { + background-color: #ffffcc; +} +.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; +} +.highlight .lineno::selection { + background: transparent; +} +/* WebKit/Blink Browsers */ +.highlight .lineno::-moz-selection { + background: transparent; +} +/* Gecko Browsers */ +.about-container { + max-width: 90ch; + margin: auto; +} +.about-container a { + background-color: rgba(248, 144, 231, 0.3); + transition: background 1.2s ease; +} +.about-container a:hover { + background-color: rgba(11, 211, 211, 0.4); +} diff --git a/searx/static/themes/courgette/less/style.less b/searx/static/themes/courgette/less/style.less index 26da7281..74491d70 100644 --- a/searx/static/themes/courgette/less/style.less +++ b/searx/static/themes/courgette/less/style.less @@ -1,12 +1,69 @@ -@color-main: #3498DB; -@color-focus: #0665A2; +@color-main: #F890E7; +@color-focus: #0BD3D3; @color-other-links: #666; -@color-fonts: #333; +@color-fonts: #282828; @center-width: 70em; +@link-background: rgba(248, 144, 231, 0.3); /* this is just vice pink in rgb */ +@link-background-hover: rgba(11, 211, 211, 0.4); /* This is just vice blue in rgb */ +/* Fonts */ +/* Source Sans Pro */ +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('../fonts/SourceSansPro-Regular.otf.woff2') format('woff2'); +} +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url('../fonts/SourceSansPro-Black.otf.woff2') format('woff2'); +} +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('../fonts/SourceSansPro-Bold.otf.woff2') format('woff2'); +} +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('../fonts/SourceSansPro-Semibold.otf.woff2') format('woff2'); +} +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url('../fonts/SourceSansPro-Light.otf.woff2') format('woff2'); +} +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url('../fonts/SourceSansPro-ExtraLight.otf.woff2') format('woff2'); +} +/* IBM Plex Copyright © 2017 IBM Corp. with Reserved Font Name "Plex" +This Font Software is licensed under the SIL Open Font License, Version 1.1. */ +@font-face { + font-family: "IBM Plex"; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url('../fonts/IBMPlexMono-Medium.otf') format('opentype'); +} + +// Original Styles * { -webkit-box-sizing: border-box; @@ -18,16 +75,12 @@ input[type="search"] { -webkit-appearance: textfield; } -h2 { - color: @color-other-links; - text-transform: uppercase; -} body { - font-family: sans-serif; + font-family: "Source Sans Pro", sans-serif; line-height: 1.5; margin: 0; - background: #EEE; + background: white; } html { @@ -35,24 +88,34 @@ html { min-height: 100%; } +h1 { + margin-bottom: 0; +} + a { - color: @color-other-links; + text-decoration: none; + color: inherit; } .title h1 { font-size:7em; - color:@color-main; + color: #1D353B; margin:0 auto; line-height:100px; margin-top:-20px; padding-bottom:20px; + font-weight: 300; +} + +.title h1 .Miami { + font-weight: 900; } .center { max-width: @center-width; text-align: center; - background: rgba(255,255,255,0.6); - padding: 2em; + background: rgb(255,255,255); + padding: 3em 3em 2em 3em; margin: 7% auto 0; position: relative; } @@ -103,23 +166,35 @@ a { text-align: center; } +fieldset #categories { + margin-top: -1.5em; +} + .top_margin { position: absolute; bottom: -3.5em; width: 100%; left: 0; + background-color: white; + padding-bottom: 1em; } .top_margin a { display: inline-block; - margin-right: 1em; - color: #FFF; + margin-right: 0.5em; + margin-left: 0.5em; text-decoration: none; + color: @color-fonts; + padding: .5em 1em; + border-radius: 4px; + font-weight: 500; + font-family: "IBM Plex", monospace; + font-size: 0.8em; } -.top_margin a:hover, -.top_margin a:focus { - text-decoration: underline; +.top_margin a:hover::before, +.top_margin a:focus::before { + content: "/" } @media screen and (max-width: 1000px) { @@ -135,11 +210,13 @@ a { color: @color-fonts; cursor: pointer; font-size: 0.9em; + background: @link-background; + transition: all 0.8s ease; } .checkbox_container label:hover { - background: @color-main; - color: #FFF; + background: @link-background-hover; + color: @color-fonts; } .checkbox_container input[type="checkbox"] { @@ -148,8 +225,8 @@ a { } .checkbox_container input[type="checkbox"]:checked + label { - background: @color-main; - color: #FFF; + background: @link-background-hover; + color: @color-fonts; } #categories_container > div { @@ -183,9 +260,7 @@ a { } .checkbox_container label { display: block; - background: #CCC; padding: 1em; - border: 1px solid #FFF; } .top_margin { position: static; } #categories .hidden { @@ -208,24 +283,23 @@ a { margin-left: 2%; font-size: 0.9em; } - #categories_container > div:nth-child(2n+1) { margin-left: 0; } - .title h1 { - background: url(../img/searx-mobile.png) no-repeat; - width: 200px; - height: 39px; - } } #search_wrapper { position: relative; + display: flex; + flex-direction: row-reverse; } .q { - padding: 0.5em 3em 0.5em 1em; + padding: 0.5em 3em 0.5em 0; width: 100%; font-size: 1.5em; border: 0; - color: #666; + border-bottom: 1px solid @color-main; + color: @color-fonts; + transition: all 1.2s ease; + background-color: white; } #search_submit { @@ -233,11 +307,12 @@ a { top: 0; right: 0; border: 0; - background:url("../img/search-icon.png") no-repeat scroll center center / 65% auto @color-main; + background:url("../img/search-icon.png") no-repeat scroll center center / 57% auto @color-main; text-indent: -9999px; width: 5em; height: 100%; cursor: pointer; + transition: all 1.2s ease; } #search_submit:hover, @@ -245,46 +320,44 @@ a { background-color: @color-focus; } +#search_submit:hover + .q { + border-bottom-color: @color-focus; +} + #sidebar { - background: @color-main; - position: fixed; - top: 0; - right: 0; - width: 15em; - height: 100%; - padding: 1.5em; - text-align: right; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} +#sidebar #apis { + display: flex; + align-items: center; } .right { - position: fixed; - bottom: 1.5em; - width: 15em; - right: 0; - z-index: 1; - padding: 0 1.5em; - text-align: right; + padding-bottom: 0.1em; } .right a { - color: #FFF; - display: block; text-decoration: none; } -.right a:hover, -.right a:focus { - text-decoration: underline; +.right a:hover::before, +.right a:focus::before { + content: "$ "; } #preferences { - background: url("../img/preference-icon.png") no-repeat right center / 12% auto; - padding-right: 1.8em; + text-decoration: none; + font-family: "IBM Plex", mono; + font-weight: 500; + font-size: 0.8em; } -#preferences:hover, -#preferences:focus { - +#preferences:hover::before, +#preferences:focus::before { + content: "/" } #search_url input { @@ -293,8 +366,9 @@ a { } #sidebar > div { - margin-bottom: 1em; - color: #FFF; + margin: 0; + margin-right: 1em; + margin-left: 1em; } #sidebar form { @@ -302,23 +376,19 @@ a { } #sidebar input[type="submit"] { - background: #CCC; border: 0; padding: 0.5em 1em; cursor: pointer; - margin-top: 0.5em; + margin-left: 1em; } #sidebar input[type="submit"]:hover, #sidebar input[type="submit"]:focus { - color: #FFF; - background-color: @color-focus; } #results { - padding-right: 17em; - padding-left: 2em; - padding: 0 17em 0 2em; + max-width: 100ch; + margin: auto; } .result p { @@ -366,13 +436,15 @@ a { } .result_title a { - color: @color-main; + color: @color-fonts; + background-color: @link-background; text-decoration: none; + transition: background 1.2s ease; } .result_title a:hover, .result_title a:focus { - text-decoration: underline; + background-color: @link-background-hover; } .cache_link { @@ -382,7 +454,7 @@ a { } .search.center { - padding-right: 17em; + max-width: 111ch; } #answers { @@ -429,16 +501,17 @@ a { input[type="submit"] { display: inline-block; - background: @color-main; - color: #FFF; + background: @link-background; + color: @color-fonts; border: 0; - padding: 0.6em 1em; + padding: 0.5em 2em; cursor: pointer; + transition: background 1s ease; } input[type="submit"]:hover, input[type="submit"]:focus { - background: @color-focus; + background: @link-background-hover; } .row { @@ -465,10 +538,10 @@ input[type="submit"]:focus { } .row fieldset:last-of-type { - display: block; + //display: block; width: auto; - background: none; - padding: 0; + //background: none; + //padding: 0; } .row fieldset:nth-child(odd) { @@ -476,7 +549,7 @@ input[type="submit"]:focus { } .row fieldset:nth-child(2) { - min-height: 10.5em; + min-height: 9em; } @media screen and (max-width: 900px) { @@ -512,6 +585,9 @@ input[type="submit"]:focus { .search.center { padding-right: 2em; } + .title h1 { + font-size: 15vw; + } } @media screen and (max-width: 400px) { @@ -522,32 +598,25 @@ input[type="submit"]:focus { } fieldset { - border: 0; + border: 2px solid @color-main; + border-radius: 5px; margin: 1em 0; - background: #CCC; + background: white; padding: 1.5em; + } table { - width: 100%; + width: auto; + margin: auto; text-align: left; - border: 1px solid #CCC; border-collapse: collapse; } -table th { - background: #999; - color: #FFF; -} - -table tr:nth-child(odd) { - background: #CCC; -} - table th, table td { padding: 0.5em 1em; - border: 1px solid #FFF; + //border: 1px solid @color-fonts; } .engine_checkbox label { @@ -558,12 +627,12 @@ table td { } .engine_checkbox .deny { - background: @color-main; + background: @color-focus; } .engine_checkbox .allow { display: none; - background: #666; + background: @color-main; } .engine_checkbox input { @@ -580,7 +649,7 @@ table td { .row input[type="submit"] { font-size: 1em; - margin: 1em 0 2em; + margin: 1em 2em 2em 0; } .row .right { @@ -605,19 +674,27 @@ table th { } legend { - background: #EEE; + background: white; padding: 0 1em; position: relative; + border: 2px solid @color-main; + border-radius: 5px; + font-family: "IBM Plex", monospace; + font-size: 0.9em; } select { - border: 1px solid #DDD; - padding: 0.5em 0.8em; + border: 1px solid @color-fonts; + padding: 0.25em 1em; font-size: 1em; + background-color: white; +} + +.preferences-actions > * { + margin-right: 2em; } .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 */ @@ -693,3 +770,15 @@ select { .highlight .lineno::selection { background: transparent; } /* WebKit/Blink Browsers */ .highlight .lineno::-moz-selection { background: transparent; } /* Gecko Browsers */ + +.about-container { + max-width: 90ch; + margin: auto; +} +.about-container a { + background-color: @link-background; + transition: background 1.2s ease; +} +.about-container a:hover { + background-color: @link-background-hover; +}