aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default/css/shaarli.css
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2017-02-27 20:24:28 +0100
committerGitHub <noreply@github.com>2017-02-27 20:24:28 +0100
commit5978588578ca103152598ccfbe41019b12e00a4f (patch)
treeeedbb83c420f6af103440bcafbe6b79738ce7521 /tpl/default/css/shaarli.css
parent9e5a37cc7f4eb1c83222a94eb83d4e99ce4460a4 (diff)
parent7dcbfde5ffbc057a44f710e3be7e4856d235e90b (diff)
downloadShaarli-5978588578ca103152598ccfbe41019b12e00a4f.tar.gz
Shaarli-5978588578ca103152598ccfbe41019b12e00a4f.tar.zst
Shaarli-5978588578ca103152598ccfbe41019b12e00a4f.zip
Merge pull request #754 from ArthurHoaro/webdesign2
New default template
Diffstat (limited to 'tpl/default/css/shaarli.css')
-rw-r--r--tpl/default/css/shaarli.css1678
1 files changed, 832 insertions, 846 deletions
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 7ca567e7..b937c596 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -1,1208 +1,1194 @@
1/* Cascading Stylesheet for Shaarli - https://github.com/shaarli/Shaarli */ 1/**
2 2 * General
3 */
3body { 4body {
4 font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif; 5 background: #d0d0d0;
5 font-size: 10pt;
6 background-color: #ffffff;
7 word-wrap: break-word;
8}
9
10input, textarea {
11 background-color: #dedede;
12 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff));
13 background: -webkit-linear-gradient(#dedede, #ffffff);
14 background: -moz-linear-gradient(#dedede, #ffffff);
15 background: -ms-linear-gradient(#dedede, #ffffff);
16 background: -o-linear-gradient(#dedede, #ffffff);
17 background: linear-gradient(#dedede, #ffffff);
18 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
19 padding: 5px;
20 border-radius: 3px 3px 3px 3px;
21 border: none;
22 color: #000;
23} 6}
24 7
25a { 8.strong {
26 text-decoration: none;
27}
28
29h1 {
30 font-size: 20pt;
31 font-weight: bold; 9 font-weight: bold;
32 font-style: italic;
33 margin-bottom: 20px;
34} 10}
35 11
36em { 12.clear {
37 font-style: italic; 13 clear: both;
38} 14}
39 15
40strong { 16.center {
41 font-weight: bold; 17 text-align: center;
18 margin: auto;
42} 19}
43 20
44/* Buttons */ 21.label {
45.bigbutton, #pageheader a.bigbutton {
46 background-color: #c0c0c0;
47 background: -moz-linear-gradient(#c0c0c0, #ffffff) repeat scroll 0 0 transparent;
48 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c0c0c0), to(#ffffff));
49 background: -webkit-linear-gradient(#c0c0c0, #ffffff);
50 background: -ms-linear-gradient(#c0c0c0, #ffffff);
51 background: -o-linear-gradient(#c0c0c0, #ffffff);
52 background: linear-gradient(#c0c0c0, #ffffff);
53 border-radius: 3px 3px 3px 3px;
54 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
55 cursor: pointer;
56 height: 24px;
57 padding: 0 5px;
58 margin: 0 5px 0 0;
59 color: #606060;
60 border-style: outset;
61 border-width: 1px;
62 display: inline-block; 22 display: inline-block;
23 padding: .25em .4em;
24 font-size: 75%;
25 font-weight: 700;
26 line-height: 1;
27 text-align: center;
28 white-space: nowrap;
29 vertical-align: baseline;
30 border-radius: .25rem;
63} 31}
64 32
65a.bigbutton, #pageheader a.bigbutton { 33pre {
66 height: 22px; 34 max-width: 100%;
67 line-height: 22px;
68} 35}
69 36
70.smallbutton { 37@font-face {
71 background-color: #c0c0c0; 38 font-family: 'Roboto Slab';
72 background: -moz-linear-gradient(#c0c0c0, #ffffff) repeat scroll 0 0 transparent; 39 font-weight: 400;
73 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c0c0c0), to(#ffffff)); 40 font-style: normal;
74 background: -webkit-linear-gradient(#c0c0c0, #ffffff); 41 src:
75 background: -ms-linear-gradient(#c0c0c0, #ffffff); 42 local('Fira Sans'),
76 background: -o-linear-gradient(#c0c0c0, #ffffff); 43 local('Fira-Sans-regular'),
77 background: linear-gradient(#c0c0c0, #ffffff); 44 url('../fonts/Fira-Sans-regular.woff2') format('woff2'),
78 border-radius: 3px 3px 3px 3px; 45 url('../fonts/Fira-Sans-regular.woff') format('woff');
79 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
80 cursor: pointer;
81 height: 20px;
82 margin-left: 5px;
83 padding: 0 5px;
84 color: #606060;
85 border-style: outset;
86 border-width: 1px;
87} 46}
88 47
89/* Small tab on the left of each link with edit/delete buttons. */ 48/**
90.button_edit, .button_delete { 49 * Extends Pure grids responsive to hide items.
91 border-radius: 0; 50 * Use xx-0 to hide an item on xx screen.
92 box-shadow: none; 51 * Display it at any level with xx-visible.
93 border-style: none; 52 */
94 border-width: 0; 53.pure-u-0 { display: none !important; }
95 padding: 0; 54@media screen and (min-width: 35.5em) {
96 background: none; 55 .pure-u-sm-0 { display: none !important; }
56 .pure-u-sm-visible { display: inline-block !important; }
97} 57}
98 58@media screen and (min-width: 48em) {
99.linkeditbuttons { 59 .pure-u-md-0 { display: none !important; }
100 position: absolute; 60 .pure-u-md-visible { display: inline-block !important; }
101 left: 2px;
102 padding: 4px 2px 2px 2px;
103
104 -webkit-border-radius: 0px 6px 6px 0px;
105 -moz-border-radius: 0px 6px 6px 0px;
106 -o-border-radius: 0px 6px 6px 0px;
107 -ms-border-radius: 0px 6px 6px 0px;
108 border-radius: 0px 6px 6px 0px;
109} 61}
110 62@media screen and (min-width: 64em) {
111#pageheader #logo { 63 .pure-u-lg-0 { display: none !important; }
112 background-image: url('../../../images/logo.png'); 64 .pure-u-lg-visible { display: inline-block !important; }
113 background-repeat: no-repeat;
114 float: left;
115 margin: 0 10px 0 10px;
116 width: 105px;
117 height: 55px;
118 cursor: pointer;
119} 65}
120 66@media screen and (min-width: 80em) {
121#pageheader #menu { 67 .pure-u-xl-0 { display: none !important; }
122 width: 100%; 68 .pure-u-xl-visible { display: inline-block !important; }
123} 69}
124 70
125#pageheader #menu ul { 71.pure-g [class*="pure-u"]{
126 margin: auto; 72 font-family: Roboto Slab, Arial, sans-serif;
127 padding: 7px 0px 0px 0px;
128 float: none;
129} 73}
130 74
131#pageheader #menu ul li { 75/**
132 list-style: none; 76 * Make pure-extras alert closable.
133 display: inline; 77 */
134 position: relative; 78.pure-alert-closable .fa-times {
135 box-sizing: border-box; 79 float: right;
136} 80}
137 81.pure-alert-close {
138#pageheader a { 82 cursor: pointer;
139 background-color: #333333;
140 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#000000));
141 background: -webkit-linear-gradient(#333333, #000000);
142 background: -moz-linear-gradient(#333333, #000000);
143 background: -ms-linear-gradient(#333333, #000000);
144 background: -o-linear-gradient(#333333, #000000);
145 background: linear-gradient(#333333, #000000);
146 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
147 padding: 5px;
148 border-radius: 3px 3px 3px 3px;
149 margin: 10px 3px 3px 3px;
150 color: #A2DD42;
151 text-decoration: none;
152 line-height: 2.5;
153 white-space: nowrap;
154} 83}
155 84
156#pageheader #linkcount { 85.pure-alert-success {
157 float: right; 86 background-color: #1b926c;
158 font-style: italic;
159 color: #bbb;
160 text-align: right;
161 padding-right: 5px;
162 margin: 3px 3px 0px 0px;
163}
164
165#pageheader {
166 background-color: #333333;
167 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#111111));
168 background: -webkit-linear-gradient(#333333, #111111);
169 background: -moz-linear-gradient(#333333, #111111);
170 background: -ms-linear-gradient(#333333, #111111);
171 background: -o-linear-gradient(#333333, #111111);
172 background: linear-gradient(#333333, #111111);
173 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
174 width: auto;
175 padding: 0 10px 5px 10px;
176 margin: auto;
177} 87}
178 88
179#pageheader .search { 89.anchor:target {
90 padding-top: 40px;
91}
92/**
93 * MENU
94 **/
95.shaarli-menu {
96 position: fixed;
97 top: 0;
180 width: 100%; 98 width: 100%;
181 white-space: nowrap; 99 --height: 50px;
100 background: #1b926c;
101 -webkit-font-smoothing: antialiased;
102 /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
103 max-height: 45px;
104 transition: max-height 0.5s;
105 overflow: hidden;
106 z-index: 999;
182} 107}
183 108
184#toolsdiv a { 109/* Chrome bugfix: with 100% height, it only displays the first element. */
185 clear: both; 110.pure-menu-item {
111 height: 45px;
186} 112}
187 113
188#toolsdiv #bookmark { 114.shaarli-menu.open {
189 clear: none; 115 max-height: 500px;
116 transition: max-height 0.75s;
190} 117}
191 118
192#toolsdiv a span { 119.head-logo {
193 color: #ffffff; 120 float: left;
121 margin: 0 5px 0 0;
194} 122}
195 123
196.linksperpage, .tagfilter, .searchform, .addform { 124.pure-menu-link,
197 background-color: #dedede; 125.pure-menu-link:visited,
198 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff)); 126.pure-menu-selected .pure-menu-link,
199 background: -webkit-linear-gradient(#dedede, #ffffff); 127.pure-menu-selected .pure-menu-link:visited {
200 background: -moz-linear-gradient(#dedede, #ffffff); 128 padding: 0.8em 1em;
201 background: -ms-linear-gradient(#dedede, #ffffff); 129 color: #f5f5f5;
202 background: -o-linear-gradient(#dedede, #ffffff);
203 background: linear-gradient(#dedede, #ffffff);
204 display: inline;
205 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
206 padding: 5px;
207 border: none;
208 border-radius: 3px 3px 3px 3px;
209 margin: 10px 3px 3px 3px;
210 color: #cecece;
211} 130}
212 131
213.linksperpage { 132.pure-menu-link:hover, .pure-menu-link:focus,
214 box-shadow: 0 0 0 rgba(0, 0, 0, 0.5); 133.pure-menu-selected .pure-menu-link:hover,
215 padding: 3px; 134.pure-menu-selected .pure-menu-link:focus {
135 color: #fff;
136 background: transparent;
216} 137}
217 138
218.linksperpage input, .tagfilter input, .searchform input, .addform input { 139.pure-menu-item:hover::after {
219 border: none; 140 margin: -4px auto 0 auto;
220 color: #606060; 141 display: block;
221 background: none; 142 content:"";
222 box-shadow: none; 143 background: #fff;
223 padding: 5px; 144 height: 4px;
145 width: 100%;
224} 146}
225 147
226.linksperpage input { 148.menu-toggle {
227 padding: 0; 149 width: 34px;
150 height: 45px;
151 position: absolute;
152 top: 5px;
153 right: 0;
154 display: none;
228} 155}
229 156
230.searchform #searchform_value { 157.menu-toggle .bar {
231 width: 30%; 158 background-color: #b0ddce;
159 display: block;
160 width: 20px;
161 height: 2px;
162 border-radius: 100px;
163 position: absolute;
164 top: 18px;
165 right: 7px;
166 transition: all 0.5s;
232} 167}
233 168
234.tagfilter { 169.menu-toggle .bar:first-child {
235 margin-left:24px; 170 transform: translateY(-6px);
236} 171}
237 172
238.tagfilter div.awesomplete { 173.menu-toggle.x .bar {
239 width: 15%; 174 transform: rotate(45deg);
240} 175}
241 176
242.tagfilter #tagfilter_value { 177.menu-toggle.x .bar:first-child {
243 display: inline; 178 transform: rotate(-45deg);
244} 179}
245 180
246.tagfilter li { 181@media screen and (max-width: 64em) {
247 color: black; 182 .menu-toggle {
183 display: block;
184 }
248} 185}
249 186
250.tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton { 187.header-buttons {
251 background-color: #dedede; 188 text-align: right;
252 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff));
253 background: -webkit-linear-gradient(#dedede, #ffffff);
254 background: -moz-linear-gradient(#dedede, #ffffff);
255 background: -ms-linear-gradient(#dedede, #ffffff);
256 background: -o-linear-gradient(#dedede, #ffffff);
257 background: linear-gradient(#dedede, #ffffff);
258 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
259 padding: 0 5px 0 5px;
260 margin: 5px 0 5px 0;
261 height: 20px;
262 border-radius: 3px 3px 3px 3px;
263 cursor: pointer;
264} 189}
265 190
266#shaarli_title { 191.linkcount {
267 font-weight: bold; 192 color: #252525;
268 font-style: italic; 193 font-size: 0.8em;
269 margin-top: 0;
270} 194}
271 195
272#shaarli_title a { 196@media screen and (min-width: 64em) {
273 color: #fff !important; 197 .linkcount {
198 position: absolute;
199 right: 5px;
200 }
274} 201}
275 202
276#pageheader a:visited { 203#search, #search-linklist {
277 color: #98C943; 204 text-align: center;
278 text-decoration: none; 205 width: 100%;
279} 206}
280 207
281#pageheader a:hover { 208#search input[type="text"], #search-linklist input[type="text"] {
282 color: #FFFFC9; 209 padding: 0 5px;
283 text-decoration: none; 210 height: 30px;
211 width: 260px;
212 background: #f5f5f5;
213 border: medium none currentColor;
214 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset;
215 border-radius: 2px;
216 color: #252525;
284} 217}
285 218
286#pageheader a:active { 219/* because chrome */
287 color: #bbb; 220#search input[type="text"]::-webkit-input-placeholder,
288 text-decoration: none; 221#search-linklist input[type="text"]::-webkit-input-placeholder {
222 color: #777777;
289} 223}
290 224
291#searchcriteria { 225#search button,
292 padding: 4px 0px 5px 5px; 226#search-linklist button {
293 font-weight: bold; 227 background: transparent;
228 border: none;
294} 229}
295 230
296.paging { 231#search button {
297 padding: 5px; 232 color: #f5f5f5;
298 background-color: #777;
299 color: #ccc;
300 text-align: center;
301 clear: both;
302} 233}
303 234
304.paging a:link { 235#search-linklist button {
305 color: #ccc; 236 color: #252525;
306 text-decoration: none;
307} 237}
308 238
309.paging a:visited { 239#search button:hover,
310 color: #ccc; 240#search-linklist button:hover {
241 color: #fff;
311} 242}
312 243
313.paging a:hover { 244#search-linklist {
314 color: #FFFFC9; 245 padding: 5px 0;
315} 246}
316 247
317.paging a:active { 248@media screen and (min-width: 64em) {
318 color: #fff; 249 #search .searchform,
319} 250 #search-linklist .searchform {
251 margin-right: 25px;
252 text-align: right;
253 }
320 254
321.paging_privatelinks { 255 #search .tagfilter,
322 float: left; 256 #search-linklist .tagfilter {
257 margin-left: 25px;
258 text-align: left;
259 }
323} 260}
324 261@media screen and (max-width: 64em) {
325.paging_linksperpage { 262 #search, #search * {
326 float: right; 263 visibility: hidden;
327 padding-right: 5px; 264 }
328 margin: 0px 10px 2px 0px;
329} 265}
330 266
331.paging_linksperpage form.linksperpage { 267#header-login-form input[type="text"], #header-login-form input[type="password"] {
332 display: inline; 268 width: 200px;
333} 269}
334 270
335.paging_linksperpage form.linksperpage input { 271/* because chrome */
336 height: 15px; 272#header-login-form input[type="text"]::-webkit-input-placeholder,
273#header-login-form input[type="password"]::-webkit-input-placeholder {
274 color: #777777;
337} 275}
338 276
339.paging_current { 277.subheader-form {
340 display: inline; 278 visibility: hidden;
341 color: #fff; 279 position: fixed;
342 padding: 0 20 0 20; 280 width: 100%;
281 text-align: center;
282 background: #1b926c;
283 display: block;
284 z-index: 999;
285 height: 30px;
286 padding: 5px 0;
343} 287}
344 288
345.paging_older { 289@media screen and (min-width: 64em) {
346 margin-right: 15px; 290 .subheader-form.open, .subheader-form.open * {
291 visibility: visible;
292 }
347} 293}
348 294
349.paging_newer { 295.subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
350 margin-left: 15px; 296 margin: 0 0 5px 0;
297 padding: 5px 5px 3px 15px;
298 height: 20px;
299 width: 20%;
300 background: #f5f5f5;
301 border: medium none currentColor;
302 border-radius: 2px;
303 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
304 color: #252525;
351} 305}
352 306
353#headerform { 307/* because chrome */
354 color: #ffffff; 308.subheader-form input[type="text"]::-webkit-input-placeholder,
355 padding: 5px 5px 5px 5px; 309.subheader-form input[type="password"]::-webkit-input-placeholder
356 clear: both; 310{
311 color: #252525;
357} 312}
358 313
359#headerform input.linkurl { 314.subheader-form .remember-me {
360 width: 50%; 315 display: inline-block;
361 font-size: inherit; 316 width: auto;
317 padding: 5px 20px 3px 20px;
318 cursor: pointer;
362} 319}
363 320
364#headerform label { 321.subheader-form .remember-me label, .subheader-form .remember-me input {
365 cursor: pointer; 322 cursor: pointer;
366 margin-right: 10px;
367} 323}
368 324
369#headerform label[for=longlastingsession] { 325.subheader-form input[type="submit"] {
370 display: block; 326 display: inline-block;
371 width: 100%; 327 margin: 0 0 5px 0;
372 margin-top: 5px; 328 padding: 4px 0 4px 0;
329 height: 28px;
330 width: 100px;
331 background: #1b926c;
332 border: 1px solid #f5f5f5;
333 color: #f5f5f5;
334 border-radius: 2px;
373} 335}
374 336
375#toolsdiv { 337.subheader-form input[type="submit"]:hover {
376 color: #ffffff; 338 background: #f5f5f5;
377 padding: 5px 5px 5px 5px; 339 color: #1b926c;
378 clear: left;
379} 340}
380 341
381#uploaddiv { 342.new-version-message {
382 color: #ffffff; 343 text-align: center;
383 padding: 5px 5px 5px 5px;
384 clear: left;
385} 344}
386 345
387#editlinkform { 346.new-version-message a {
388 height: 100%; 347 color: rgb(151, 96, 13);
389 padding: 5px 5px 5px 15px; 348 font-weight: bold;
390 width: 80%;
391 clear: left;
392} 349}
393 350
394#editlinkform label { 351/**
395 cursor: pointer; 352 * CONTENT - GENERAL
396 color: #ffffff; 353 */
354#content {
355 position: relative;
356 z-index: 2;
357 margin-top: 45px;
397} 358}
398 359
399#editlinkform textarea, #editlinkform .lf_input { 360/**
400 width: 100%; 361 * Plugins additional forms
362 */
363.toolbar-plugin {
364 margin: 5px 0;
365 text-align: center;
401} 366}
402 367
403#linklist li { 368.toolbar-plugin input[type="text"] {
404 padding: 4px 10px 15px 20px; 369 padding: 0 5px;
405 border-top: 1px solid #bbb; 370 height: 30px;
406 clear: both; 371 width: 300px;
407 background-color: #F2F2F2; 372 background: #f5f5f5;
408 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F2F2F2), to(#ffffff)); 373 border: medium none currentColor;
409 background: -webkit-linear-gradient(#F2F2F2, #ffffff); 374 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset;
410 background: -moz-linear-gradient(#F2F2F2, #ffffff); 375 border-radius: 2px;
411 background: -ms-linear-gradient(#F2F2F2, #ffffff); 376 color: #252525;
412 background: -o-linear-gradient(#F2F2F2, #ffffff);
413 background: linear-gradient(#F2F2F2, #ffffff);
414} 377}
415 378
416/* 379/* because chrome */
417#linklist li.publicLinkHightLight:hover, #linklist li:hover { 380.toolbar-plugin input[type="text"]::-webkit-input-placeholder {
418 background: #E9FFCE; 381 color: #777777;
419} 382}
420*/
421 383
422.linkdate { 384.toolbar-plugin input[type="submit"] {
423 font-size:8pt; 385 padding: 0 10px;
424 color:#888; 386 height: 30px;
387 background: #f5f5f5;
388 border: medium none currentColor;
389 border-radius: 2px;
390 color: #252525;
425} 391}
426 392
427.linkdate a { 393.toolbar-plugin input[type="submit"]:hover {
428 color:#E28E3F; 394 background: #fff;
429} 395}
430 396
431#linklist li.private { 397@media screen and (max-width: 64em) {
432 background: url('../images/private.png') no-repeat 4px center; 398 .toolbar-plugin input[type="text"] {
433 padding-left: 30px; 399 width: 70%;
434}
435 400
436#linklist li { 401 }
437 padding-left: 30px;
438} 402}
439 403
440.private .linktitle a { 404/**
441 color: #969696; 405 * CONTENT - LINKLIST PAGING
406 * 64em -> lg
407 */
408.linklist-filters {
409 margin: 10px 0;
410 color: #252525;
411 font-size: 0.9em;
442} 412}
443 413
444.linktitle { 414.linklist-filters a {
445 font-size: 14pt; 415 padding: 5px 8px;
446 font-weight: bold; 416 text-decoration: none;
447} 417}
448 418
449.linktitle a { 419.linklist-filters .filter-off {
450 text-decoration: none; 420 color: #252525;
451 color: #80AD48; 421 background: #f5f5f5;
452} 422}
453 423
454.linktitle a:hover { 424.linklist-filters .filter-on {
455 color: #F57900; 425 color: #b0ddce;
426 background: #1b926c;
456} 427}
457 428
458.linkdate { 429.linklist-pages {
459 font-size: 8pt; 430 margin: 10px 0;
460 color: #888; 431 color: #252525;
432 text-align: center;
461} 433}
462 434
463.linkdate a { 435.linklist-pages a {
464 background-image: url('../images/calendar.png'); 436 color: #252525;
465 padding: 2px 0 3px 20px;
466 background-repeat: no-repeat;
467 text-decoration: none; 437 text-decoration: none;
468 color: #E28E3F;
469} 438}
470 439
471.linkdate a:hover { 440.linklist-pages a:hover {
472 color: #F57900 } 441 color: #fff;
473
474.linkurl {
475 font-size: 8pt;
476 color: #4BAA74;
477} 442}
478 443
479.linkdescription { 444.linksperpage {
480 color: #000; 445 margin: 10px 0;
481 margin-top: 0; 446 text-align: right;
482 margin-bottom: 12px; 447 color: #252525;
483 font-weight: normal; 448 font-size: 0.9em;
484 overflow: auto;
485} 449}
486 450
487.linkdescription a { 451.linksperpage a {
452 padding: 5px 5px;
488 text-decoration: none; 453 text-decoration: none;
489 color: #3465A4; 454 color: #252525;
455 background: #f5f5f5;
490} 456}
491 457
492.linkdescription a:hover { 458.linksperpage a, .linksperpage input[type="text"] {
493 color: #F57900; 459 display: inline-block;
460 width: 20px;
461 text-align: center;
494} 462}
495 463
496.linktaglist { 464.linksperpage form {
497 padding-top: 10px; 465 display: inline;
498 line-height: 200%;
499} 466}
500 467
501.linktag { 468.linksperpage input[type="text"] {
502 font-size: 9pt;
503 background-color: #F2F2F2;
504 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F2F2F2), to(#ffffff));
505 background: -webkit-linear-gradient(#F2F2F2, #ffffff);
506 background: -moz-linear-gradient(#F2F2F2, #ffffff);
507 background: -ms-linear-gradient(#F2F2F2, #ffffff);
508 background: -o-linear-gradient(#F2F2F2, #ffffff);
509 background: linear-gradient(#F2F2F2, #ffffff);
510 box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
511 padding: 3px 5px 3px 20px;
512 height: 20px; 469 height: 20px;
513 border-radius: 3px; 470 margin: 0;
514 cursor: pointer; 471 padding: 4px 5px 3px 8px;
515 background-image: url('../images/tag_blue.png'); 472 background: #f5f5f5;
516 background-repeat: no-repeat; 473 border: medium none currentColor;
517 background-position: 3px center; 474 color: #252525;
518 background-color: #ffffff; 475 font-size: 0.8em;
519} 476}
520 477
521.linktag:hover { 478/**
522 border-color: #555573; 479 * CONTENT - LINKLIST ITEMS
523 color: #000; 480 */
481.linklist-item {
482 margin: 0 0 15px 0;
483 background: #f5f5f5;
484 box-shadow: 2px 2px 0.5em #797979;
524} 485}
525 486
526.linktag a { 487.linklist-item-title, .linklist-item-title h2 {
527 color: #777; 488 margin: 0;
528 text-decoration: none; 489 word-wrap: break-word;
529} 490}
530 491
531.linktag .remove { 492.linklist-item-title {
532 border-left: 1px solid #aaa; 493 position: relative;
533 padding-left: 5px; 494 background: #f5f5f5;
534 color:#6767A7;
535} 495}
536 496
537.linkshort { 497.linklist-item-title h2 {
538 font-size: 8pt; 498 padding: 3px 10px 0 10px;
539 color: #888; 499 line-height: 30px;
540} 500}
541 501
542.linkshort a { 502.linklist-item-title a {
503 font-size: 0.7em;
504 color: #252525;
543 text-decoration: none; 505 text-decoration: none;
544 color: #393964; 506 vertical-align: middle;
507 font-family: Roboto Slab, Arial, sans-serif;
545} 508}
546 509
547.linkshort a:hover { 510.linklist-item-title .linklist-link {
548 text-decoration: underline; 511 font-size: 1.1em;
512 color: #1b926c;
549} 513}
550 514
551.buttoneditform { 515.linklist-item-title .linklist-link:visited {
552 display: inline; 516 color: #1b926c;
553} 517}
554 518
555#footer { 519.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
556 font-size: 8pt; 520 color: #252525;
557 text-align: center;
558 color: #888;
559 clear: both;
560 max-width: 30em;
561 margin: 15px auto 15px auto;
562} 521}
563 522
564#footer a {
565 color: #486D08;
566}
567 523
568#footer a:hover { 524.linklist-item-title .label-private {
569 color: #000000; 525 border: solid 1px #F89406;
526 font-family: Arial, sans-serif;
527 font-size: 0.65em;
528 color: #F89406;
570} 529}
571 530
572#newversion { 531.linklist-item-title .fold-button {
573 background-color: #FFFFA0; 532 display: none;
574 color: #000;
575 position: absolute;
576 top: 0;
577 right: 0;
578 padding: 2 7 2 7;
579 font-size: 9pt;
580} 533}
581 534
582#newversion #version_id { 535.linklist-item-editbuttons {
583 text-decoration: blink; 536 float: right;
537 padding: 8px 5px;
584} 538}
585 539
586#cloudtag { 540.linklist-item-editbuttons * {
587 padding-left: 10%; 541 display: block;
588 padding-right: 10%; 542 float: left;
543 margin: 0 1px;
589} 544}
590 545
591#cloudtag .count { 546.linklist-item-editbuttons a {
592 color: #99f; 547 font-size: 1em;
593 font-size: 9pt;
594 padding-left: 5px;
595 padding-right: 2px;
596} 548}
597 549
598#cloudtag a { 550.edit-link {
599 color: black; 551 font-size: 1.2em;
600 text-decoration: none; 552 color: #0b5ea6;
601} 553}
602 554
603#install { 555.delete-link {
604 margin: 0 20px; 556 font-size: 1.3em;
557 color: #ac2925 !important;
605} 558}
606 559
607#installform { 560.linklist-item-description {
608 border: 1px solid black; 561 position: relative;
609 padding: 10px; 562 padding: 10px;
563 font-family: Roboto Slab, Arial, sans-serif;
564 word-wrap: break-word;
565 color: #252525;
566 line-height: 1.3em;
610} 567}
611 568
612#installform table { 569 {
613 border: none; 570 position: absolute;
571 left: 3px;
572 top: 0;
573 display: block;
574 content:"";
575 background: #F89406;
576 height: 95%;
577 width: 2px;
578 z-index: 1;
614} 579}
615 580
616#installform td { 581.linklist-item-description a {
617 font-size: 10pt; 582 text-decoration: none;
618 color: black; 583 color: #1b926c;
619 padding: 10px 5px 10px 5px;
620 clear: left;
621} 584}
622 585
623#installform input.bigbutton { 586.linklist-item-description a:hover {
624 float: right; 587 color: #252525;
625} 588}
626 589
627#changepasswordform { 590.linklist-item-description a:visited {
628 color: #ccc; 591 color: #14553f;
629 padding: 10px 5px 10px 5px;
630 clear: left;
631} 592}
632 593
633#changetag { 594.linklist-item-thumbnail {
634 color: #ccc; 595 position: relative;
635 padding: 10px 5px 10px 5px; 596 margin-top: 10px;
636 clear: left; 597 padding: 10px;
598 float: left;
599 z-index: 50;
637} 600}
638 601
639#changetag #totag { 602.linklist-item.private .linklist-item-title::before,
640 margin-left: 40px; 603.linklist-item.private .linklist-item-description::before,
604.linklist-item.private .linklist-item-thumbnail::before {
605 position: absolute;
606 left: 3px;
607 top: 0;
608 display: block;
609 content:"";
610 background: #F89406;
611 height: 95%;
612 width: 2px;
613 z-index: 1;
641} 614}
642 615
643#changetag div { 616.linklist-item.private .linklist-item-title::before {
644 float:left; 617 margin-top: 3px;
645} 618}
646 619
647#changetag label { 620.linklist-item-infos {
648 padding: 5px; 621 padding: 8px 8px 5px 8px;
622 background: #ddd;
623 color: #252525;
649} 624}
650 625
651#changetag li { 626.linklist-item-infos a {
652 color: #000; 627 color: #252525;
653} 628 text-decoration: none;
654#configform td {
655 color: #ccc;
656 font-size: 10pt;
657 padding: 10px 5px 10px 5px;
658} 629}
659 630
660#configform { 631.linklist-item-infos a:hover {
661 color: #ccc; 632 color: #000;
662 padding: 10px 5px 10px 5px;
663 clear: left;
664} 633}
665 634
666.thumbnail { 635.linklist-item-infos .linklist-item-tags {
667 float: right; 636 font-size: 0.8em;
668 margin: 0px 10px 0px 10px;
669} 637}
670 638
671.thumbnail img { 639.linklist-item-infos .label-tag {
672 border-radius: 3px; 640 font-size: 1em;
673 box-shadow: 0.5px 0.5px 0.5px 1px #dde4e6;
674} 641}
675 642
676/* If you want thumbnails on the left: 643.linklist-item-infos-dateblock {
677.thumbnail { 644 font-size: 0.9em;
678 float: left;
679 margin-right: 10px;
680} 645}
681.linkcontainer {
682 position: static;
683 margin-left: 130px;
684}
685*/
686 646
687/* --- Picture wall CSS --- */ 647.linklist-plugin-icon {
688#picwall_container { 648 width: 13px;
689 color: #fff; 649 height: 13px;
690 background-color: #000;
691 clear: both;
692} 650}
693 651
694.picwall_pictureframe { 652.linklist-item-infos-url {
695 background-color: #000; 653 text-align: right;
696 z-index: 5; 654 white-space: nowrap;
697 position: relative;
698 display: table-cell;
699 vertical-align: middle;
700 width: 90px;
701 height: 90px;
702 overflow: hidden; 655 overflow: hidden;
703 text-align: center; 656 text-overflow: ellipsis;
704 float: left; 657 font-size: 0.8em;
705} 658}
706 659
707.b-lazy { 660.linklist-item-infos .mobile-buttons {
708 -webkit-transition: opacity 500ms ease-in-out; 661 text-align: right;
709 -moz-transition: opacity 500ms ease-in-out;
710 -o-transition: opacity 500ms ease-in-out;
711 transition: opacity 500ms ease-in-out;
712 opacity: 0;
713}
714.b-lazy.b-loaded {
715 opacity: 1;
716} 662}
717 663
718.picwall_pictureframe img { 664.linklist-item-infos .linklist-plugin-icon {
719 max-width: 100%; 665 display: inline-block;
720 height: auto; 666 margin: 0 2px;
721 color: transparent; 667 width: 16px;
722} /* Adapt the width of the image */ 668 height: 16px;
669}
723 670
724.picwall_pictureframe a { 671/** 64em -> lg **/
725 text-decoration: none; 672@media screen and (max-width: 64em) {
673 .linklist-item-infos-url {
674 text-align: left;
675 }
726} 676}
727 677
728/* CSS to show title when hovering an image - no javascript required. */ 678/**
729.picwall_pictureframe span.info { 679 * Footer
730 display: none; 680 */
681#footer {
682 margin: 20px 0;
683 padding: 5px;
684 text-align: center;
685 color: #252525;
731} 686}
732 687
733.picwall_pictureframe:hover span.info { 688#footer:before {
734 display: block; 689 display: block;
735 position: absolute; 690 content:"";
736 top: 0; 691 background: linear-gradient(to right, #949393, #252525, #949393);
737 left: 0; 692 height: 1px;
738 width: 90px; 693 width: 80%;
739 font-weight: bold; 694 margin: 10px auto;
740 font-size: 8pt;
741 color: #fff;
742 text-align: left;
743 background-color: transparent;
744 background-color: rgba(0, 0, 0, 0.4);
745 /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
746 filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
747 /* IE6–IE9 */
748 text-shadow: 2px 2px 1px #000000;
749}
750
751#linklist li.publicLinkHightLight {
752 background: #ffffff;
753}
754
755div.daily {
756 font-family: Georgia, 'DejaVu Serif', Norasi, serif;
757 background-color: #E6D6BE;
758 /* Background paper texture by BashCorpo:
759 http://www.bashcorpo.dk/textures.php
760 http://bashcorpo.deviantart.com/art/Grungy-paper-texture-v-5-22966998 */
761 background-image: url("../images/Paper_texture_v5_by_bashcorpo_w1000.jpg");
762 -webkit-background-size: cover;
763 -moz-background-size: cover;
764 -o-background-size: cover;
765 background-size: cover;
766 position: relative;
767 border-bottom: 2px solid black;
768} 695}
769 696
770#daily_col1 { 697#footer a {
771 float: left; 698 color: #252525;
772 position: relative;
773 width: 33%;
774 padding-left: 1%;
775} 699}
776 700
777#daily_col2 { 701/**
778 float: left; 702 * PAGE FORM
779 position: relative; 703 */
780 width: 33%; 704.page-form {
705 margin: 20px 0 0 0;
706 background: #f5f5f5;
707 box-shadow: 1px 1px 2px #797979;
708 color: #252525;
709 overflow: hidden;
781} 710}
782 711
783#daily_col3 { 712.page-form .window-title {
784 float: left; 713 margin: 0 0 10px 0;
785 position: relative; 714 padding: 10px 0;
786 width: 33%; 715 width: 100%;
716 color: #1b926c;
717 background: #f5f5f5;
718 text-align: center;
787} 719}
788 720
789div.dailyAbout { 721.page-form .window-subtitle {
790 float: left;
791 border: 1px solid black;
792 font-size: 8pt;
793 position: absolute;
794 left: 10px;
795 top: 15px;
796 padding: 5px 5px 5px 5px;
797 text-align: center; 722 text-align: center;
798} 723}
799 724
800div.dailyAbout a { 725.page-form a {
801 color: #890500; 726 color: #1b926c;
727 font-weight: bold;
802} 728}
803 729
804div.dailyAbout img { 730.page-form p {
805 position: relative; 731 padding: 0 10px;
806 top: 3px; 732 margin: 0;
807 margin-right: 4px;
808 width: 14px;
809 height: 14px;
810} 733}
811 734
812div.dailyEntryPermalink { 735.page-form input[type="text"],
813 float: right; 736.page-form input[type="password"],
737.page-form textarea {
738 box-sizing: border-box;
739 margin: 10px 0;
740 padding: 5px 5px 3px 15px;
741 height: 35px;
742 width: 90%;
743 background: #eeeeee;
744 border: solid 1px #d8d8d8;
745 border-radius: 2px;
746 color: #252525;
747}
748
749.page-form textarea {
750 min-height: 240px;
751 padding: 15px 5px 3px 15px;
752 resize: vertical;
753 overflow-y: auto;
754 word-wrap:break-word
755}
756
757/* because chrome */
758.page-form input[type="text"]::-webkit-input-placeholder,
759.page-form input[type="password"]::-webkit-input-placeholder {
760 color: #777777;
761}
762
763.page-form input[type="submit"], .page-form a.button {
764 margin: 15px 5px;
765 height: 35px;
766 line-height: 35px;
767 width: 150px;
768 background: #1b926c;
769 color: #f5f5f5;
770 border: none;
771 box-shadow: 1px 1px 1px #ddd, -1px -1px 6px #ddd, -1px 1px 2px #ddd, 1px -1px 2px #ddd;
772 font-size: 1.2em;
773 text-decoration: none;
774 vertical-align: center;
775 font-weight: normal;
776 display: inline-block;
814} 777}
815 778
816div.dailyTitle {
817 font-weight: bold;
818 font-size: 44pt;
819 text-align: center;
820 padding: 10px 20px 0px 20px;
821}
822 779
823div.dailyDate { 780.page-form .button.button-red {
824 font-size: 12pt; 781 background: #ac2925;
825 font-weight: bold;
826 text-align: center;
827 padding: 0px 20px 30px 20px;
828} 782}
829 783
830/* Individual entries in "Daily": */ 784.page-form .submit-buttons {
831div.dailyEntry { 785 margin-bottom: 10px;
832 margin: 5px 10px 2px 5px;
833 font-size: 11pt;
834 border-top: 1px solid #555;
835} 786}
836 787
837div.dailyEntry a { 788@media screen and (min-width: 64em) {
838 text-decoration: none; 789 .page-form .submit-buttons {
839 color: #890500; 790 position: relative;
840} 791 }
841 792
842div.dailyEntryTags { 793 .page-form .submit-buttons .button.button-red {
843 font-size: 7.75pt; 794 position: absolute;
795 right: 5%;
796 }
844} 797}
845 798
846div.dailyEntryTitle { 799@media screen and (max-width: 64em) {
847 font-size: 18pt; 800 .page-form .submit-buttons .button {
848 font-weight: bold; 801 display: block;
802 margin: auto;
803 }
849} 804}
850 805
851div.dailyEntryLinkdate { 806.page-form select {
852 font-size: 8pt; 807 color: #252525;
853} 808}
854 809
855div.dailyEntryThumbnail { 810/**
856 width: 100%; 811 * PAGE FORM - LIGHT
812 */
813.page-form-light div, .page-form-light p {
857 text-align: center; 814 text-align: center;
858 background-color: rgb(128, 128, 128);
859 background: url(../images/50pc_transparent.png);
860 padding: 4px 0px 2px 0px;
861} 815}
862 816
863div.dailyEntryDescription { 817/**
864 margin-top: 10px; 818 * PAGE FORM - COMPLETE
865 margin-bottom: 30px; 819 */
866 text-align: justify; 820.page-form-complete {
867 overflow: auto; 821 #background: #f5f5f5;
868} 822}
869 823
870div.dailyNoEntry { 824.page-form-complete div, .page-form-complete p {
871 text-align: center; 825 color: #252525;
872 padding: 40px 0px 90px 0px;
873} 826}
874 827
875.daily #closing { 828.page-form-complete .form-label, .page-form-complete .form-input {
876 clear: both; 829 position: relative;
877 text-align: center; 830 height: 60px;
878 padding-bottom: 20px;
879} 831}
880 832
881/* Common CSS screwdriver */ 833.page-form-complete .form-label label,
882.clear { 834.page-form-complete .form-input input,
883 clear: both; 835.page-form-complete .timezone {
836 position: absolute;
837 top: 50%;
838 transform: translateY(-50%);
884} 839}
885 840
886.right { 841.page-form-complete .form-label label {
887 text-align: right; 842 text-align: right;
843 right: 0;
844 padding: 0 20px;
888} 845}
889 846
890.white { 847.page-form-complete .label-name {
891 color: white; 848 font-weight: bold;
892} 849}
893 850
894/* For lazy images loading in picture wall. 851.page-form-complete .label-desc {
895 Using http://www.appelsiini.net/projects/lazyload 852 font-size: 0.8em;
896*/
897.lazyimage {
898 display: none;
899} 853}
900 854
901#configuration_table td { 855.page-form-complete input[type="text"],
902 border: none; 856.page-form-complete input[type="password"],
903 padding: 10px; 857.page-form-complete textarea {
904 vertical-align: top; 858 margin: 0;
905} 859}
906 860
907@media print { 861.page-form section {
908 html { 862 margin: 10px 0 25px 0;
909 border: none; 863}
910 background: #fff !important;
911 color: #000 !important;
912 }
913 864
914 body { 865.page-form table {
915 font-size: 12pt; 866 margin: auto;
916 width: auto !important; 867 width: 90%;
917 margin: auto !important; 868}
918 }
919 869
920 /* Minimum numer of lines to display when splitting a paragraph 870.page-form table .order {
921 over two pages */ 871 text-decoration: none;
922 p { 872 color: #252525;
923 orphans: 3; 873}
924 widows: 3;
925 }
926 874
927 a { 875.page-form table, .page-form th, .page-form td {
928 color: #000 !important; 876 border-width: 1px 0;
929 text-decoration: none !important; 877 border-style: solid;
930 } 878 border-color: #aaaaaa;
879}
931 880
932 #pageheader, .paging, #linklist li form, #footer { 881.page-form th, .page-form td {
933 display: none; 882 padding: 5px;
934 }
935 883
936 #linklist li { 884}
937 padding: 2 0 10 0;
938 border-top: 2px solid #000;
939 clear: both;
940 }
941 885
942 #linklist li.private { 886/* Awesomeplete fix */
943 background-color: none; 887div.awesomplete {
944 border-left: 0; 888 width: inherit;
945 } 889}
946 890
947 .linkdate { 891div.awesomplete > input {
948 line-height: 2; 892 display: inherit;
949 } 893}
950 894
951 .linkurl { 895div.awesomplete > ul {
952 color: #000; 896 z-index: 9999;
953 } 897}
954 898
955 .linkdescription { 899.page-form .awesomplete {
956 font-size: 10pt; 900 width: 90%;
957 } 901}
958 902
959 .linktag { 903.page-form .awesomplete input {
960 border: 1px solid black; 904 width: 100%;
961 font-style: italic;
962 font-size: 8pt;
963 }
964} 905}
965 906
966@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 854px) { 907.page-form div.awesomplete > ul {
967 /* A few fixes for mobile devices (far from perfect). */ 908 color: black;
909}
968 910
969 .tagfilter div.awesomplete { 911@media screen and (max-width: 64em) {
970 width: 70%; 912 .page-form-complete .form-label {
913 height: inherit;
971 } 914 }
972 915
973 .nomobile { 916 .page-form-complete .form-label label,
974 display: none; 917 .page-form-complete .form-input input,
918 .page-form-complete .timezone {
919 position: inherit;
920 top: inherit;
921 transform: translateY(0);
975 } 922 }
976 923
977 #logo { 924 .page-form-complete .form-input input[type="checkbox"] {
978 display: none; 925 position: absolute;
926 top: 50%;
927 right: 50%;
928 transform: translateY(-50%);
979 } 929 }
980 930
981 #pageheader #menu ul { 931 .page-form-complete .form-input {
982 text-align: center; 932 text-align: center;
983 } 933 }
984 934
985 #pageheader #menu a { 935 .page-form-complete .form-label label {
986 padding: 5px; 936 display: block;
987 border-radius: 3px 3px 3px 3px; 937 text-align: left;
988 margin: 3px; 938 margin: 10px 0 0 0;
989 }
990
991 #headerform label {
992 width: 100%;
993 display: block;
994 height: auto;
995 line-height: 25px;
996 padding-bottom: 10px;
997 }
998
999 #headerform label input[type=text],
1000 #headerform label input[type=password]{
1001 float: right;
1002 width: 70%;
1003 }
1004
1005 .searchform, .tagfilter {
1006 display: block !important;
1007 margin: 0px 3px 7px 0px !important;
1008 padding: 0px !important;
1009 width: 97% !important;
1010 } 939 }
1011 940
1012 .searchform input, .tagfilter input { 941 .timezone-continent:after {
1013 margin: 0px !important; 942 content:"\a\a";
1014 padding: 0px !important; 943 white-space: pre;
1015 display: inline !important;
1016 } 944 }
1017 945
1018 .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton, a.bigbutton { 946 .page-form-complete .radio-buttons {
1019 width: 30%; 947 text-align: left;
1020 font-size: smaller; 948 padding: 5px 15px;
1021 } 949 }
950}
1022 951
1023 #searchform_value { 952/**
1024 width: 70% !important; 953 * Page visitor (page form extended)
1025 } 954 */
955.page-visitor {
956 color: #252525;
957}
1026 958
1027 #tagfilter_value { 959#page404 {
1028 width: 70% !important; 960 color: #3f3f3f;
1029 } 961}
1030 962
1031 div.qrcode { 963/**
1032 position: relative; 964 * LOGIN
1033 float: left; 965 */
1034 top: -10px; 966#login-form .remember-me {
1035 left: 0px; 967 margin: 5px 0;
1036 } 968}
1037 969
1038 .paging_privatelinks { 970/**
1039 float: none; 971 * Search results
1040 } 972 */
973.search-result a {
974 color: white;
975 text-decoration: none;
976}
1041 977
1042 .paging_linksperpage { 978.search-result .label-tag {
1043 float: none; 979 border-color: white;
1044 margin-bottom: 10px; 980}
1045 font-size: smaller;
1046 }
1047 981
1048 #paging_older, #paging_newer, .paging_linksperpage a { 982.search-result .label-tag .remove {
1049 border: 1px solid black; 983 border-left: white 1px solid;
1050 padding: 3px 5px 3px 5px; 984 padding: 0 0 0 5px;
1051 background-color: #666; 985 margin: 0 0 0 5px;
1052 color: #fff; 986}
1053 border-radius: 3px 3px 3px 3px;
1054 }
1055 987
1056 .thumbnail { 988/**
1057 float: none; 989 * TOOLS
1058 height: auto; 990 */
1059 margin: 0px; 991.tools-item {
1060 text-align: center; 992 margin: 10px 0;
1061 } 993}
1062 994
1063 #cloudtag { 995.tools-item .pure-button:hover {
1064 padding: 0px; 996 background-image: none;
1065 } 997 background-color: #1b926c;
998 color: #f5f5f5;
999}
1066 1000
1067 div.dailyAbout { 1001/**
1068 float: none; 1002 * PLUGIN ADMIN
1069 position: relative; 1003 */
1070 width: 100%; 1004#pluginform .mobile-row {
1071 clear: both; 1005 font-size: 0.9em;
1072 padding: 0px; 1006}
1073 top: 0px;
1074 left: 0px;
1075 }
1076 1007
1077 #daily_col1, #daily_col2, #daily_col3 { 1008#pluginform .more {
1078 float: none; 1009 margin-top: 10px;
1079 width: 100%; 1010}
1080 padding: 0px;
1081 }
1082 1011
1083 div.dailyTitle { 1012@media screen and (max-width: 64em) {
1084 font-size: 18pt; 1013 #pluginform .main-row, #pluginform .main-row td {
1085 margin-top: 5px; 1014 border-bottom-style: none;
1086 padding: 0px;
1087 } 1015 }
1088 1016
1089 div.dailyDate { 1017 #pluginform .mobile-row, #pluginform .mobile-row td {
1090 font-size: 11pt; 1018 border-top-style: none;
1091 padding: 0px;
1092 display: block;
1093 } 1019 }
1020}
1094 1021
1095 div.dailyEntryTitle { 1022/**
1096 font-size: 16pt; 1023 * IMPORT
1097 font-weight: bold; 1024 */
1098 } 1025#import-field {
1026 margin: 15px 0;
1027}
1099 1028
1100 div.dailyEntryDescription { 1029/**
1101 font-size: 10pt; 1030 * TAG CLOUD
1102 } 1031 */
1032#cloudtag {
1033 padding: 10px;
1034 text-align: center;
1103} 1035}
1104 1036
1105#toolsdiv a.button-description { 1037#cloudtag, #cloudtag a {
1106 clear: none; 1038 color: #000;
1039 text-decoration: none;
1107} 1040}
1108 1041
1109/* Highlight search results */ 1042#cloudtag .count {
1110.highlight { 1043 color: #7f7f7f;
1111 background-color: #FFFF33;
1112} 1044}
1113 1045
1114.center { 1046/**
1115 text-align: center; 1047 * Picture wall CSS
1048 */
1049#picwall_container {
1050 margin: 0 10px 10px 10px;
1051 color: #252525;
1052 background-color: #f5f5f5;
1053 clear: both;
1116} 1054}
1117 1055
1118ul.errors { 1056.picwall_pictureframe {
1119 color: red; 1057 margin: 2px;
1058 background-color: #f5f5f5;
1059 z-index: 5;
1060 position: relative;
1061 display: table-cell;
1062 vertical-align: middle;
1063 width: 90px;
1064 height: 90px;
1065 overflow: hidden;
1066 text-align: center;
1120 float: left; 1067 float: left;
1121} 1068}
1122 1069
1123#pluginsadmin { 1070.b-lazy {
1124 width: 80%; 1071 -webkit-transition: opacity 500ms ease-in-out;
1125 padding: 20px 0 0 20px; 1072 -moz-transition: opacity 500ms ease-in-out;
1073 -o-transition: opacity 500ms ease-in-out;
1074 transition: opacity 500ms ease-in-out;
1075 opacity: 0;
1126} 1076}
1127 1077.b-lazy.b-loaded {
1128#pluginsadmin section { 1078 opacity: 1;
1129 padding: 20px 0;
1130} 1079}
1131 1080
1132#pluginsadmin .plugin_parameters { 1081.picwall_pictureframe img {
1133 margin: 10px 0; 1082 max-width: 100%;
1083 height: auto;
1084 color: transparent;
1085} /* Adapt the width of the image */
1086
1087.picwall_pictureframe a {
1088 text-decoration: none;
1134} 1089}
1135 1090
1136#pluginsadmin h1 { 1091/* CSS to show title when hovering an image - no javascript required. */
1137 font-style: normal; 1092.picwall_pictureframe span.info {
1093 display: none;
1094 font-family: Arial, sans-serif;
1138} 1095}
1139 1096
1140#pluginsadmin h2 { 1097.picwall_pictureframe:hover span.info {
1141 font-size: 1.4em; 1098 display: block;
1099 position: absolute;
1100 top: 0;
1101 left: 0;
1102 width: 90px;
1103 height: 90px;
1142 font-weight: bold; 1104 font-weight: bold;
1105 font-size: 9pt;
1106 color: #f5f5f5;
1107 text-align: left;
1108 background-color: rgba(0, 0, 0, 0.8);
1143} 1109}
1144 1110
1145#pluginsadmin table { 1111/**
1146 width: 100%; 1112 * DAILY
1113 */
1114.daily-desc {
1115 color: #7f7f7f;
1116 font-size: 0.8em;
1147} 1117}
1148 1118
1149#pluginsadmin table, #pluginsadmin th, #pluginsadmin td { 1119.daily-about a {
1150 border-width: 1px 0; 1120 color: #343434;
1151 border-style: solid; 1121 text-decoration: none;
1152 border-color: #c0c0c0;
1153} 1122}
1154 1123
1155#pluginsadmin table th { 1124.daily-about a:hover {
1156 font-weight: bold; 1125 color: #7f7f7f;
1157 padding: 10px 0;
1158} 1126}
1159 1127
1160#pluginsadmin table td { 1128.daily-about h3:before, .daily-about h3:after {
1161 padding: 5px 0; 1129 display: block;
1130 content:"";
1131 background: linear-gradient(to right, #d5d4d4, #252525, #d5d4d4);
1132 height: 1px;
1133 width: 90%;
1134 margin: 10px auto;
1162} 1135}
1163 1136
1164#pluginsadmin input[type=submit] { 1137.daily-entry {
1165 margin: 10px 0; 1138 padding: 0 10px;
1166} 1139}
1167 1140
1168#pluginsadmin label { 1141.daily-entry .daily-entry-title:after {
1169 cursor: pointer; 1142 display: block;
1143 content:"";
1144 background: linear-gradient(to right, #fff, #515151, #fff);
1145 height: 1px;
1146 width: 70%;
1147 margin: 5px auto;
1170} 1148}
1171 1149
1172#pluginsadmin .plugin_parameter { 1150.daily-entry .daily-entry-title {
1173 padding: 10px 0; 1151 margin: 10px 0 0 0;
1174 border-width: 1px 0;
1175 border-style: solid;
1176 border-color: #c0c0c0;
1177} 1152}
1178 1153
1179#pluginsadmin .float_label { 1154.daily-entry .daily-entry-title a {
1180 float: left; 1155 color: #000;
1181 width: 40%; 1156 text-decoration: none;
1182} 1157}
1183 1158
1184#pluginsadmin a { 1159.daily-entry .daily-entry-description {
1185 color: #486D08; 1160 padding: 5px 5px 0 5px;
1161 font-size: 0.9em;
1162 text-align: justify;
1163 word-wrap: break-word;
1186} 1164}
1187 1165
1188#pluginsadmin a.arrow { 1166.daily-entry .daily-entry-tags {
1189 color: black; 1167 padding: 0 5px 5px 5px;
1168 font-size: 0.8em;
1190} 1169}
1191 1170
1192/* 404 page */ 1171.daily-entry-thumbnail {
1193.error-container { 1172 float: left;
1194 1173 margin: 15px 5px 5px 15px;
1195 margin: 50px;
1196 margin-top: 20px;
1197} 1174}
1198 1175
1199.error-container h1 { 1176.daily-entry-description a {
1200 text-decoration: none; 1177 text-decoration: none;
1201 font-style: normal; 1178 color: #1b926c;
1202 color: #80AD48;
1203} 1179}
1204 1180
1205.linklist-plugin-icon { 1181.daily-entry-description a:hover {
1206 width: 13px; 1182 text-shadow: 1px 1px #ddd;
1207 height: 13px; 1183}
1184
1185.daily-entry-description a:visited {
1186 color: #20b988;
1187}
1188
1189/*
1190 * Fix empty bookmarklet name in Firefox
1191 */
1192.pure-button {
1193 -moz-user-select: auto;
1208} 1194}