fix reader
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / components / _search.scss
1 .c-search-result-fragment {
2     display: block;
3     padding: 21px;
4     margin-top: 20px;
5     border: 1px solid #D9D9D9;
6     border-radius: 10px;
7     
8     .c-search-result-fragment-title {
9         display: block;
10         font-size: 21.5px;
11         line-height: 1.4em;
12         color: #474747;
13     }
14
15     .c-search-result-fragment-author {
16         display: block;
17         font-size: 15px;
18         line-height: 1.2em;
19         color: #808080;
20     }
21     
22     .c-search-result-fragment-text {
23         margin-top: 16px;
24         padding: 6px 12px;
25         display: block;
26         color: #474747;
27         background: #F2F2F2;
28         border-radius: 4px;
29         font-size: 18px;
30         line-height: 1.5em;
31
32         &:hover {
33             text-decoration: none;
34             background-color: #d2d2d2;
35         }
36
37         strong {
38             font-weight: normal;
39             background: #FFEA00;
40         }
41     }
42 }
43
44
45 .c-search-result {
46     margin: 20px 0;
47     padding: 0;
48     list-style: none;
49     font-size: 18px;
50     line-height: 27px;
51
52     &.c-search-result-author {
53         li {
54             padding-left: 52px;
55             figure {
56                 font-size: 0;
57                 display: flex;
58                 align-items: center;
59                 justify-content: center;
60                 width: 40px;
61                 height: 40px;
62                 margin-left: -52px;
63                 margin-right: 12px;
64                 overflow: hidden;
65                 border-radius: 50%;
66                 img {
67                     width: 100%;
68                 }
69             }
70         }
71     }
72
73     li {
74         margin-bottom: 5px;
75         a {
76             display: flex;
77             align-items: center;
78         }
79     }
80 }
81
82
83 .c-search-result-collection {
84     display: flex;
85     margin-top: 20px;
86     gap: 20px;
87     flex-wrap: wrap;
88 }
89
90
91
92 .c-search-result-pd {
93     margin-top: 64px;
94     padding: 34px;
95     font-size: 18px;
96     line-height: 24px;
97     background: #E1F1F2;
98     border-radius: 10px;
99
100     h2 {
101         color: #007880;
102         font-size: 21px;
103         line-height: 30px;
104         font-weight: bold;
105         margin: 0;
106     }
107
108     p {
109         font-size: 18px;
110         line-height: 27px;
111     }
112     
113     > div {
114         display: flex;
115         flex-wrap: wrap;
116         gap: 20px;
117         margin-top: 26px;
118         > div {
119             background: white;
120             padding: 21px;
121             border-radius: 10px;
122             width: 343px;
123             a {
124                 color: #474747;
125                 line-height: 28px;
126             }
127
128             strong {
129                 display: block;
130                 margin-bottom: 10px;
131                 color: #083F4D;
132                 font-size: 25px;
133                 line-height: 30px;
134             }
135
136             em {
137                 font-style: normal;
138                 font-weight: bold;
139             }
140         }
141     }
142 }
143
144
145 .ui-autocomplete {
146     .ui-menu-item {
147         &:before {
148         }
149
150         span {
151             border-radius: 18px;
152             padding: 0px 10px;
153         }
154
155         &.type-info {
156             &:before {
157                 content: '\1f6c8';
158                 position: absolute;
159                 left: 0;
160                 width:36px;
161                 line-height: 36px;
162                 text-align: center;
163             }
164         }
165         &.type-theme {
166             &:before {
167                 content: '☆';
168                 position: absolute;
169                 left: 0;
170                 width:36px;
171                 line-height: 36px;
172                 text-align: center;
173             }
174         }
175         &.type-genre {
176             a, a:hover {
177                 span {
178                     color: black;
179                     background: $wl-green;
180                 }
181             }
182         }
183         &.type-epoch {
184             a, a:hover {
185                 span {
186                     background: $wl-teal;
187                     color: white;
188                 }
189             }
190         }
191         &.type-kind {
192             a, a:hover {
193                 span {
194                     color: black;
195                     background: $wl-red;
196                 }
197             }
198         }
199         &.type-author {
200             img {
201                 border-radius: 18px;
202             }
203         }
204         &.type-set {
205             &:before {
206                 content: '';
207                 position: absolute;
208                 left: 0;
209                 width:36px;
210                 line-height: 36px;
211                 text-align: center;
212                 font-family: 'wl' !important;
213                 color: $wl-red;
214             }
215         }
216         
217         a.ui-menu-item-wrapper {
218             display: flex;
219             transition: none;
220             padding: 0;
221             align-items: center;
222
223             &:hover {
224                 text-decoration: none;
225             }
226             
227             div {
228                 width: 36px;
229                 height: 36px;
230                 display: flex;
231                 align-items: center;
232                 justify-content: center;
233                 margin-right: 5px;
234                 img {
235                     max-height: 36px;
236                     max-width: 36px;
237                 }
238             }
239         }
240     }
241 }
242