]>
Commit | Line | Data |
---|---|---|
dfb058c6 A |
1 | /** |
2 | * General | |
3 | */ | |
4ed6d1ba | 4 | body { |
dfb058c6 | 5 | |
4ed6d1ba A |
6 | } |
7 | ||
dfb058c6 A |
8 | .strong { |
9 | font-weight: bold; | |
10 | } | |
4ed6d1ba | 11 | |
dfb058c6 A |
12 | .clear { |
13 | clear: both; | |
14 | } | |
15 | ||
16 | /** | |
17 | * Extends Pure grids responsive to hide items. | |
18 | * Use xx-0 to hide an item on xx screen. | |
19 | * Display it at any level with xx-visible. | |
20 | */ | |
21 | .pure-u-0 { display: none !important; } | |
22 | @media screen and (min-width: 35.5em) { | |
23 | .pure-u-sm-0 { display: none !important; } | |
24 | .pure-u-sm-visible { display: inherit !important; } | |
25 | } | |
26 | @media screen and (min-width: 48em) { | |
27 | .pure-u-md-0 { display: none !important; } | |
28 | .pure-u-md-visible { display: inherit !important; } | |
29 | } | |
30 | @media screen and (min-width: 64em) { | |
31 | .pure-u-lg-0 { display: none !important; } | |
32 | .pure-u-lg-visible { display: inherit !important; } | |
33 | } | |
34 | @media screen and (min-width: 80em) { | |
35 | .pure-u-xl-0 { display: none !important; } | |
36 | .pure-u-xl-visible { display: inherit !important; } | |
4ed6d1ba A |
37 | } |
38 | ||
39 | /** | |
40 | * MENU | |
41 | **/ | |
dfb058c6 A |
42 | .shaarli-menu { |
43 | position: fixed; | |
44 | top: 0; | |
45 | width: 100%; | |
46 | background: #1b926c; | |
47 | -webkit-font-smoothing: antialiased; | |
48 | /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */ | |
49 | max-height: 2.1em; | |
50 | transition: max-height 0.5s; | |
51 | overflow: hidden; | |
52 | z-index: 999; | |
53 | } | |
54 | ||
55 | .shaarli-menu.open { | |
56 | max-height: 500px; | |
57 | transition: max-height 0.75s; | |
4ed6d1ba A |
58 | } |
59 | ||
60 | .pure-menu-selected { | |
dfb058c6 | 61 | background: #1A694C; |
4ed6d1ba A |
62 | } |
63 | ||
64 | .pure-menu-link, | |
65 | .pure-menu-link:visited, | |
66 | .pure-menu-selected .pure-menu-link, | |
67 | .pure-menu-selected .pure-menu-link:visited { | |
68 | color: #b0ddce; | |
69 | } | |
70 | ||
71 | .pure-menu-link:hover, | |
72 | .pure-menu-selected .pure-menu-link:hover { | |
dfb058c6 | 73 | color: #d1fff0; |
4ed6d1ba A |
74 | background: transparent; |
75 | } | |
76 | ||
4ed6d1ba A |
77 | .menu-toggle { |
78 | width: 34px; | |
79 | height: 34px; | |
80 | position: absolute; | |
81 | top: 0; | |
82 | right: 0; | |
83 | display: none; | |
84 | } | |
85 | ||
86 | .menu-toggle .bar { | |
87 | background-color: #b0ddce; | |
88 | display: block; | |
89 | width: 20px; | |
90 | height: 2px; | |
91 | border-radius: 100px; | |
92 | position: absolute; | |
93 | top: 18px; | |
94 | right: 7px; | |
95 | transition: all 0.5s; | |
96 | } | |
97 | ||
98 | .menu-toggle .bar:first-child { | |
99 | transform: translateY(-6px); | |
100 | } | |
101 | ||
102 | .menu-toggle.x .bar { | |
103 | transform: rotate(45deg); | |
104 | } | |
105 | ||
106 | .menu-toggle.x .bar:first-child { | |
107 | transform: rotate(-45deg); | |
108 | } | |
109 | ||
110 | @media screen and (max-width: 64em) { | |
111 | .menu-toggle { | |
112 | display: block; | |
113 | } | |
114 | } | |
115 | ||
116 | /** | |
dfb058c6 | 117 | * Header |
4ed6d1ba | 118 | */ |
dfb058c6 A |
119 | #header { |
120 | width: 100%; | |
121 | height: 150px; | |
d63f7cf5 | 122 | background: url(../img/noise.png), #1fa67a url(../img/logo2.png) no-repeat fixed 10px 2.5em; |
4ed6d1ba | 123 | } |
dfb058c6 A |
124 | |
125 | #header h1 { | |
126 | position: fixed; | |
127 | float: left; | |
d63f7cf5 A |
128 | margin: 45px 0 0 125px; |
129 | width: 55%; | |
dfb058c6 | 130 | height: 100px; |
4ed6d1ba | 131 | } |
dfb058c6 A |
132 | |
133 | #header h1 a, #header h1 a:visited { | |
134 | /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */ | |
135 | display: -ms-flexbox; | |
136 | display: flex; | |
137 | flex-direction: column; | |
138 | justify-content: center; | |
139 | ||
140 | overflow: hidden; | |
141 | height: 100px; | |
142 | color: #b0ddce; | |
143 | text-decoration: none; | |
144 | z-index: 1; | |
145 | ||
146 | /* TODO: font? */ | |
4ed6d1ba | 147 | } |
dfb058c6 A |
148 | |
149 | #header h1 a:hover { | |
150 | color: #d1fff0; | |
151 | } | |
152 | ||
153 | #linkcount { | |
d63f7cf5 A |
154 | /* position: fixed; */ |
155 | position: absolute; | |
dfb058c6 A |
156 | top: 40px; |
157 | right: 10px; | |
158 | color: #b0ddce; | |
159 | font-size: 0.8em; | |
160 | } | |
161 | ||
162 | #search { | |
d63f7cf5 A |
163 | /** |
164 | * Can't make it work with awesomplete list z-index. Any idea? | |
165 | * position: fixed; | |
166 | */ | |
167 | position: absolute; | |
168 | top: 60px; | |
dfb058c6 | 169 | right: 10px; |
d63f7cf5 | 170 | width: 30%; |
dfb058c6 A |
171 | text-align: right; |
172 | } | |
173 | ||
d63f7cf5 A |
174 | #search input[type="text"] { |
175 | margin: 0 0 5px 0; | |
176 | padding: 5px 5px 3px 15px; | |
177 | height: 20px; | |
178 | width: 140px; | |
179 | transition: width .5s ease; | |
180 | background: #1b926c; | |
181 | border: medium none currentColor; | |
182 | border-radius: 25px; | |
183 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; | |
184 | color: #b0ddce; | |
185 | } | |
186 | ||
187 | #search button { | |
188 | background: transparent; | |
189 | border: none; | |
190 | color: #b0ddce; | |
191 | } | |
192 | ||
193 | #search button:hover { | |
194 | color: #fff; | |
195 | } | |
196 | ||
197 | /** | |
4d7cd1b0 | 198 | * CONTENT - GENERAL |
d63f7cf5 | 199 | */ |
dfb058c6 A |
200 | #content { |
201 | position: relative; | |
202 | box-shadow: 0 -2px 1em #797979; | |
203 | z-index: 2; | |
204 | background: url(../img/noise.png) #979797; | |
4d7cd1b0 A |
205 | } |
206 | ||
207 | /** | |
208 | * CONTENT - LINKLIST PAGING | |
209 | */ | |
210 | @media screen and (min-width: 35.5em) { | |
211 | .linklist-paging { | |
212 | margin: 2.1em 0 0 0; | |
213 | } | |
214 | } | |
215 | ||
216 | @media screen and (min-width: 64em) { | |
217 | .linklist-paging { | |
218 | margin: 0; | |
219 | } | |
220 | } | |
221 | ||
222 | .linklist-filters { | |
223 | margin: 10px 0; | |
224 | color: #252525; | |
225 | } | |
226 | ||
227 | .linklist-filters span { | |
228 | margin: 0 0 0 10px; | |
229 | } | |
230 | ||
231 | .linklist-filters a { | |
232 | padding: 2px 5px; | |
233 | text-decoration: none; | |
234 | } | |
235 | ||
236 | .linklist-filters .filter-off { | |
237 | color: #252525; | |
238 | background: #c8c8c8; | |
239 | } | |
240 | ||
241 | .linklist-filters .filter-on { | |
242 | color: #b0ddce; | |
243 | background: #1b926c; | |
244 | } | |
245 | ||
246 | .linklist-pages { | |
247 | margin: 10px 0; | |
248 | color: #252525; | |
249 | text-align: center; | |
250 | } | |
251 | ||
252 | .linklist-pages a { | |
253 | color: #252525; | |
254 | text-decoration: none; | |
255 | } | |
256 | ||
257 | .linklist-pages a:hover { | |
258 | color: #fff; | |
259 | } | |
260 | ||
261 | .linksperpage { | |
262 | margin: 10px 0; | |
263 | text-align: right; | |
264 | color: #252525; | |
265 | } | |
266 | ||
267 | .linksperpage a { | |
268 | padding: 2px 5px; | |
269 | text-decoration: none; | |
270 | color: #252525; | |
271 | background: #c8c8c8; | |
272 | border: solid 1px #979797; | |
273 | } | |
274 | ||
275 | .linksperpage form { | |
276 | display: inline; | |
277 | margin: 0 10px 0 0; | |
278 | } | |
279 | ||
280 | .linksperpage input[type="text"] { | |
281 | width: 28px; | |
282 | height: 20px; | |
283 | margin: 0 0 5px 0; | |
284 | padding: 3px 5px 3px 8px; | |
285 | background: #c8c8c8; | |
286 | border: medium none currentColor; | |
287 | border-radius: 25px; | |
288 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; | |
289 | color: #252525; | |
290 | font-size: 0.8em; | |
4ed6d1ba | 291 | } |