updated
This commit is contained in:
parent
a1e3b6df96
commit
f9f82d7298
|
@ -2,6 +2,14 @@
|
|||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
|
||||
# v0.2.0
|
||||
|
||||
- Works with new more advanced filebrowser.json
|
||||
- improved GUI
|
||||
- more unified coehisive look
|
||||
-
|
||||
|
||||
# v0.1.4
|
||||
- various UI fixes
|
||||
- Added download button back to toolbar
|
||||
|
|
|
@ -1,12 +1,27 @@
|
|||
<template>
|
||||
<div id="search" @click="open" v-bind:class="{ active, ongoing }">
|
||||
<div id="input">
|
||||
<button v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')">
|
||||
<button
|
||||
v-if="active"
|
||||
class="action"
|
||||
@click="close"
|
||||
:aria-label="$t('buttons.close')"
|
||||
:title="$t('buttons.close')"
|
||||
>
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<i v-else class="material-icons">search</i>
|
||||
<input class="main-input" type="text" @keyup.exact="keyup" @input="submit" ref="input" :autofocus="active"
|
||||
v-model.trim="value" :aria-label="$t('search.search')" :placeholder="$t('search.search')" />
|
||||
<input
|
||||
class="main-input"
|
||||
type="text"
|
||||
@keyup.exact="keyup"
|
||||
@input="submit"
|
||||
ref="input"
|
||||
:autofocus="active"
|
||||
v-model.trim="value"
|
||||
:aria-label="$t('search.search')"
|
||||
:placeholder="$t('search.search')"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
|
||||
<div id="result-list">
|
||||
|
@ -14,7 +29,12 @@
|
|||
Search Context: {{ getContext(this.$route.path) }}
|
||||
</div>
|
||||
<ul v-show="results.length > 0">
|
||||
<li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
|
||||
<li
|
||||
v-for="(s, k) in results"
|
||||
:key="k"
|
||||
@click.stop.prevent="navigateTo(s.url)"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<router-link to="#" event="">
|
||||
<i v-if="s.dir" class="material-icons folder-icons"> folder </i>
|
||||
<i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
|
||||
|
@ -37,13 +57,26 @@
|
|||
</div>
|
||||
</div>
|
||||
<template v-if="isEmpty">
|
||||
<button class="mobile-boxes" v-if="value.length === 0 && !showBoxes " @click="resetSearchFilters()" >Reset filters</button>
|
||||
<button
|
||||
class="mobile-boxes"
|
||||
v-if="value.length === 0 && !showBoxes"
|
||||
@click="resetSearchFilters()"
|
||||
>
|
||||
Reset filters
|
||||
</button>
|
||||
<template v-if="value.length === 0 && showBoxes">
|
||||
<div class="boxes">
|
||||
<h3>{{ $t("search.types") }}</h3>
|
||||
<div>
|
||||
<div class="mobile-boxes" tabindex="0" v-for="(v, k) in boxes" :key="k" role="button"
|
||||
@click="addToTypes('type:' + k)" :aria-label="v.label">
|
||||
<div
|
||||
class="mobile-boxes"
|
||||
tabindex="0"
|
||||
v-for="(v, k) in boxes"
|
||||
:key="k"
|
||||
role="button"
|
||||
@click="addToTypes('type:' + k)"
|
||||
:aria-label="v.label"
|
||||
>
|
||||
<i class="material-icons">{{ v.icon }}</i>
|
||||
<p>{{ v.label }}</p>
|
||||
</div>
|
||||
|
@ -53,10 +86,8 @@
|
|||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isMobile && active" id="result-desktop" ref="result">
|
||||
<div class="searchContext">
|
||||
Search Context: {{ getContext(this.$route.path) }}
|
||||
</div>
|
||||
<div v-show="!isMobile && active" id="result-desktop" ref="result">
|
||||
<div class="searchContext">Search Context: {{ getContext(this.$route.path) }}</div>
|
||||
<div id="result-list">
|
||||
<template>
|
||||
<p v-show="isEmpty && isRunning" id="renew">
|
||||
|
@ -67,37 +98,73 @@
|
|||
<div class="helpButton" @click="toggleHelp()">Help</div>
|
||||
</div>
|
||||
<div class="helpText" v-if="showHelp">
|
||||
<p>Search occurs on each character you type (3 character minimum for search terms).</p>
|
||||
<p><b>The index:</b> Search utilizes the index which automatically gets updated on the configured interval
|
||||
(default: 5 minutes).
|
||||
Searching when the program has just started may result in incomplete results.</p>
|
||||
<p><b>Filter by type:</b> You can have multiple type filters by adding <code>type:condition</code> followed by
|
||||
search terms.</p>
|
||||
<p><b>Multiple Search terms:</b> Additional terms separated by <code>|</code>,
|
||||
for example <code>"test|not"</code> searches for both terms independently.</p>
|
||||
<p><b>File size:</b> Searching files by size may have significantly longer search times.</p>
|
||||
<p>
|
||||
Search occurs on each character you type (3 character minimum for search
|
||||
terms).
|
||||
</p>
|
||||
<p>
|
||||
<b>The index:</b> Search utilizes the index which automatically gets updated
|
||||
on the configured interval (default: 5 minutes). Searching when the program
|
||||
has just started may result in incomplete results.
|
||||
</p>
|
||||
<p>
|
||||
<b>Filter by type:</b> You can have multiple type filters by adding
|
||||
<code>type:condition</code> followed by search terms.
|
||||
</p>
|
||||
<p>
|
||||
<b>Multiple Search terms:</b> Additional terms separated by <code>|</code>,
|
||||
for example <code>"test|not"</code> searches for both terms independently.
|
||||
</p>
|
||||
<p>
|
||||
<b>File size:</b> Searching files by size may have significantly longer
|
||||
search times.
|
||||
</p>
|
||||
</div>
|
||||
<template>
|
||||
<ButtonGroup :buttons="folderSelect" @button-clicked="addToTypes" @remove-button-clicked="removeFromTypes"
|
||||
@disableAll="folderSelectClicked()" @enableAll="resetButtonGroups()" />
|
||||
<ButtonGroup :buttons="typeSelect" @button-clicked="addToTypes" @remove-button-clicked="removeFromTypes"
|
||||
:isDisabled="isTypeSelectDisabled" />
|
||||
<ButtonGroup
|
||||
:buttons="folderSelect"
|
||||
@button-clicked="addToTypes"
|
||||
@remove-button-clicked="removeFromTypes"
|
||||
@disableAll="folderSelectClicked()"
|
||||
@enableAll="resetButtonGroups()"
|
||||
/>
|
||||
<ButtonGroup
|
||||
:buttons="typeSelect"
|
||||
@button-clicked="addToTypes"
|
||||
@remove-button-clicked="removeFromTypes"
|
||||
:isDisabled="isTypeSelectDisabled"
|
||||
/>
|
||||
<div class="sizeConstraints">
|
||||
<div class="sizeInputWrapper">
|
||||
<p>Smaller Than:</p>
|
||||
<input class="sizeInput" v-model="smallerThan" type="text" placeholder="number">
|
||||
<input
|
||||
class="sizeInput"
|
||||
v-model="smallerThan"
|
||||
type="text"
|
||||
placeholder="number"
|
||||
/>
|
||||
<p>MB</p>
|
||||
</div>
|
||||
<div class="sizeInputWrapper">
|
||||
<p>Larger Than:</p>
|
||||
<input class="sizeInput" v-model="largerThan" type="text" placeholder="number">
|
||||
<input
|
||||
class="sizeInput"
|
||||
v-model="largerThan"
|
||||
type="text"
|
||||
placeholder="number"
|
||||
/>
|
||||
<p>MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<ul v-show="results.length > 0">
|
||||
<li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
|
||||
<li
|
||||
v-for="(s, k) in results"
|
||||
:key="k"
|
||||
@click.stop.prevent="navigateTo(s.url)"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<router-link to="#" event="">
|
||||
<i v-if="s.dir" class="material-icons folder-icons"> folder </i>
|
||||
<i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
|
||||
|
@ -118,15 +185,213 @@
|
|||
|
||||
<style>
|
||||
.main-input {
|
||||
width: 100%
|
||||
width: 100%;
|
||||
}
|
||||
.searchContext {
|
||||
width: 100%;
|
||||
padding: .5em 1em;
|
||||
padding: 0.5em 1em;
|
||||
background: var(--blue);
|
||||
color: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
#result-desktop #result-list {
|
||||
transition: width 0.3s ease 0s;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-color: gray;
|
||||
width: 30em;
|
||||
padding-top: 0em;
|
||||
border-bottom-right-radius: 1em;
|
||||
border-width: 2px;
|
||||
border-bottom-left-radius: 1em;
|
||||
background-color: white;
|
||||
max-height: 80vh;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
-webkit-box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#result-list.active {
|
||||
width: 65em !important;
|
||||
max-width: 85vw !important;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes SlideDown {
|
||||
0% {
|
||||
transform: translateY(-3em);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/* Search */
|
||||
#search {
|
||||
flex-basis: auto;
|
||||
min-width: 35em;
|
||||
height: 3em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#search #input {
|
||||
background-color: rgba(100, 100, 100, 0.2);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0em 0.75em;
|
||||
border-radius: 0.3em;
|
||||
transition: 1s ease all;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#search input {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#result-list p {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
/* Hiding scrollbar for Chrome, Safari and Opera */
|
||||
#result-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hiding scrollbar for IE, Edge and Firefox */
|
||||
#result-list {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
}
|
||||
|
||||
.text-container {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
|
||||
#search #result {
|
||||
padding-top: 1em;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
display: flex;
|
||||
top: -4em;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
height: 0;
|
||||
transition: 2s ease height, 2s ease padding;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
body.rtl #search #result {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
#search #result > div > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body.rtl #search #result {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Search Results */
|
||||
body.rtl #search #result ul > * {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#search ul {
|
||||
margin-top: 1em;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#search li {
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
#search #renew {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: none;
|
||||
margin: 1em;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
#search.ongoing #renew {
|
||||
display: block;
|
||||
}
|
||||
#search.active #input {
|
||||
border-top-left-radius: 1em;
|
||||
border-top-right-radius: 1em;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
/* Search Input Placeholder */
|
||||
#search::-webkit-input-placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
#search:-moz-placeholder {
|
||||
opacity: 1;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
#search::-moz-placeholder {
|
||||
opacity: 1;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
#search:-ms-input-placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Search Boxes */
|
||||
#search .boxes {
|
||||
margin: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#search .boxes h3 {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
color: #212121;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
body.rtl #search .boxes h3 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#search .boxes p {
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
|
||||
#search .boxes i {
|
||||
color: #fff !important;
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
#result-desktop {
|
||||
animation: SlideDown 0.5s forwards;
|
||||
}
|
||||
|
||||
.mobile-boxes {
|
||||
cursor: pointer;
|
||||
|
@ -149,7 +414,7 @@
|
|||
-ms-overflow-style: none; /* IE and Edge */
|
||||
}
|
||||
.helpText {
|
||||
padding: 1em
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.sizeConstraints {
|
||||
|
@ -178,7 +443,7 @@
|
|||
border-style: groove;
|
||||
display: flex;
|
||||
background-color: rgb(245, 245, 245);
|
||||
padding: .25em;
|
||||
padding: 0.25em;
|
||||
height: 3em;
|
||||
align-items: center;
|
||||
}
|
||||
|
@ -251,6 +516,16 @@ export default {
|
|||
};
|
||||
},
|
||||
watch: {
|
||||
active(active) {
|
||||
const resultList = document.getElementById("result-list");
|
||||
if (active) {
|
||||
setTimeout(() => {
|
||||
resultList.classList.add("active");
|
||||
}, 100);
|
||||
return true;
|
||||
}
|
||||
resultList.classList.remove("active");
|
||||
},
|
||||
show(val, old) {
|
||||
this.active = val === "search";
|
||||
if (old === "search" && !this.active) {
|
||||
|
@ -305,7 +580,7 @@ export default {
|
|||
return this.ongoing;
|
||||
},
|
||||
searchHelp() {
|
||||
return this.showHelp
|
||||
return this.showHelp;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
@ -334,13 +609,13 @@ export default {
|
|||
parts.pop();
|
||||
parts = parts.join("/") + "/";
|
||||
if (str.endsWith("/")) {
|
||||
parts = "/" + parts
|
||||
parts = "/" + parts;
|
||||
}
|
||||
return parts;
|
||||
},
|
||||
baseName(str) {
|
||||
let parts = str.replace(/(\/$|^\/)/, "").split("/")
|
||||
return parts.pop()
|
||||
let parts = str.replace(/(\/$|^\/)/, "").split("/");
|
||||
return parts.pop();
|
||||
},
|
||||
...mapMutations(["showHover", "closeHovers", "setReload"]),
|
||||
open() {
|
||||
|
@ -359,19 +634,20 @@ export default {
|
|||
},
|
||||
addToTypes(string) {
|
||||
if (this.searchTypes.includes(string)) {
|
||||
return true
|
||||
return true;
|
||||
}
|
||||
if (string == null || string == "") {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
this.searchTypes = this.searchTypes + string + " "
|
||||
this.searchTypes = this.searchTypes + string + " ";
|
||||
|
||||
},
|
||||
resetSearchFilters() {
|
||||
this.searchTypes = "";
|
||||
},
|
||||
removeFromTypes(string) {
|
||||
if (string == null || string == "") {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
this.searchTypes = this.searchTypes.replace(string + " ", "");
|
||||
if (this.isMobile) {
|
||||
|
@ -390,15 +666,15 @@ export default {
|
|||
if (this.value === "" || this.value.length < 3) {
|
||||
this.ongoing = false;
|
||||
this.results = [];
|
||||
this.noneMessage = "Not enough characters to search (min 3)"
|
||||
return
|
||||
this.noneMessage = "Not enough characters to search (min 3)";
|
||||
return;
|
||||
}
|
||||
let searchTypesFull = this.searchTypes
|
||||
let searchTypesFull = this.searchTypes;
|
||||
if (this.largerThan != "") {
|
||||
searchTypesFull = searchTypesFull + "type:largerThan=" + this.largerThan + " "
|
||||
searchTypesFull = searchTypesFull + "type:largerThan=" + this.largerThan + " ";
|
||||
}
|
||||
if (this.smallerThan != "") {
|
||||
searchTypesFull = searchTypesFull + "type:smallerThan=" + this.smallerThan + " "
|
||||
searchTypesFull = searchTypesFull + "type:smallerThan=" + this.smallerThan + " ";
|
||||
}
|
||||
let path = this.$route.path;
|
||||
this.ongoing = true;
|
||||
|
@ -408,13 +684,13 @@ export default {
|
|||
this.$showError(error);
|
||||
}
|
||||
if (this.results.length == 0 && this.ongoing == false) {
|
||||
this.noneMessage = "No results found in indexed search."
|
||||
this.noneMessage = "No results found in indexed search.";
|
||||
}
|
||||
this.ongoing = false;
|
||||
},
|
||||
toggleHelp() {
|
||||
this.showHelp = !this.showHelp
|
||||
}
|
||||
this.showHelp = !this.showHelp;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
|
@ -165,28 +165,7 @@ body.rtl .breadcrumbs a {
|
|||
transition: 0.2s ease width;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes flyInFromTop {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#search.active #input {
|
||||
border-top-left-radius: 1em;
|
||||
border-top-right-radius: 1em;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
#result-desktop {
|
||||
animation: flyInFromTop 0.5s forwards;
|
||||
}
|
||||
|
||||
/* File Selection */
|
||||
#file-selection {
|
||||
|
|
|
@ -59,131 +59,6 @@ header>div div {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
#search {
|
||||
min-width: 40em;
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
#search #input {
|
||||
background-color: rgba(100, 100, 100, 0.2);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0em 0.75em;
|
||||
border-radius: 0.3em;
|
||||
transition: 1s ease all;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#search input {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#result-list p {
|
||||
margin: 1em;
|
||||
}
|
||||
#result-list {
|
||||
width: 60em;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-color: gray;
|
||||
}
|
||||
/* Hiding scrollbar for Chrome, Safari and Opera */
|
||||
#result-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hiding scrollbar for IE, Edge and Firefox */
|
||||
#result-list {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
#result-list {
|
||||
padding-top: 2em;
|
||||
border-bottom-right-radius: 1em;
|
||||
border-width: 2px;
|
||||
border-bottom-left-radius: 1em;
|
||||
background-color: white;
|
||||
max-height: 80vh;
|
||||
left: 50%;
|
||||
max-width: 90vw;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
-webkit-box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.text-container {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
#search #result {
|
||||
padding-top: 1em;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
display: flex;
|
||||
top: -4em;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
height: 0;
|
||||
transition: 2s ease height, 2s ease padding;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
body.rtl #search #result {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
#search #result>div>*:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body.rtl #search #result {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Search Results */
|
||||
body.rtl #search #result ul>* {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#search ul {
|
||||
margin-top: 1em;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#search li {
|
||||
margin: .5em;
|
||||
}
|
||||
|
||||
#search #renew {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: none;
|
||||
margin: 1em;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
#search.ongoing #renew {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Icon Colors */
|
||||
.folder-icons {
|
||||
color: var(--icon-blue);
|
||||
|
@ -205,49 +80,3 @@ body.rtl #search #result ul>* {
|
|||
color: plum;
|
||||
}
|
||||
|
||||
/* Search Input Placeholder */
|
||||
#search::-webkit-input-placeholder {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
#search:-moz-placeholder {
|
||||
opacity: 1;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
#search::-moz-placeholder {
|
||||
opacity: 1;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
#search:-ms-input-placeholder {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
/* Search Boxes */
|
||||
#search .boxes {
|
||||
margin: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#search .boxes h3 {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
color: #212121;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
body.rtl #search .boxes h3 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
#search .boxes p {
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
|
||||
#search .boxes i {
|
||||
color: #fff !important;
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue