Allow user-defined CSS/theming (#227)
* Add custom CSS field to config This allows users to set/customize an instance's theme and appearance to their liking. The config CSS field is prepopulated with all default CSS variable values to allow quick editing. Note that this can be somewhat of a "footgun" if someone updates the CSS to hide all fields/search/etc. Should probably add some sort of bandaid "admin" feature for public instances to employ until the whole cookie/session issue is investigated further. * Symlink all app static files to test dir * Refactor app/misc/*.json -> app/static/settings/*.json The country/language json files are used for user config settings, so the "misc" name didn't really make sense. Also moved these to the static folder to make testing easier. * Fix light theme variables in dark theme css * Minor style tweakingpull/264/head
Ben Busby
3 years ago
committed by
Ben Busby
parent
337d0ebe37
commit
62a9b9e949
@ -0,0 +1,130 @@
|
||||
html {
|
||||
background: var(--whoogle-background) !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--whoogle-background) !important;
|
||||
}
|
||||
|
||||
div {
|
||||
color: var(--whoogle-text) !important;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--whoogle-contrast-text) !important;
|
||||
}
|
||||
|
||||
li a {
|
||||
color: #4b8eaa !important;
|
||||
}
|
||||
|
||||
li {
|
||||
color: var(--whoogle-text) !important;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background: var(--whoogle-background) !important;
|
||||
color: var(--whoogle-text) !important;
|
||||
}
|
||||
|
||||
select {
|
||||
background: var(--whoogle-background) !important;
|
||||
color: var(--whoogle-text) !important;
|
||||
}
|
||||
|
||||
.ZINbbc {
|
||||
background-color: var(--whoogle-result-bg) !important;
|
||||
}
|
||||
|
||||
.bRsWnc {
|
||||
background-color: var(--whoogle-result-bg) !important;
|
||||
}
|
||||
|
||||
a:visited h3 div {
|
||||
color: var(--whoogle-result-visited) !important;
|
||||
}
|
||||
|
||||
a:link h3 div {
|
||||
color: var(--whoogle-result-title) !important;
|
||||
}
|
||||
|
||||
a:link div {
|
||||
color: var(--whoogle-result-url) !important;
|
||||
}
|
||||
|
||||
div span {
|
||||
color: var(--whoogle-secondary-text) !important;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: var(--whoogle-background) !important;
|
||||
color: var(--whoogle-text) !important;
|
||||
}
|
||||
|
||||
#search-bar {
|
||||
color: var(--whoogle-text) !important;
|
||||
background-color: var(--whoogle-background);
|
||||
}
|
||||
|
||||
.home-search {
|
||||
border: 3px solid var(--whoogle-accent) !important;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
background-color: var(--whoogle-background) !important;
|
||||
}
|
||||
|
||||
#search-submit {
|
||||
border: 1px solid var(--whoogle-accent) !important;
|
||||
background: var(--whoogle-accent) !important;
|
||||
color: var(--whoogle-background) !important;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: var(--whoogle-contrast-text) !important;
|
||||
opacity: 75%;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
color: var(--whoogle-accent) !important;
|
||||
}
|
||||
|
||||
.collapsible:after {
|
||||
color: var(--whoogle-accent) !important;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--whoogle-accent) !important;
|
||||
color: var(--whoogle-contrast-text) !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: var(--whoogle-accent) !important;
|
||||
color: var(--whoogle-contrast-text) !important;
|
||||
}
|
||||
|
||||
.active:after {
|
||||
color: var(--whoogle-contrast-text);
|
||||
}
|
||||
|
||||
#gh-link {
|
||||
color: var(--whoogle-accent);
|
||||
}
|
||||
|
||||
.autocomplete-items {
|
||||
border: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
.autocomplete-items div {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
.autocomplete-items div:hover {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
.autocomplete-active {
|
||||
background-color: var(--whoogle-accent) !important;
|
||||
color: var(--whoogle-background) !important;
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
.autocomplete {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.autocomplete-items {
|
||||
position: absolute;
|
||||
border: 1px solid #685e79;
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
z-index: 99;
|
||||
|
||||
/*position the autocomplete items to be the same width as the container:*/
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.autocomplete-items div {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background-color: #222;
|
||||
border-bottom: 1px solid #242424;
|
||||
}
|
||||
|
||||
.autocomplete-items div:hover {
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
.autocomplete-active {
|
||||
background-color: #685e79 !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
details summary {
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
.autocomplete {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.autocomplete-items {
|
||||
position: absolute;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
z-index: 99;
|
||||
|
||||
/*position the autocomplete items to be the same width as the container:*/
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.autocomplete-items div {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
.autocomplete-items div:hover {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
.autocomplete-active {
|
||||
background-color: #685e79 !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
details summary {
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
/* Colors */
|
||||
:root {
|
||||
/* LIGHT THEME COLORS */
|
||||
--whoogle-background: #fff;
|
||||
--whoogle-accent: #685e79;
|
||||
--whoogle-text: #000;
|
||||
--whoogle-contrast-text: #fff;
|
||||
--whoogle-secondary-text: #70757a;
|
||||
--whoogle-result-bg: #fff;
|
||||
--whoogle-result-title: #1967d2;
|
||||
--whoogle-result-url: #0d652d;
|
||||
--whoogle-result-visited: #4b11a8;
|
||||
|
||||
/* DARK THEME COLORS */
|
||||
--whoogle-dark-background: #222;
|
||||
--whoogle-dark-accent: #685e79;
|
||||
--whoogle-dark-text: #fff;
|
||||
--whoogle-dark-contrast-text: #000;
|
||||
--whoogle-dark-secondary-text: #bbb;
|
||||
--whoogle-dark-result-bg: #000;
|
||||
--whoogle-dark-result-title: #1967d2;
|
||||
--whoogle-dark-result-url: #4b11a8;
|
||||
--whoogle-dark-result-visited: #bbbbff;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.0 KiB |
Loading…
Reference in New Issue