forked from Ponysearch/Ponysearch
[simple theme] new color theme and result on mobile and tablet
* clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
This commit is contained in:
MrPaulBlack
parent
09324f3492
commit
3daa024c04
5 changed files with 89 additions and 92 deletions
|
|
@ -48,7 +48,8 @@
|
|||
&.open {
|
||||
display: block;
|
||||
background-color: var(--color-autocomplete-background);
|
||||
border: 1px solid var(--color-base-border);
|
||||
color: var(--color-autocomplete-font);
|
||||
border: 1px solid var(--color-autocomplete-border);
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
z-index: 100;
|
||||
|
|
|
|||
|
|
@ -6,24 +6,37 @@
|
|||
|
||||
html {
|
||||
/// Base Colors
|
||||
--color-base: #084999;
|
||||
--color-base-font: #444;
|
||||
--color-base-border: #ddd;
|
||||
--color-base-shadow: #ccc;
|
||||
--color-base-background: #fff;
|
||||
--color-url-font: #29314d;
|
||||
--color-url-visited-font: #684898;
|
||||
--color-header-footer-background: #f7f7f7;
|
||||
--color-url-visited-font: #80b;
|
||||
|
||||
/// Header Colors
|
||||
--color-header-background: #f7f7f7;
|
||||
--color-header-border: #ddd;
|
||||
|
||||
/// Footer Colors
|
||||
--color-footer-background: #f7f7f7;
|
||||
--color-footer-border: #ddd;
|
||||
|
||||
/// Sidebar Colors
|
||||
--color-sidebar-border: #ddd;
|
||||
--color-sidebar-font: #000;
|
||||
|
||||
/// BackToTop Colors
|
||||
--color-backtotop-border: #ddd;
|
||||
--color-backtotop-background: #fff;
|
||||
--color-backtotop-shadow: #ccc;
|
||||
|
||||
/// Button Colors
|
||||
--color-btn-background: #084999;
|
||||
--color-btn-background: #3050ff;
|
||||
--color-btn-font: #fff;
|
||||
|
||||
/// Search Input Colors
|
||||
--color-search-border: #ddd;
|
||||
--color-search-border: #bbb;
|
||||
--color-search-background: #fff;
|
||||
--color-search-font: #222;
|
||||
--color-search-background-hover: #084999;
|
||||
--color-search-background-hover: #3050ff;
|
||||
|
||||
/// Modal Colors
|
||||
--color-error: #db3434;
|
||||
|
|
@ -34,70 +47,65 @@ html {
|
|||
--color-success-background: lighten(#42db34, 40%);
|
||||
|
||||
/// Categories Colors
|
||||
--color-categories-item-selected-font: #084999;
|
||||
--color-categories-item-border-selected: #084999;
|
||||
--color-categories-item-selected-font: #3050ff;
|
||||
--color-categories-item-border-selected: #3050ff;
|
||||
|
||||
/// Autocompleter Colors
|
||||
/// Autocomplete Colors
|
||||
--color-autocomplete-font: #000;
|
||||
--color-autocomplete-border: #bbb;
|
||||
--color-autocomplete-background: #fff;
|
||||
--color-autocomplete-background-hover: #f7f7f7;
|
||||
|
||||
/// Results
|
||||
--color-result-torrent-border: lightgray;
|
||||
--color-result-top-border: #e8e7e6;
|
||||
--color-result-vim-selected: #f7f7f7;
|
||||
--color-result-description-highlight-font: #000;
|
||||
/// Answer Colors
|
||||
--color-answer-border: #ddd;
|
||||
--color-answer-font: #000;
|
||||
|
||||
// Link to result
|
||||
--color-result-link-font: #084999;
|
||||
--color-result-link-font-highlight: #084999;
|
||||
--color-result-link-visited-font: var(--color-url-visited-font);
|
||||
|
||||
// Url to result
|
||||
/// Results Colors
|
||||
--color-result-shadow: #ccc;
|
||||
--color-result-border: #ddd;
|
||||
--color-result-url-font: #000;
|
||||
|
||||
// Search-URL
|
||||
--color-result-search-url-border: #888;
|
||||
--color-result-search-url-font: #444;
|
||||
|
||||
// Publish Date
|
||||
--color-result-vim-selected: #f7f7f7;
|
||||
--color-result-vim-arrow: #000bbb;
|
||||
--color-result-description-highlight-font: #000;
|
||||
--color-result-link-font: #000bbb;
|
||||
--color-result-link-font-highlight: #000bbb;
|
||||
--color-result-link-visited-font: #80b;
|
||||
--color-result-publishdate-font: #777;
|
||||
--color-result-engines-font: #777;
|
||||
--color-result-search-url-border: #ddd;
|
||||
--color-result-search-url-font: #000;
|
||||
|
||||
// Images
|
||||
// Images Colors
|
||||
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
|
||||
--color-result-image-span-font: #fff;
|
||||
--color-result-image-background: #084999;
|
||||
--color-result-image-background: #000bbb;
|
||||
|
||||
/// Settings
|
||||
--color-settings-tr-hover: #ececec;
|
||||
/// Settings Colors
|
||||
--color-settings-tr-hover: #f7f7f7;
|
||||
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
|
||||
|
||||
/// Other
|
||||
--color-engines-font: #888;
|
||||
|
||||
/// From Toolkit
|
||||
/// Toolkit Colors
|
||||
--color-toolkit-badge-font: #fff;
|
||||
--color-toolkit-badge-background: #777;
|
||||
--color-toolkit-kbd-font: #fff;
|
||||
--color-toolkit-kbd-background: #000;
|
||||
--color-toolkit-dialog-border: #000;
|
||||
--color-toolkit-dialog-border: #ddd;
|
||||
--color-toolkit-dialog-background: #fff;
|
||||
--color-toolkit-tabs-label-border: #fff;
|
||||
--color-toolkit-tabs-section-border: #000;
|
||||
--color-toolkit-tabs-section-border: #ddd;
|
||||
--color-toolkit-select-border: #ddd;
|
||||
--color-toolkit-checkbox-onoff-background: #dcdcdc;
|
||||
--color-toolkit-checkbox-onoff-background: #ddd;
|
||||
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
|
||||
--color-toolkit-checkbox-onoff-label-background: #084999;
|
||||
--color-toolkit-checkbox-onoff-checked-background: #dcdcdc;
|
||||
--color-toolkit-checkbox-onoff-label-background: #3050ff;
|
||||
--color-toolkit-checkbox-onoff-checked-background: #ddd;
|
||||
--color-toolkit-checkbox-label-background: #fff;
|
||||
--color-toolkit-checkbox-label-shadow1: #fff;
|
||||
--color-toolkit-checkbox-label-shadow2: rgba(0, 0, 0, 0.5);
|
||||
--color-toolkit-checkbox-label-border: #333;
|
||||
--color-toolkit-checkbox-input-border: #084999;
|
||||
--color-toolkit-checkbox-label-border: #ddd;
|
||||
--color-toolkit-checkbox-input-border: #3050ff;
|
||||
--color-toolkit-engine-tooltip-border: #ddd;
|
||||
--color-toolkit-engine-tooltip-shadow: #ccc;
|
||||
--color-toolkit-engine-tooltip-background: #fff;
|
||||
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
|
||||
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
|
||||
--color-toolkit-engine-tooltip-border: #ddd;
|
||||
--color-toolkit-engine-tooltip-shadow: rgba(0, 0, 0, 0.1);
|
||||
--color-toolkit-engine-tooltip-background: #fff;
|
||||
}
|
||||
|
||||
/// General Size
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
#search {
|
||||
padding: 0 2em 0 @results-offset;
|
||||
margin: 0;
|
||||
background: var(--color-header-footer-background);
|
||||
border-bottom: 1px solid var(--color-base-border);
|
||||
background: var(--color-header-background);
|
||||
border-bottom: 1px solid var(--color-header-border);
|
||||
}
|
||||
|
||||
#search_wrapper {
|
||||
|
|
@ -224,7 +224,7 @@
|
|||
}
|
||||
|
||||
input[type="checkbox"]:focus + label {
|
||||
box-shadow: 0 0 8px var(--color-base);
|
||||
box-shadow: 0 0 8px var(--color-categories-item-border-selected);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label {
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ html {
|
|||
.text-size-adjust;
|
||||
|
||||
color: var(--color-base-font);
|
||||
background-color: var(--color-base-background);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -76,8 +77,8 @@ footer {
|
|||
padding: 1rem 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--color-header-footer-background);
|
||||
border-top: 1px solid var(--color-base-border);
|
||||
background-color: var(--color-footer-background);
|
||||
border-top: 1px solid var(--color-footer-border);
|
||||
overflow: hidden;
|
||||
|
||||
p {
|
||||
|
|
@ -132,11 +133,11 @@ article[data-vim-selected]::before {
|
|||
padding: 2px;
|
||||
content: ">";
|
||||
font-weight: bold;
|
||||
color: var(--color-base);
|
||||
color: var(--color-result-vim-arrow);
|
||||
}
|
||||
|
||||
article.result-images[data-vim-selected] {
|
||||
background: var(--color-base);
|
||||
background: var(--color-result-vim-arrow);
|
||||
}
|
||||
|
||||
article.result-images[data-vim-selected]::before {
|
||||
|
|
@ -256,7 +257,7 @@ article.result-images[data-vim-selected]::before {
|
|||
|
||||
.engines {
|
||||
float: right;
|
||||
color: var(--color-engines-font);
|
||||
color: var(--color-result-engines-font);
|
||||
|
||||
span {
|
||||
font-size: smaller;
|
||||
|
|
@ -337,28 +338,6 @@ article.result-images[data-vim-selected]::before {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
.torrent_result {
|
||||
border-left: 10px solid var(--color-result-torrent-border);
|
||||
padding-left: 3px;
|
||||
|
||||
p {
|
||||
margin: 3px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-result-link-font);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--color-result-link-visited-font);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#results {
|
||||
margin: 2rem 2rem 0 @results-offset;
|
||||
display: grid;
|
||||
|
|
@ -448,8 +427,10 @@ article.result-images[data-vim-selected]::before {
|
|||
|
||||
#answers {
|
||||
grid-area: answers;
|
||||
border: 1px solid var(--color-base-border);
|
||||
border: 1px solid var(--color-answer-border);
|
||||
padding: 0.9em;
|
||||
margin-bottom: @results-margin;
|
||||
color: var(--color-answer-font);
|
||||
.rounded-corners;
|
||||
|
||||
h4 {
|
||||
|
|
@ -473,10 +454,11 @@ article.result-images[data-vim-selected]::before {
|
|||
#sidebar {
|
||||
grid-area: sidebar;
|
||||
word-wrap: break-word;
|
||||
color: var(--color-sidebar-font);
|
||||
|
||||
.infobox {
|
||||
margin: 10px 0 10px;
|
||||
border: 1px solid var(--color-base-border);
|
||||
border: 1px solid var(--color-sidebar-border);
|
||||
padding: 0.9em;
|
||||
font-size: 0.9em;
|
||||
.rounded-corners;
|
||||
|
|
@ -567,12 +549,12 @@ article.result-images[data-vim-selected]::before {
|
|||
}
|
||||
|
||||
#backToTop {
|
||||
border: 1px solid var(--color-base-border);
|
||||
border: 1px solid var(--color-backtotop-border);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
box-shadow: 0 0 5px var(--color-base-shadow);
|
||||
background: var(--color-base-background);
|
||||
box-shadow: 0 0 5px var(--color-backtotop-shadow);
|
||||
background: var(--color-backtotop-background);
|
||||
position: fixed;
|
||||
bottom: 8rem;
|
||||
left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
|
||||
|
|
@ -611,6 +593,7 @@ article.result-images[data-vim-selected]::before {
|
|||
}
|
||||
|
||||
#sidebar {
|
||||
margin-bottom: @results-margin;
|
||||
padding: 0;
|
||||
float: none;
|
||||
border: none;
|
||||
|
|
@ -630,11 +613,6 @@ article.result-images[data-vim-selected]::before {
|
|||
}
|
||||
|
||||
.result {
|
||||
border-bottom: 1px solid var(--color-result-top-border);
|
||||
margin: 0;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 6px;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 1px 0;
|
||||
}
|
||||
|
|
@ -753,9 +731,14 @@ article.result-images[data-vim-selected]::before {
|
|||
margin: 0 5px 2px 5px;
|
||||
}
|
||||
|
||||
.infobox {
|
||||
box-shadow: 0 0 5px var(--color-result-shadow);
|
||||
}
|
||||
|
||||
#corrections,
|
||||
#answers {
|
||||
margin: 0 5px 1em 5px;
|
||||
box-shadow: 0 0 5px var(--color-result-shadow);
|
||||
}
|
||||
|
||||
#results {
|
||||
|
|
@ -769,12 +752,17 @@ article.result-images[data-vim-selected]::before {
|
|||
|
||||
.result {
|
||||
padding: 8px 10px 6px 10px;
|
||||
margin: @results-tablet-offset;
|
||||
border: 1px solid var(--color-result-border);
|
||||
box-shadow: 0 0 5px var(--color-result-shadow);
|
||||
.rounded-corners;
|
||||
}
|
||||
|
||||
.result-images {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -392,8 +392,7 @@ select {
|
|||
top: 0;
|
||||
left: 0;
|
||||
background: var(--color-toolkit-checkbox-label-background);
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 1px 1px var(--color-toolkit-checkbox-label-shadow1), 0 1px 4px var(--color-toolkit-checkbox-label-shadow2);
|
||||
.rounded-corners;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
|
|
@ -495,12 +494,13 @@ select {
|
|||
padding: 0.5rem 1rem;
|
||||
margin: 0 0 0 2rem;
|
||||
border: 1px solid var(--color-toolkit-engine-tooltip-border);
|
||||
box-shadow: 2px 2px 2px 0 var(--color-toolkit-engine-tooltip-shadow);
|
||||
box-shadow: 0 0 5px var(--color-toolkit-engine-tooltip-shadow);
|
||||
background: var(--color-toolkit-engine-tooltip-background);
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
z-index: 1000000;
|
||||
text-align: left;
|
||||
.rounded-corners;
|
||||
}
|
||||
|
||||
th:hover .engine-tooltip,
|
||||
|
|
|
|||
Loading…
Reference in a new issue