LibreMiami
/
libremiami-search
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add styles

This commit is contained in:
Roberto Beltran 2020-09-12 21:41:07 +00:00
parent 932821e7ff
commit 22711ca071
2 changed files with 1085 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

898
searx/static/themes/courgette/css/style.css
View File

File diff suppressed because one or more lines are too long

287
searx/static/themes/courgette/less/style.less
View File

@ -1,12 +1,69 @@
@color-main: #3498DB; @color-main: #F890E7;
@color-focus: #0665A2; @color-focus: #0BD3D3;
@color-other-links: #666; @color-other-links: #666;
@color-fonts: #333; @color-fonts: #282828;
@center-width: 70em; @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; -webkit-box-sizing: border-box;
@ -18,16 +75,12 @@ input[type="search"] {
-webkit-appearance: textfield; -webkit-appearance: textfield;
} }
h2 {
color: @color-other-links;
text-transform: uppercase;
}
body { body {
font-family: sans-serif; font-family: "Source Sans Pro", sans-serif;
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
background: #EEE; background: white;
} }
html { html {
@ -35,24 +88,34 @@ html {
min-height: 100%; min-height: 100%;
} }
h1 {
margin-bottom: 0;
}
a { a {
color: @color-other-links; text-decoration: none;
color: inherit;
} }
.title h1 { .title h1 {
font-size:7em; font-size:7em;
color:@color-main; color: #1D353B;
margin:0 auto; margin:0 auto;
line-height:100px; line-height:100px;
margin-top:-20px; margin-top:-20px;
padding-bottom:20px; padding-bottom:20px;
font-weight: 300;
}
.title h1 .Miami {
font-weight: 900;
} }
.center { .center {
max-width: @center-width; max-width: @center-width;
text-align: center; text-align: center;
background: rgba(255,255,255,0.6); background: rgb(255,255,255);
padding: 2em; padding: 3em 3em 2em 3em;
margin: 7% auto 0; margin: 7% auto 0;
position: relative; position: relative;
} }
@ -103,23 +166,35 @@ a {
text-align: center; text-align: center;
} }
fieldset #categories {
margin-top: -1.5em;
}
.top_margin { .top_margin {
position: absolute; position: absolute;
bottom: -3.5em; bottom: -3.5em;
width: 100%; width: 100%;
left: 0; left: 0;
background-color: white;
padding-bottom: 1em;
} }
.top_margin a { .top_margin a {
display: inline-block; display: inline-block;
margin-right: 1em; margin-right: 0.5em;
color: #FFF; margin-left: 0.5em;
text-decoration: none; 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:hover::before,
.top_margin a:focus { .top_margin a:focus::before {
text-decoration: underline; content: "/"
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
@ -135,11 +210,13 @@ a {
color: @color-fonts; color: @color-fonts;
cursor: pointer; cursor: pointer;
font-size: 0.9em; font-size: 0.9em;
background: @link-background;
transition: all 0.8s ease;
} }
.checkbox_container label:hover { .checkbox_container label:hover {
background: @color-main; background: @link-background-hover;
color: #FFF; color: @color-fonts;
} }
.checkbox_container input[type="checkbox"] { .checkbox_container input[type="checkbox"] {
@ -148,8 +225,8 @@ a {
} }
.checkbox_container input[type="checkbox"]:checked + label { .checkbox_container input[type="checkbox"]:checked + label {
background: @color-main; background: @link-background-hover;
color: #FFF; color: @color-fonts;
} }
#categories_container > div { #categories_container > div {
@ -183,9 +260,7 @@ a {
} }
.checkbox_container label { .checkbox_container label {
display: block; display: block;
background: #CCC;
padding: 1em; padding: 1em;
border: 1px solid #FFF;
} }
.top_margin { position: static; } .top_margin { position: static; }
#categories .hidden { #categories .hidden {
@ -208,24 +283,23 @@ a {
margin-left: 2%; margin-left: 2%;
font-size: 0.9em; 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 { #search_wrapper {
position: relative; position: relative;
display: flex;
flex-direction: row-reverse;
} }
.q { .q {
padding: 0.5em 3em 0.5em 1em; padding: 0.5em 3em 0.5em 0;
width: 100%; width: 100%;
font-size: 1.5em; font-size: 1.5em;
border: 0; border: 0;
color: #666; border-bottom: 1px solid @color-main;
color: @color-fonts;
transition: all 1.2s ease;
background-color: white;
} }
#search_submit { #search_submit {
@ -233,11 +307,12 @@ a {
top: 0; top: 0;
right: 0; right: 0;
border: 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; text-indent: -9999px;
width: 5em; width: 5em;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
transition: all 1.2s ease;
} }
#search_submit:hover, #search_submit:hover,
@ -245,46 +320,44 @@ a {
background-color: @color-focus; background-color: @color-focus;
} }
#search_submit:hover + .q {
border-bottom-color: @color-focus;
}
#sidebar { #sidebar {
background: @color-main; display: flex;
position: fixed; align-items: center;
top: 0; justify-content: center;
right: 0; flex-wrap: wrap;
width: 15em; }
height: 100%; #sidebar #apis {
padding: 1.5em; display: flex;
text-align: right; align-items: center;
} }
.right { .right {
position: fixed; padding-bottom: 0.1em;
bottom: 1.5em;
width: 15em;
right: 0;
z-index: 1;
padding: 0 1.5em;
text-align: right;
} }
.right a { .right a {
color: #FFF;
display: block;
text-decoration: none; text-decoration: none;
} }
.right a:hover, .right a:hover::before,
.right a:focus { .right a:focus::before {
text-decoration: underline; content: "$ ";
} }
#preferences { #preferences {
background: url("../img/preference-icon.png") no-repeat right center / 12% auto; text-decoration: none;
padding-right: 1.8em; font-family: "IBM Plex", mono;
font-weight: 500;
font-size: 0.8em;
} }
#preferences:hover, #preferences:hover::before,
#preferences:focus { #preferences:focus::before {
content: "/"
} }
#search_url input { #search_url input {
@ -293,8 +366,9 @@ a {
} }
#sidebar > div { #sidebar > div {
margin-bottom: 1em; margin: 0;
color: #FFF; margin-right: 1em;
margin-left: 1em;
} }
#sidebar form { #sidebar form {
@ -302,23 +376,19 @@ a {
} }
#sidebar input[type="submit"] { #sidebar input[type="submit"] {
background: #CCC;
border: 0; border: 0;
padding: 0.5em 1em; padding: 0.5em 1em;
cursor: pointer; cursor: pointer;
margin-top: 0.5em; margin-left: 1em;
} }
#sidebar input[type="submit"]:hover, #sidebar input[type="submit"]:hover,
#sidebar input[type="submit"]:focus { #sidebar input[type="submit"]:focus {
color: #FFF;
background-color: @color-focus;
} }
#results { #results {
padding-right: 17em; max-width: 100ch;
padding-left: 2em; margin: auto;
padding: 0 17em 0 2em;
} }
.result p { .result p {
@ -366,13 +436,15 @@ a {
} }
.result_title a { .result_title a {
color: @color-main; color: @color-fonts;
background-color: @link-background;
text-decoration: none; text-decoration: none;
transition: background 1.2s ease;
} }
.result_title a:hover, .result_title a:hover,
.result_title a:focus { .result_title a:focus {
text-decoration: underline; background-color: @link-background-hover;
} }
.cache_link { .cache_link {
@ -382,7 +454,7 @@ a {
} }
.search.center { .search.center {
padding-right: 17em; max-width: 111ch;
} }
#answers { #answers {
@ -429,16 +501,17 @@ a {
input[type="submit"] { input[type="submit"] {
display: inline-block; display: inline-block;
background: @color-main; background: @link-background;
color: #FFF; color: @color-fonts;
border: 0; border: 0;
padding: 0.6em 1em; padding: 0.5em 2em;
cursor: pointer; cursor: pointer;
transition: background 1s ease;
} }
input[type="submit"]:hover, input[type="submit"]:hover,
input[type="submit"]:focus { input[type="submit"]:focus {
background: @color-focus; background: @link-background-hover;
} }
.row { .row {
@ -465,10 +538,10 @@ input[type="submit"]:focus {
} }
.row fieldset:last-of-type { .row fieldset:last-of-type {
display: block; //display: block;
width: auto; width: auto;
background: none; //background: none;
padding: 0; //padding: 0;
} }
.row fieldset:nth-child(odd) { .row fieldset:nth-child(odd) {
@ -476,7 +549,7 @@ input[type="submit"]:focus {
} }
.row fieldset:nth-child(2) { .row fieldset:nth-child(2) {
min-height: 10.5em; min-height: 9em;
} }
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
@ -512,6 +585,9 @@ input[type="submit"]:focus {
.search.center { .search.center {
padding-right: 2em; padding-right: 2em;
} }
.title h1 {
font-size: 15vw;
}
} }
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
@ -522,32 +598,25 @@ input[type="submit"]:focus {
} }
fieldset { fieldset {
border: 0; border: 2px solid @color-main;
border-radius: 5px;
margin: 1em 0; margin: 1em 0;
background: #CCC; background: white;
padding: 1.5em; padding: 1.5em;
} }
table { table {
width: 100%; width: auto;
margin: auto;
text-align: left; text-align: left;
border: 1px solid #CCC;
border-collapse: collapse; border-collapse: collapse;
} }
table th {
background: #999;
color: #FFF;
}
table tr:nth-child(odd) {
background: #CCC;
}
table th, table th,
table td { table td {
padding: 0.5em 1em; padding: 0.5em 1em;
border: 1px solid #FFF; //border: 1px solid @color-fonts;
} }
.engine_checkbox label { .engine_checkbox label {
@ -558,12 +627,12 @@ table td {
} }
.engine_checkbox .deny { .engine_checkbox .deny {
background: @color-main; background: @color-focus;
} }
.engine_checkbox .allow { .engine_checkbox .allow {
display: none; display: none;
background: #666; background: @color-main;
} }
.engine_checkbox input { .engine_checkbox input {
@ -580,7 +649,7 @@ table td {
.row input[type="submit"] { .row input[type="submit"] {
font-size: 1em; font-size: 1em;
margin: 1em 0 2em; margin: 1em 2em 2em 0;
} }
.row .right { .row .right {
@ -605,19 +674,27 @@ table th {
} }
legend { legend {
background: #EEE; background: white;
padding: 0 1em; padding: 0 1em;
position: relative; position: relative;
border: 2px solid @color-main;
border-radius: 5px;
font-family: "IBM Plex", monospace;
font-size: 0.9em;
} }
select { select {
border: 1px solid #DDD; border: 1px solid @color-fonts;
padding: 0.5em 0.8em; padding: 0.25em 1em;
font-size: 1em; font-size: 1em;
background-color: white;
}
.preferences-actions > * {
margin-right: 2em;
} }
.highlight .hll { background-color: #ffffcc } .highlight .hll { background-color: #ffffcc }
.highlight { background: #f8f8f8; }
.highlight .c { color: #408080; font-style: italic } /* Comment */ .highlight .c { color: #408080; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */ .highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */ .highlight .k { color: #008000; font-weight: bold } /* Keyword */
@ -693,3 +770,15 @@ select {
.highlight .lineno::selection { background: transparent; } /* WebKit/Blink Browsers */ .highlight .lineno::selection { background: transparent; } /* WebKit/Blink Browsers */
.highlight .lineno::-moz-selection { background: transparent; } /* Gecko 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;
}