1/**
2 * This file provides styles for the search results page (?do=search)
3 * and the AJAX search popup.
4 */
5
6/* general
7********************************************************************/
8
9/* search hit in normal text */
10.dokuwiki .search_hit {
11    color: #000;
12    background-color: var(--color-yellow-5);
13}
14
15/* "nothing found" at search + media */
16.dokuwiki div.nothing {
17    margin-bottom: 1.4em;
18    color: var(--color-gray-1);
19    text-align: center;
20}
21
22/* search results page
23********************************************************************/
24
25/*____________ advanced search form ____________*/
26.dokuwiki .search-results-form fieldset.search-form {
27    width: 100%;
28    margin: 1em 0;
29    border-radius: 0.25rem;
30
31    input[name="q"] {
32        width: 50%;
33        padding: 0.3125rem 0.5rem;
34        margin-right: 0.5rem;
35    }
36
37    input[name="q"]:focus {
38        outline: none;
39    }
40
41    button {
42        padding: 0.3125rem 0.625rem;
43    }
44
45    button.toggleAssistant {
46        float: right;
47        background-color: transparent;
48        color: var(--color-blue-3);
49        border-color: transparent;
50    }
51
52    button[type="submit"] {
53        background-color: rgba(34,139,230,.15);
54        color: var(--color-blue-3);
55        border-color: transparent;
56    }
57
58    button[type="submit"]:hover,
59    button.toggleAssistant:hover {
60        background-color: rgba(34,139,230,.2);
61    }
62
63    .advancedOptions {
64        padding: 1em 0;
65
66        > div {
67            display: inline-block;
68            position: relative;
69            margin: 0 0.5em;
70        }
71
72        div.toggle {
73            // default closed toggle state
74            div.current {
75                cursor: pointer;
76                max-width: 10em;
77                white-space: nowrap;
78                overflow: hidden;
79                text-overflow: ellipsis;
80
81                &::after {
82                    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="16" height="16" viewBox="0 0 24 20" stroke-width="1.5" stroke="%23ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>');
83                    font-size: smaller;
84                    color: @ini_text_alt;
85                    margin-left: 0.25rem;
86                    vertical-align: middle;
87                }
88            }
89            div.changed {
90                font-weight: bold;
91            }
92            ul {
93                display: none;
94                position: absolute;
95                border: 1px solid @ini_border;
96                background-color: @ini_background;
97                padding: 0.25em 0.5em;
98                text-align: left;
99                min-width: 10em;
100                max-width: 15em;
101                max-height: 50vh;
102                overflow: auto;
103                z-index: 100;
104                border-radius: 0.25rem;
105                li {
106                    margin: 0.25em 0;
107                    list-style: none;
108
109                    a {
110                        display: block;
111                    }
112                }
113            }
114
115            // open toggle state
116            &.open {
117                div.current::after {
118                    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-up" width="16" height="16" viewBox="0 0 24 20" stroke-width="1.5" stroke="%23ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 15l6 -6l6 6" /></svg>');
119                }
120
121                ul {
122                    display: block;
123                }
124            }
125        }
126    }
127}
128
129[dir=rtl] .search-results-form fieldset.search-form .advancedOptions {
130    div.toggle ul {
131        text-align: right;
132    }
133}
134
135
136/*____________ matching pagenames ____________*/
137
138.dokuwiki div.search_quickresult {
139    margin-bottom: 1.4em;
140
141    ul {
142        padding: 0;
143
144        li {
145            float: left;
146            width: 12em;
147            margin: 0 1.5em;
148        }
149    }
150}
151
152[dir=rtl] .dokuwiki div.search_quickresult ul li {
153    float: right;
154}
155
156/*____________ search results ____________*/
157
158.dokuwiki dl.search_results {
159    margin-bottom: 1.2em;
160
161    /* search heading */
162    dt {
163        font-weight: normal;
164        margin-bottom: .2em;
165    }
166
167    /* last modified line */
168    dd.meta {
169        margin: 0 0 .2em 0;
170        font-style: italic;
171    }
172
173    /* search snippet */
174    dd.snippet {
175        color: @ini_text_alt;
176        background-color: inherit;
177        margin: 0 0 1.2em 0;
178
179        /* search hit in search results */
180        strong.search_hit {
181            font-weight: normal;
182            /* color is set in general */
183        }
184
185        /* ellipsis separating snippets */
186        .search_sep {
187            color: @ini_text;
188            background-color: inherit;
189        }
190    }
191}
192
193/* AJAX quicksearch popup
194********************************************************************/
195
196.dokuwiki form.search {
197    div.no {
198        position: relative;
199    }
200
201    /* .JSpopup */
202    div.ajax_qsearch {
203        position: absolute;
204        top: 0;
205        left: -13.5em; /* -( width of #qsearch__in + padding of .ajax_qsearch + a bit more ) */
206        width: 12em;
207        padding: 0.5em;
208        font-size: .9em;
209        z-index: 20;
210        text-align: left;
211        display: none;
212
213        strong {
214            display: block;
215            margin-bottom: .3em;
216        }
217
218        ul {
219            margin: 0 !important;
220            padding: 0 !important;
221
222            li {
223                margin: 0;
224                padding: 0;
225                display: block !important;
226            }
227        }
228    }
229}
230
231[dir=rtl] .dokuwiki form.search div.ajax_qsearch {
232    left: auto;
233    right: -13.5em;
234    text-align: right;
235}
236
237#qsearch__out {
238    border: solid 1px @ini_border;
239    border-radius: 0.25rem;
240    box-shadow: none;
241}