aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets/default/scss/shaarli.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/default/scss/shaarli.scss')
-rw-r--r--assets/default/scss/shaarli.scss2046
1 files changed, 1117 insertions, 929 deletions
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index 25440de1..09d5efbe 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -1,1357 +1,1545 @@
1$fa-font-path: "~font-awesome/fonts"; 1$fa-font-path: '~font-awesome/fonts';
2 2
3@import "~font-awesome/scss/font-awesome.scss"; 3@import '~font-awesome/scss/font-awesome';
4@import '~purecss/build/pure.css'; 4@import '~purecss/build/pure.css';
5@import '~purecss/build/grids-responsive.css'; 5@import '~purecss/build/grids-responsive.css';
6@import '~pure-extras/css/pure-extras.css'; 6@import '~pure-extras/css/pure-extras.css';
7@import '~awesomplete/awesomplete.css'; 7@import '~awesomplete/awesomplete.css';
8 8
9/** 9$white: #fff;
10 * General 10$black: #000;
11 */ 11$almost-white: #f5f5f5;
12$dark-grey: #252525;
13$light-grey: #797979;
14$main-green: #1b926c;
15$light-green: #b0ddce;
16$dark-green: #2a4c41;
17$red: #ac2925;
18$orange: #f89406;
19$blue: #0b5ea6;
20$background-color: #d0d0d0;
21$background-linklist-info: #ddd;
22$light-shadow: rgba(255, 255, 255, .078);
23$dark-shadow: rgba(0, 0, 0, .298);
24$warning-text: #97600d;
25$form-input-border: #d8d8d8;
26$form-input-background: #eee;
27
28// General
12body { 29body {
13 background: #d0d0d0; 30 background: $background-color;
14} 31}
15 32
16.strong { 33.strong {
17 font-weight: bold; 34 font-weight: bold;
18} 35}
19 36
20.clear { 37.clear {
21 clear: both; 38 clear: both;
22} 39}
23 40
24.center { 41.center {
25 text-align: center; 42 margin: auto;
26 margin: auto; 43 text-align: center;
27} 44}
28 45
29.label { 46.label {
30 display: inline-block; 47 display: inline-block;
31 padding: .25em .4em; 48 border-radius: .25rem;
32 font-size: 75%; 49 padding: .25em .4em;
33 font-weight: 700; 50 vertical-align: baseline;
34 line-height: 1; 51 text-align: center;
35 text-align: center; 52 line-height: 1;
36 white-space: nowrap; 53 white-space: nowrap;
37 vertical-align: baseline; 54 font-size: 75%;
38 border-radius: .25rem; 55 font-weight: 700;
39} 56}
40 57
41pre { 58pre {
42 max-width: 100%; 59 max-width: 100%;
43} 60}
44 61
45@font-face { 62@font-face {
46 font-family: 'Roboto'; 63 font-family: 'Roboto';
47 font-weight: 400; 64 font-weight: 400;
48 font-style: normal; 65 font-style: normal;
49 src: 66 src: local('Roboto'),
50 local('Roboto'), 67 local('Roboto-Regular'),
51 local('Roboto-Regular'), 68 url('../fonts/Roboto-Regular.woff2') format('woff2'),
52 url('../fonts/Roboto-Regular.woff2') format('woff2'), 69 url('../fonts/Roboto-Regular.woff') format('woff');
53 url('../fonts/Roboto-Regular.woff') format('woff');
54} 70}
55 71
56@font-face { 72@font-face {
57 font-family: 'Roboto'; 73 font-family: 'Roboto';
58 font-weight: 700; 74 font-weight: 700;
59 font-style: normal; 75 font-style: normal;
60 src: 76 src: local('Roboto'),
61 local('Roboto'), 77 local('Roboto-Bold'),
62 local('Roboto-Bold'), 78 url('../fonts/Roboto-Bold.woff2') format('woff2'),
63 url('../fonts/Roboto-Bold.woff2') format('woff2'), 79 url('../fonts/Roboto-Bold.woff') format('woff');
64 url('../fonts/Roboto-Bold.woff') format('woff'); 80}
65} 81
66 82body,
67body, .pure-g [class*="pure-u"] { 83.pure-g [class*='pure-u'] {
68 font-family: Roboto, Arial, sans-serif; 84 font-family: Roboto, Arial, sans-serif;
69} 85}
70 86
71/** 87// Extends Pure grids responsive to hide items.
72 * Extends Pure grids responsive to hide items. 88// Use xx-0 to hide an item on xx screen.
73 * Use xx-0 to hide an item on xx screen. 89// Display it at any level with xx-visible.
74 * Display it at any level with xx-visible. 90.pure-u-0 {
75 */ 91 display: none !important;
76.pure-u-0 { display: none !important; } 92}
93
77@media screen and (min-width: 35.5em) { 94@media screen and (min-width: 35.5em) {
78 .pure-u-sm-0 { display: none !important; } 95 .pure-u-sm-0 {
79 .pure-u-sm-visible { display: inline-block !important; } 96 display: none !important;
97 }
98
99 .pure-u-sm-visible {
100 display: inline-block !important;
101 }
80} 102}
103
81@media screen and (min-width: 48em) { 104@media screen and (min-width: 48em) {
82 .pure-u-md-0 { display: none !important; } 105 .pure-u-md-0 {
83 .pure-u-md-visible { display: inline-block !important; } 106 display: none !important;
107 }
108
109 .pure-u-md-visible {
110 display: inline-block !important;
111 }
84} 112}
113
85@media screen and (min-width: 64em) { 114@media screen and (min-width: 64em) {
86 .pure-u-lg-0 { display: none !important; } 115 .pure-u-lg-0 {
87 .pure-u-lg-visible { display: inline-block !important; } 116 display: none !important;
117 }
118
119 .pure-u-lg-visible {
120 display: inline-block !important;
121 }
88} 122}
123
89@media screen and (min-width: 80em) { 124@media screen and (min-width: 80em) {
90 .pure-u-xl-0 { display: none !important; } 125 .pure-u-xl-0 {
91 .pure-u-xl-visible { display: inline-block !important; } 126 display: none !important;
127 }
128
129 .pure-u-xl-visible {
130 display: inline-block !important;
131 }
92} 132}
93 133
94/** 134// Make pure-extras alert closable.
95 * Make pure-extras alert closable. 135.pure-alert-closable {
96 */ 136 .fa-times {
97.pure-alert-closable .fa-times {
98 float: right; 137 float: right;
138 }
99} 139}
140
100.pure-alert-close { 141.pure-alert-close {
101 cursor: pointer; 142 cursor: pointer;
102} 143}
103 144
104.pure-alert-success { 145.pure-alert-success {
105 background-color: #1b926c; 146 background-color: $main-green;
106} 147}
107 148
108.anchor:target { 149.anchor {
150 &:target {
109 padding-top: 40px; 151 padding-top: 40px;
152 }
110} 153}
111/** 154
112 * MENU 155// MENU
113 **/
114.shaarli-menu { 156.shaarli-menu {
115 position: fixed; 157 position: fixed;
116 top: 0; 158 top: 0;
117 width: 100%; 159 transition: max-height .5s;
118 --height: 50px; 160 z-index: 999;
119 background: #1b926c; 161 background: $main-green;
120 -webkit-font-smoothing: antialiased; 162 width: 100%;
121 /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */ 163 // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919
122 max-height: 45px; 164 max-height: 45px;
123 transition: max-height 0.5s; 165 overflow: hidden;
124 overflow: hidden; 166 -webkit-font-smoothing: antialiased;
125 z-index: 999; 167
168 &.open {
169 transition: max-height .75s;
170 max-height: 500px;
171 }
126} 172}
127 173
128/* Chrome bugfix: with 100% height, it only displays the first element. */
129.pure-menu-item { 174.pure-menu-item {
130 height: 45px; 175 // Chrome bugfix: with 100% height, it only displays the first element.
131} 176 height: 45px;
132 177
133.shaarli-menu.open { 178 &:hover {
134 max-height: 500px; 179 &::after {
135 transition: max-height 0.75s; 180 display: block;
181 margin: -4px auto 0;
182 background: $white;
183 width: 100%;
184 height: 4px;
185 content: '';
186 }
187 }
136} 188}
137 189
138.head-logo { 190.head-logo {
139 float: left; 191 float: left;
140 margin: 0 5px 0 0; 192 margin: 0 5px 0 0;
141} 193}
142 194
143.pure-menu-link, 195%menu-link {
144.pure-menu-link:visited, 196 padding: .8em 1em;
145.pure-menu-selected .pure-menu-link, 197 color: $almost-white;
146.pure-menu-selected .pure-menu-link:visited {
147 padding: 0.8em 1em;
148 color: #f5f5f5;
149} 198}
150 199
151.pure-menu-link:hover, .pure-menu-link:focus, 200%menu-link-hover {
152.pure-menu-selected .pure-menu-link:hover, 201 background: transparent;
153.pure-menu-selected .pure-menu-link:focus { 202 color: $white;
154 color: #fff;
155 background: transparent;
156} 203}
157 204
158.pure-menu-item:hover::after { 205.pure-menu-link {
159 margin: -4px auto 0 auto; 206 @extend %menu-link;
160 display: block; 207
161 content:""; 208 &:visited {
162 background: #fff; 209 @extend %menu-link;
163 height: 4px; 210 }
164 width: 100%; 211
212 &:hover,
213 &:focus {
214 @extend %menu-link-hover;
215 }
165} 216}
166 217
167.menu-toggle { 218.pure-menu-selected {
168 width: 34px; 219 .pure-menu-link {
169 height: 45px; 220 @extend %menu-link;
170 position: absolute; 221
171 top: 5px; 222 &:visited {
172 right: 0; 223 @extend %menu-link;
173 display: none; 224 }
225
226 &:hover,
227 &:focus {
228 @extend %menu-link-hover;
229 }
230 }
174} 231}
175 232
176.menu-toggle .bar { 233.menu-toggle {
177 background-color: #b0ddce; 234 display: none;
235 position: absolute;
236 top: 5px;
237 right: 0;
238 width: 34px;
239 height: 45px;
240
241 .bar {
178 display: block; 242 display: block;
179 width: 20px;
180 height: 2px;
181 border-radius: 100px;
182 position: absolute; 243 position: absolute;
183 top: 18px; 244 top: 18px;
184 right: 7px; 245 right: 7px;
185 transition: all 0.5s; 246 border-radius: 100px;
186} 247 background-color: $light-green;
248 width: 20px;
249 height: 2px;
250 transition-duration: .5s;
187 251
188.menu-toggle .bar:first-child { 252 &:first-child {
189 transform: translateY(-6px); 253 transform: translateY(-6px);
190} 254 }
255 }
191 256
192.menu-toggle.x .bar { 257 &.x {
193 transform: rotate(45deg); 258 .bar {
194} 259 transform: rotate(45deg);
195 260
196.menu-toggle.x .bar:first-child { 261 &:first-child {
197 transform: rotate(-45deg); 262 transform: rotate(-45deg);
263 }
264 }
265 }
198} 266}
199 267
200@media screen and (max-width: 64em) { 268@media screen and (max-width: 64em) {
201 .menu-toggle { 269 .menu-toggle {
202 display: block; 270 display: block;
203 } 271 }
204} 272}
205 273
206.header-buttons { 274.header-buttons {
207 text-align: right; 275 text-align: right;
208} 276}
209 277
210.linkcount { 278.linkcount {
211 color: #252525; 279 color: $dark-grey;
212 font-size: 0.8em; 280 font-size: .8em;
213} 281}
214 282
215@media screen and (min-width: 64em) { 283@media screen and (min-width: 64em) {
216 .linkcount { 284 .linkcount {
217 position: absolute; 285 position: absolute;
218 right: 5px; 286 right: 5px;
287 }
288}
289
290.searchform-block {
291 width: 100%;
292 text-align: center;
293
294 input {
295 &[type='text'] {
296 border: medium none currentColor;
297 border-radius: 2px;
298 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
299 background: $almost-white;
300 padding: 0 5px;
301 width: 260px;
302 height: 30px;
303 color: $dark-grey;
304
305 &::-webkit-input-placeholder {
306 color: $light-grey;
307 }
219 } 308 }
220} 309 }
221
222#search, #search-linklist, #search-tagcloud {
223 text-align: center;
224 width: 100%;
225}
226 310
227#search input[type="text"], #search-linklist input[type="text"] { 311 button {
228 padding: 0 5px; 312 border: 0;
229 height: 30px;
230 width: 260px;
231 background: #f5f5f5;
232 border: medium none currentColor;
233 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset;
234 border-radius: 2px; 313 border-radius: 2px;
235 color: #252525; 314 background-color: $main-green;
236} 315 padding: 4px 8px 6px;
237@media screen and (max-width: 64em) { 316 color: $almost-white;
238 .searchform { 317 }
239 max-width: 260px;
240 margin: 0 auto;
241 }
242}
243
244/* because chrome */
245#search input[type="text"]::-webkit-input-placeholder,
246#search-linklist input[type="text"]::-webkit-input-placeholder {
247 color: #777777;
248} 318}
249 319
250#search button, 320@media screen and (max-width: 64em) {
251#search-tagcloud button, 321 .searchform {
252#search-linklist button { 322 margin: 0 auto;
253 padding: 4px 8px 6px 8px; 323 max-width: 260px;
254 background-color: #1B926C; 324 }
255 color: #f5f5f5;
256 border: none;
257 border-radius: 2px;
258} 325}
259 326
260#search-tagcloud button { 327.search-tagcloud {
328 button {
261 width: 90%; 329 width: 90%;
330 }
262} 331}
263 332
264@media screen and (max-width: 64em) { 333@media screen and (max-width: 64em) {
265 #search-linklist button { 334 .search-linklist {
266 width: 100%; 335 button {
336 width: 100%;
267 } 337 }
268 #search-linklist .awesomplete {
269 margin: 5px 0;
270 }
271}
272 338
273#search button:hover, 339 .awesomplete {
274#search-linklist button:hover, 340 margin: 5px 0;
275#search-tagcloud button:hover {
276 color: #d0d0d0;
277}
278
279#search,
280#search-linklist {
281 padding: 6px 0;
282}
283
284@media screen and (max-width: 64em) {
285 #search, #search * {
286 visibility: hidden;
287 } 341 }
342 }
288} 343}
289 344
290.subheader-form a.button { 345.header-search,
291 color: #f5f5f5; 346.search-linklist,
292 font-weight: bold; 347.search-tagcloud {
293 text-decoration: none; 348 button {
294 border: 2px solid #f5f5f5; 349 &:hover {
295 border-radius: 5px; 350 color: $background-color;
296 padding: 3px 10px; 351 }
352 }
297} 353}
298 354
299.linklist-item-editbuttons .delete-checkbox { 355.header-search,
300 display: none; 356.search-linklist {
357 padding: 6px 0;
301} 358}
302 359
303#header-login-form input[type="text"], #header-login-form input[type="password"] { 360@media screen and (max-width: 64em) {
304 width: 200px; 361 .header-search ,
362 .header-search * {
363 visibility: hidden;
364 }
305} 365}
306 366
307/* because chrome */ 367%subheader-form-input {
308#header-login-form input[type="text"]::-webkit-input-placeholder, 368 border: medium none currentColor;
309#header-login-form input[type="password"]::-webkit-input-placeholder { 369 border-radius: 2px;
310 color: #777777; 370 box-shadow: 0 1px 0 $light-shadow, 0 1px 4px $dark-shadow inset;
371 background: $almost-white;
372 padding: 5px 5px 3px 15px;
373 width: 20%;
374 height: 20px;
375 color: $dark-grey;
311} 376}
312 377
313.subheader-form { 378.subheader-form {
314 visibility: hidden; 379 display: block;
315 position: fixed; 380 position: fixed;
316 width: 100%; 381 visibility: hidden;
317 text-align: center; 382 z-index: 999;
318 background: #1b926c; 383 background: $main-green;
319 display: block; 384 padding: 5px 0;
320 z-index: 999; 385 width: 100%;
321 height: 30px; 386 height: 30px;
322 padding: 5px 0; 387 text-align: center;
323} 388
324 389 input {
325@media screen and (min-width: 64em) { 390 &[type='text'],
326 .subheader-form.open, .subheader-form.open * { 391 &[type='password'] {
327 visibility: visible; 392 @extend %subheader-form-input;
393
394 &::-webkit-input-placeholder {
395 color: $dark-grey;
396 }
328 } 397 }
329} 398 }
330 399
331.subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me { 400 &[type='submit'] {
332 padding: 5px 5px 3px 15px; 401 display: inline-block;
333 height: 20px; 402 margin: 0 0 5px;
334 width: 20%; 403 border: 1px solid $almost-white;
335 background: #f5f5f5;
336 border: medium none currentColor;
337 border-radius: 2px; 404 border-radius: 2px;
338 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; 405 background: $main-green;
339 color: #252525; 406 padding: 4px 0;
340} 407 width: 100px;
408 height: 28px;
409 color: $almost-white;
341 410
342/* because chrome */ 411 &:hover {
343.subheader-form input[type="text"]::-webkit-input-placeholder, 412 background: $almost-white;
344.subheader-form input[type="password"]::-webkit-input-placeholder 413 color: $main-green;
345{ 414 }
346 color: #252525; 415 }
347} 416
417 .remember-me {
418 @extend %subheader-form-input;
348 419
349.subheader-form .remember-me {
350 display: inline-block; 420 display: inline-block;
351 width: auto;
352 padding: 5px 20px 3px 20px;
353 cursor: pointer; 421 cursor: pointer;
354} 422 padding: 5px 20px 3px;
423 width: auto;
355 424
356.subheader-form .remember-me label, .subheader-form .remember-me input { 425 label,
357 cursor: pointer; 426 input {
427 cursor: pointer;
428 }
429 }
430
431 a {
432 &.button {
433 border: 2px solid $almost-white;
434 border-radius: 5px;
435 padding: 3px 10px;
436 text-decoration: none;
437 color: $almost-white;
438 font-weight: bold;
439 }
440 }
358} 441}
359 442
360.subheader-form input[type="submit"] { 443.header-login-form {
361 display: inline-block; 444 input {
362 margin: 0 0 5px 0; 445 &[type='text'],
363 padding: 4px 0 4px 0; 446 &[type='password'] {
364 height: 28px; 447 width: 200px;
365 width: 100px; 448
366 background: #1b926c; 449 // because chrome
367 border: 1px solid #f5f5f5; 450 &::-webkit-input-placeholder {
368 color: #f5f5f5; 451 color: $light-grey;
369 border-radius: 2px; 452 }
453 }
454 }
370} 455}
371 456
372.subheader-form input[type="submit"]:hover { 457@media screen and (min-width: 64em) {
373 background: #f5f5f5; 458 .subheader-form {
374 color: #1b926c; 459 &.open {
460 visibility: visible;
461
462 * {
463 visibility: visible;
464 }
465 }
466 }
375} 467}
376 468
377.new-version-message { 469.new-version-message {
378 text-align: center; 470 text-align: center;
379}
380 471
381.new-version-message a { 472 a {
382 color: rgb(151, 96, 13); 473 color: $warning-text;
383 font-weight: bold; 474 font-weight: bold;
475 }
384} 476}
385 477
386/** 478// CONTENT - GENERAL
387 * CONTENT - GENERAL 479.container {
388 */ 480 position: relative;
389#content { 481 z-index: 2;
390 position: relative; 482 margin-top: 45px;
391 z-index: 2;
392 margin-top: 45px;
393} 483}
394 484
395/** 485// Plugins additional forms
396 * Plugins additional forms
397 */
398.toolbar-plugin { 486.toolbar-plugin {
399 margin: 5px 0; 487 margin: 5px 0;
400 text-align: center; 488 text-align: center;
401} 489
402 490 input {
403.toolbar-plugin input[type="text"] { 491 &[type='text'] {
404 padding: 0 5px; 492 border: medium none currentColor;
405 height: 30px; 493 border-radius: 2px;
406 width: 300px; 494 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
407 background: #f5f5f5; 495 background: $almost-white;
408 border: medium none currentColor; 496 padding: 0 5px;
409 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset; 497 width: 300px;
410 border-radius: 2px; 498 height: 30px;
411 color: #252525; 499 color: $dark-grey;
412} 500
413 501 &::-webkit-input-placeholder {
414/* because chrome */ 502 color: $light-grey;
415.toolbar-plugin input[type="text"]::-webkit-input-placeholder { 503 }
416 color: #777777; 504 }
417}
418
419.toolbar-plugin input[type="submit"] {
420 padding: 0 10px;
421 height: 30px;
422 background: #f5f5f5;
423 border: medium none currentColor;
424 border-radius: 2px;
425 color: #252525;
426}
427 505
428.toolbar-plugin input[type="submit"]:hover { 506 &[type='submit'] {
429 background: #fff; 507 border: medium none currentColor;
508 border-radius: 2px;
509 background: $almost-white;
510 padding: 0 10px;
511 height: 30px;
512 color: $dark-grey;
513
514 &:hover {
515 background: $white;
516 }
517 }
518 }
430} 519}
431 520
432@media screen and (max-width: 64em) { 521@media screen and (max-width: 64em) {
433 .toolbar-plugin input[type="text"] { 522 .toolbar-plugin {
523 input {
524 &[type='text'] {
434 width: 70%; 525 width: 70%;
435 526 }
436 } 527 }
528 }
437} 529}
438 530
439/** 531// CONTENT - LINKLIST PAGING
440 * CONTENT - LINKLIST PAGING 532// 64em -> lg
441 * 64em -> lg
442 */
443.linklist-filters { 533.linklist-filters {
444 margin: 5px 0; 534 margin: 5px 0;
445 color: #252525; 535 color: $dark-grey;
446 font-size: 0.9em; 536 font-size: .9em;
447}
448 537
449.linklist-filters a { 538 a {
450 padding: 5px 8px; 539 padding: 5px 8px;
451 text-decoration: none; 540 text-decoration: none;
452} 541 }
453 542
454.linklist-filters .filter-off { 543 .filter-off {
455 color: #252525; 544 background: $almost-white;
456 background: #f5f5f5; 545 color: $dark-grey;
457} 546 }
458 547
459.linklist-filters .filter-on { 548 .filter-on {
460 color: #b0ddce; 549 background: $main-green;
461 background: #1b926c; 550 color: $light-green;
462} 551 }
463 552
464.linklist-filters .filter-block { 553 .filter-block {
465 color: #f5f5f5; 554 background: $red;
466 background: #ac2925; 555 color: $almost-white;
556 }
467} 557}
468 558
469.linklist-pages { 559.linklist-pages {
470 margin: 5px 0; 560 margin: 5px 0;
471 color: #252525; 561 text-align: center;
472 text-align: center; 562 color: $dark-grey;
473}
474 563
475.linklist-pages a { 564 a {
476 color: #252525;
477 text-decoration: none; 565 text-decoration: none;
566 color: $dark-grey;
567
568 &:hover {
569 color: $white;
570 }
571 }
478} 572}
479 573
480.linklist-pages a:hover { 574%linksperpage-button {
481 color: #fff; 575 display: inline-block;
576 width: 20px;
577 text-align: center;
482} 578}
483 579
484.linksperpage { 580.linksperpage {
485 margin: 5px 0; 581 margin: 5px 0;
486 text-align: right; 582 text-align: right;
487 color: #252525; 583 color: $dark-grey;
488 font-size: 0.9em; 584 font-size: .9em;
489}
490 585
491.linksperpage a { 586 form {
492 padding: 5px 5px; 587 display: inline;
493 text-decoration: none; 588 }
494 color: #252525;
495 background: #f5f5f5;
496}
497 589
498.linksperpage a, .linksperpage input[type="text"] { 590 a {
499 display: inline-block; 591 @extend %linksperpage-button;
500 width: 20px;
501 text-align: center;
502}
503 592
504.linksperpage form { 593 background: $almost-white;
505 display: inline; 594 padding: 5px;
595 text-decoration: none;
596 color: $dark-grey;
597 }
598
599 input {
600 &[type='text'] {
601 @extend %linksperpage-button;
602
603 margin: 0;
604 border: medium none currentColor;
605 background: $almost-white;
606 padding: 4px 5px 3px 8px;
607 height: 20px;
608 color: $dark-grey;
609 font-size: .8em;
610 }
611 }
506} 612}
507 613
508.linksperpage input[type="text"] { 614// CONTENT - LINKLIST ITEMS
509 height: 20px; 615%private-border {
510 margin: 0; 616 display: block;
511 padding: 4px 5px 3px 8px; 617 position: absolute;
512 background: #f5f5f5; 618 top: 0;
513 border: medium none currentColor; 619 left: 3px;
514 color: #252525; 620 z-index: 1;
515 font-size: 0.8em; 621 background: $orange;
622 width: 2px;
623 height: 96%;
624 content: '';
516} 625}
517 626
518/**
519 * CONTENT - LINKLIST ITEMS
520 */
521.linklist-item { 627.linklist-item {
522 margin: 0 0 10px 0; 628 margin: 0 0 10px;
523 background: #f5f5f5; 629 box-shadow: 1px 1px 3px $light-grey;
524 box-shadow: 1px 1px 3px #797979; 630 background: $almost-white;
631
632 &.private {
633 .linklist-item-title {
634 &::before {
635 @extend %private-border;
636 margin-top: 3px;
637 }
638 }
639
640 .linklist-item-description {
641 &::before {
642 @extend %private-border;
643 height: 100%;
644 }
645 }
646 }
525} 647}
526 648
527.linklist-item-buttons { 649.linklist-item-buttons {
528 background: transparent; 650 position: relative;
529 position: relative; 651 z-index: 99;
530 width: 23px; 652 background: transparent;
531 z-index: 99; 653 width: 23px;
532} 654}
533 655
534.linklist-item-buttons-right { 656.linklist-item-buttons-right {
535 float: right; 657 float: right;
536 margin-right: -25px; 658 margin-right: -25px;
537} 659}
538 660
539.linklist-item-buttons * { 661.linklist-item-buttons * {
540 display: block; 662 display: block;
541 float: left; 663 float: left;
542 width:100%; 664 margin: auto;
543 margin: auto; 665 width: 100%;
544 text-align: center; 666 text-align: center;
545}
546
547.linklist-item-title, .linklist-item-title h2 {
548 margin: 0;
549 word-wrap: break-word;
550} 667}
551 668
552.linklist-item-title { 669.linklist-item-title {
553 position: relative; 670 position: relative;
554 background: #f5f5f5; 671 margin: 0;
555} 672 background: $almost-white;
673 word-wrap: break-word;
556 674
557.linklist-item-title h2 { 675 h2 {
558 padding: 3px 10px 0 10px; 676 margin: 0;
677 padding: 3px 10px 0;
559 line-height: 30px; 678 line-height: 30px;
560} 679 word-wrap: break-word;
561 680
562.linklist-item-title h2 a { 681 a {
563 font-size: 0.7em; 682 vertical-align: middle;
564 color: #252525; 683 text-decoration: none;
565 text-decoration: none; 684 color: $dark-grey;
566 vertical-align: middle; 685 font-size: .7em;
567} 686
687 &:visited {
688 .linklist-link {
689 color: $dark-green;
690 }
691 }
692
693 &:hover {
694 color: $dark-grey;
695 }
696 }
697 }
568 698
569.linklist-item-title .linklist-link { 699 .linklist-link {
700 color: $main-green;
570 font-size: 1.1em; 701 font-size: 1.1em;
571 color: #1b926c;
572}
573
574.linklist-item-title h2 a:visited .linklist-link {
575 color: #2a4c41;
576}
577
578.linklist-item-title h2 a:hover, .linklist-item-title .linklist-link:hover{
579 color: #252525;
580}
581 702
703 &:hover {
704 color: $dark-grey;
705 }
706 }
582 707
583.linklist-item-title .label-private { 708 .label-private {
584 border: solid 1px #F89406; 709 border: solid 1px $orange;
710 color: $orange;
585 font-family: Arial, sans-serif; 711 font-family: Arial, sans-serif;
586 font-size: 0.65em; 712 font-size: .65em;
587 color: #F89406; 713 }
588} 714}
589 715
590.fold-button { 716.fold-button {
591 display: none; 717 display: none;
592 color: #252525; 718 color: $dark-grey;
593} 719}
594 720
595.linklist-item-editbuttons { 721.linklist-item-editbuttons {
596 float: right; 722 float: right;
597 padding: 8px 5px; 723 padding: 8px 5px;
598}
599 724
600.linklist-item-editbuttons * { 725 * {
601 display: block; 726 display: block;
602 float: left; 727 float: left;
603 margin: 0 1px; 728 margin: 0 1px;
604} 729 }
605 730
606.linklist-item-editbuttons a { 731 a {
607 font-size: 1em; 732 font-size: 1em;
733 }
734
735 .delete-checkbox {
736 display: none;
737 }
608} 738}
609 739
610.edit-link { 740.edit-link {
611 font-size: 1.2em; 741 color: $blue;
612 color: #0b5ea6; 742 font-size: 1.2em;
613} 743}
614 744
615.delete-link { 745.delete-link {
616 font-size: 1.3em; 746 color: $red !important;
617 color: #ac2925 !important; 747 font-size: 1.3em;
618} 748}
619 749
620.linklist-item-description { 750.linklist-item-description {
621 position: relative; 751 position: relative;
622 padding: 0 10px; 752 padding: 0 10px;
623 word-wrap: break-word; 753 line-height: 1.3em;
624 color: #252525; 754 color: $dark-grey;
625 line-height: 1.3em; 755 word-wrap: break-word;
626}
627 756
628.linklist-item-description a { 757 a {
629 text-decoration: none; 758 text-decoration: none;
630 color: #1b926c; 759 color: $main-green;
631}
632 760
633.linklist-item-description a:hover { 761 &:hover {
634 color: #252525; 762 color: $dark-grey;
635} 763 }
636 764
637.linklist-item-description a:visited { 765 &:visited {
638 color: #14553f; 766 color: $dark-green;
767 }
768 }
639} 769}
640 770
641.linklist-item-thumbnail { 771.linklist-item-thumbnail {
642 position: relative; 772 position: relative;
643 padding: 0 0 0 5px; 773 float: right;
644 margin: 0; 774 z-index: 50;
645 float: right; 775 margin: 0;
646 z-index: 50; 776 padding: 0 0 0 5px;
647 height: 90px; 777 height: 90px;
648}
649
650.linklist-item.private .linklist-item-title::before,
651.linklist-item.private .linklist-item-description::before {
652 position: absolute;
653 left: 3px;
654 top: 0;
655 display: block;
656 content:"";
657 background: #F89406;
658 height: 96%;
659 width: 2px;
660 z-index: 1;
661}
662
663.linklist-item.private .linklist-item-description::before {
664 height: 100%;
665}
666
667.linklist-item.private .linklist-item-title::before {
668 margin-top: 3px;
669} 778}
670 779
671.linklist-item-infos { 780.linklist-item-infos {
672 padding: 4px 8px 4px 8px; 781 background: $background-linklist-info;
673 background: #ddd; 782 padding: 4px 8px;
674 color: #252525; 783 color: $dark-grey;
675}
676 784
677.linklist-item-infos a { 785 a {
678 color: #252525;
679 text-decoration: none; 786 text-decoration: none;
680} 787 color: $dark-grey;
681 788
682.linklist-item-infos a:hover { 789 &:hover {
683 color: #000; 790 color: $black;
684} 791 }
792 }
685 793
686.linklist-item-infos .linklist-item-tags { 794 .linklist-item-tags {
687 font-size: 0.8em; 795 font-size: .8em;
688} 796 }
689 797
690.linklist-item-infos .label-tag { 798 .label-tag {
691 font-size: 1em; 799 font-size: 1em;
800 }
801
802 .mobile-buttons {
803 text-align: right;
804 }
805
806 .linklist-plugin-icon {
807 display: inline-block;
808 margin: 0 2px;
809 width: 16px;
810 height: 16px;
811 }
692} 812}
693 813
694.linklist-item-infos-dateblock { 814.linklist-item-infos-dateblock {
695 font-size: 0.9em; 815 font-size: .9em;
696} 816}
697 817
698.linklist-plugin-icon { 818.linklist-plugin-icon {
699 width: 13px; 819 width: 13px;
700 height: 13px; 820 height: 13px;
701} 821}
702 822
703.linklist-item-infos-url { 823.linklist-item-infos-url {
704 text-align: right; 824 height: 23px;
705 white-space: nowrap; 825 overflow: hidden;
706 overflow: hidden; 826 text-align: right;
707 text-overflow: ellipsis; 827 text-overflow: ellipsis;
708 font-size: 0.8em; 828 line-height: 23px;
709 height:23px; 829 white-space: nowrap;
710 line-height:23px; 830 font-size: .8em;
711}
712
713.linklist-item-infos .mobile-buttons {
714 text-align: right;
715}
716
717.linklist-item-infos .linklist-plugin-icon {
718 display: inline-block;
719 margin: 0 2px;
720 width: 16px;
721 height: 16px;
722} 831}
723 832
724.linklist-item-infos-controls-group { 833.linklist-item-infos-controls-group {
725 display: inline-block; 834 display: inline-block;
726 border-right: 1px solid #5d5d5d; 835 border-right: 1px solid $light-grey;
727 padding-right: 6px; 836 padding-right: 6px;
728} 837}
729 838
730.ctrl-edit { 839.ctrl-edit {
731 margin: 0 7px; 840 margin: 0 7px;
732} 841}
733 842
734/** 64em -> lg **/ 843// 64em -> lg
735@media screen and (max-width: 64em) { 844@media screen and (max-width: 64em) {
736 .linklist-item-infos-url { 845 .linklist-item-infos-url {
737 text-align: left; 846 text-align: left;
738 } 847 }
739} 848}
740 849
741/** 850// Footer
742 * Footer 851.footer-container {
743 */ 852 margin: 20px 0;
744#footer { 853 padding: 5px;
745 margin: 20px 0; 854 text-align: center;
746 padding: 5px; 855 color: $dark-grey;
747 text-align: center;
748 color: #252525;
749}
750 856
751#footer:before { 857 &::before {
752 display: block; 858 display: block;
753 content:"";
754 background: linear-gradient(to right, #949393, #252525, #949393);
755 height: 1px;
756 width: 80%;
757 margin: 10px auto; 859 margin: 10px auto;
860 background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
861 width: 80%;
862 height: 1px;
863 content: '';
864 }
865
866 a {
867 color: $dark-grey;
868 }
869}
870
871// PAGE FORM
872%page-form-input {
873 margin: 10px 0;
874 border: solid 1px $form-input-border;
875 border-radius: 2px;
876 background: $form-input-background;
877 padding: 5px 5px 3px 15px;
878 width: 90%;
879 height: 35px;
880 color: $dark-grey;
881 box-sizing: border-box;
882}
883
884%page-form-button {
885 display: inline-block;
886 margin: 15px 5px;
887 border: 0;
888 box-shadow: 1px 1px 1px $form-input-border, -1px -1px 6px $form-input-border, -1px 1px 2px $form-input-border, 1px -1px 2px $form-input-border;
889 background: $main-green;
890 min-width: 150px;
891 height: 35px;
892 vertical-align: center;
893 text-decoration: none;
894 line-height: 35px;
895 color: $almost-white;
896 font-size: 1.2em;
897 font-weight: normal;
758} 898}
759 899
760#footer a {
761 color: #252525;
762}
763
764/**
765 * PAGE FORM
766 */
767.page-form { 900.page-form {
768 margin: 20px 0 0 0; 901 margin: 20px 0 0;
769 background: #f5f5f5; 902 box-shadow: 1px 1px 2px $light-grey;
770 box-shadow: 1px 1px 2px #797979; 903 background: $almost-white;
771 color: #252525; 904 overflow: hidden;
772 overflow: hidden; 905 color: $dark-grey;
773} 906
774 907 .window-title {
775.page-form .window-title { 908 margin: 0 0 10px;
776 margin: 0 0 10px 0; 909 background: $almost-white;
777 padding: 10px 0; 910 padding: 10px 0;
778 width: 100%; 911 width: 100%;
779 color: #1b926c;
780 background: #f5f5f5;
781 text-align: center; 912 text-align: center;
782} 913 color: $main-green;
914 }
783 915
784.page-form .window-subtitle { 916 .window-subtitle {
785 text-align: center; 917 text-align: center;
786} 918 }
787 919
788.page-form a { 920 a {
789 color: #1b926c;
790 font-weight: bold;
791 text-decoration: none; 921 text-decoration: none;
792} 922 color: $main-green;
923 font-weight: bold;
793 924
794.page-form p { 925 &.button {
795 padding: 5px 10px; 926 @extend %page-form-button;
927 }
928 }
929
930 p {
796 margin: 0; 931 margin: 0;
797} 932 padding: 5px 10px;
933 }
798 934
799.page-form input[type="text"], 935 input {
800.page-form input[type="password"], 936 &[type='text'] {
801.page-form textarea { 937 @extend %page-form-input;
802 box-sizing: border-box; 938
803 margin: 10px 0; 939 &::-webkit-input-placeholder {
804 padding: 5px 5px 3px 15px; 940 color: $light-grey;
805 height: 35px; 941 }
806 width: 90%; 942 }
807 background: #eeeeee; 943
808 border: solid 1px #d8d8d8; 944 &[type='password'] {
809 border-radius: 2px; 945 @extend %page-form-input;
810 color: #252525; 946
811} 947 &::-webkit-input-placeholder {
948 color: $light-grey;
949 }
950 }
951
952 &[type='submit'] {
953 @extend %page-form-button;
954 }
955 }
956
957 textarea {
958 @extend %page-form-input;
812 959
813.page-form textarea {
814 min-height: 240px;
815 padding: 15px 5px 3px 15px; 960 padding: 15px 5px 3px 15px;
961 min-height: 240px;
816 resize: vertical; 962 resize: vertical;
817 overflow-y: auto; 963 overflow-y: auto;
818 word-wrap:break-word 964 word-wrap: break-word;
819} 965 }
820 966
821/* because chrome */ 967 select {
822.page-form input[type="text"]::-webkit-input-placeholder, 968 color: $dark-grey;
823.page-form input[type="password"]::-webkit-input-placeholder { 969 }
824 color: #777777;
825}
826 970
827.page-form input[type="submit"], .page-form a.button { 971 .button {
828 margin: 15px 5px; 972 &.button-red {
829 height: 35px; 973 background: $red;
830 line-height: 35px; 974 }
831 width: 150px; 975 }
832 background: #1b926c;
833 color: #f5f5f5;
834 border: none;
835 box-shadow: 1px 1px 1px #ddd, -1px -1px 6px #ddd, -1px 1px 2px #ddd, 1px -1px 2px #ddd;
836 font-size: 1.2em;
837 text-decoration: none;
838 vertical-align: center;
839 font-weight: normal;
840 display: inline-block;
841}
842 976
977 .submit-buttons {
978 margin-bottom: 10px;
979 }
843 980
844.page-form .button.button-red { 981 section {
845 background: #ac2925; 982 margin: 10px 0 25px;
846} 983 }
847 984
848.page-form .submit-buttons { 985 table,
849 margin-bottom: 10px; 986 th,
850} 987 td {
988 border-width: 1px 0;
989 border-style: solid;
990 border-color: $light-grey;
991 }
851 992
852@media screen and (min-width: 64em) { 993 th,
853 .page-form .submit-buttons { 994 td {
854 position: relative; 995 padding: 5px;
996 }
997
998 table {
999 margin: auto;
1000 width: 90%;
1001
1002 .order {
1003 text-decoration: none;
1004 color: $dark-grey;
855 } 1005 }
1006 }
856 1007
857 .page-form .submit-buttons .button.button-red { 1008 .awesomplete {
858 position: absolute; 1009 width: 90%;
859 right: 5%; 1010
1011 input {
1012 width: 100%;
1013 }
1014 }
1015
1016 div {
1017 .awesomplete {
1018 > ul {
1019 color: $black;
1020 }
860 } 1021 }
1022 }
1023}
1024
1025@media screen and (min-width: 64em) {
1026 .page-form {
1027 .submit-buttons {
1028 position: relative;
1029
1030 .button {
1031 &.button-red {
1032 position: absolute;
1033 right: 5%;
1034 }
1035 }
1036 }
1037 }
861} 1038}
862 1039
863@media screen and (max-width: 64em) { 1040@media screen and (max-width: 64em) {
864 .page-form .submit-buttons .button { 1041 .page-form {
1042 .submit-buttons {
1043 .button {
865 display: block; 1044 display: block;
866 margin: auto; 1045 margin: auto;
1046 }
867 } 1047 }
1048 }
868} 1049}
869 1050
870.page-form select { 1051// PAGE FORM - LIGHT
871 color: #252525; 1052.page-form-light {
872} 1053 div,
873 1054 p {
874/**
875 * PAGE FORM - LIGHT
876 */
877.page-form-light div, .page-form-light p {
878 text-align: center; 1055 text-align: center;
1056 }
879} 1057}
880 1058
881/** 1059// PAGE FORM - COMPLETE
882 * PAGE FORM - COMPLETE 1060%page-form-valign {
883 */ 1061 position: absolute;
884.page-form-complete div, .page-form-complete p { 1062 top: 50%;
885 color: #252525; 1063 transform: translateY(-50%);
886} 1064}
887 1065
888.page-form-complete .form-label, .page-form-complete .form-input { 1066.page-form-complete {
1067 div,
1068 p {
1069 color: $dark-grey;
1070 }
1071
1072 .form-label,
1073 .form-input {
889 position: relative; 1074 position: relative;
890 height: 60px; 1075 height: 60px;
891} 1076 }
892 1077
893.page-form-complete .form-label label, 1078 .form-label {
894.page-form-complete .form-input input, 1079 label {
895.page-form-complete .form-input select.align, 1080 @extend %page-form-valign;
896.page-form-complete .timezone {
897 position: absolute;
898 top: 50%;
899 transform: translateY(-50%);
900}
901 1081
902.page-form-complete .form-label label { 1082 right: 0;
903 text-align: right; 1083 padding: 0 20px;
904 right: 0; 1084 text-align: right;
905 padding: 0 20px; 1085 }
906} 1086 }
907 1087
908.page-form-complete .label-name { 1088 .label-name {
909 font-weight: bold; 1089 font-weight: bold;
910} 1090 }
911
912.page-form-complete .label-desc {
913 font-size: 0.8em;
914}
915 1091
916.page-form-complete input[type="text"], 1092 .label-desc {
917.page-form-complete input[type="password"], 1093 font-size: .8em;
918.page-form-complete textarea { 1094 }
919 margin: 0;
920}
921
922.page-form section {
923 margin: 10px 0 25px 0;
924}
925 1095
926.page-form table { 1096 .form-input {
927 margin: auto; 1097 input {
928 width: 90%; 1098 @extend %page-form-valign;
929}
930 1099
931.page-form table .order { 1100 &[type='text'],
932 text-decoration: none; 1101 &[type='password'] {
933 color: #252525; 1102 margin: 0;
934} 1103 }
1104 }
935 1105
936.page-form table, .page-form th, .page-form td { 1106 select {
937 border-width: 1px 0; 1107 &.align {
938 border-style: solid; 1108 @extend %page-form-valign;
939 border-color: #aaaaaa; 1109 }
940} 1110 }
1111 }
941 1112
942.page-form th, .page-form td { 1113 textarea {
943 padding: 5px; 1114 margin: 0;
1115 }
944 1116
1117 .timezone {
1118 @extend %page-form-valign;
1119 }
945} 1120}
946 1121
947/* Awesomeplete fix */ 1122// Awesomeplete fix
948div.awesomplete { 1123div {
1124 &.awesomplete {
949 width: inherit; 1125 width: inherit;
950}
951 1126
952div.awesomplete > input { 1127 > input {
953 display: inherit; 1128 display: inherit;
954} 1129 }
955 1130
956div.awesomplete > ul { 1131 > ul {
957 z-index: 9999; 1132 z-index: 9999;
1133 }
1134 }
958} 1135}
959 1136
960.page-form .awesomplete { 1137form {
961 width: 90%; 1138 &[name='linkform'] {
1139 &.page-form {
1140 overflow: visible;
1141 }
1142 }
962} 1143}
963 1144
964.page-form .awesomplete input { 1145@media screen and (max-width: 64em) {
965 width: 100%; 1146 %page-form-valign-mobile {
966} 1147 position: inherit;
1148 top: inherit;
1149 transform: translateY(0);
1150 }
967 1151
968.page-form div.awesomplete > ul { 1152 .page-form-complete {
969 color: black; 1153 .form-label {
970} 1154 height: inherit;
971 1155
972form[name="linkform"].page-form { 1156 label {
973 overflow: visible; 1157 @extend %page-form-valign-mobile;
974}
975 1158
976@media screen and (max-width: 64em) { 1159 display: block;
977 .page-form-complete .form-label { 1160 margin: 10px 0 0;
978 height: inherit; 1161 text-align: left;
1162 }
979 } 1163 }
980 1164
981 .page-form-complete .form-label label, 1165 .form-input {
982 .page-form-complete .form-input input, 1166 text-align: center;
983 .page-form-complete .timezone {
984 position: inherit;
985 top: inherit;
986 transform: translateY(0);
987 }
988 1167
989 .page-form-complete .form-input input[type="checkbox"] { 1168 input {
990 position: absolute; 1169 @extend %page-form-valign-mobile;
991 top: 50%;
992 right: 50%;
993 transform: translateY(-50%);
994 }
995 1170
996 .page-form-complete .form-input { 1171 &[type='checkbox'] {
997 text-align: center; 1172 position: absolute;
1173 top: 50%;
1174 right: 50%;
1175 transform: translateY(-50%);
1176 }
1177 }
998 } 1178 }
999 1179
1000 .page-form-complete .form-label label { 1180 .timezone {
1001 display: block; 1181 @extend %page-form-valign-mobile;
1002 text-align: left;
1003 margin: 10px 0 0 0;
1004 } 1182 }
1005 1183
1006 .timezone-continent:after { 1184 .radio-buttons {
1007 content:"\a\a"; 1185 padding: 5px 15px;
1008 white-space: pre; 1186 text-align: left;
1009 } 1187 }
1188 }
1010 1189
1011 .page-form-complete .radio-buttons { 1190 .timezone-continent {
1012 text-align: left; 1191 &::after {
1013 padding: 5px 15px; 1192 white-space: pre;
1193 content: '\a\a';
1014 } 1194 }
1195 }
1015} 1196}
1016 1197
1017/** 1198// Page visitor (page form extended)
1018 * Page visitor (page form extended)
1019 */
1020.page-visitor { 1199.page-visitor {
1021 color: #252525; 1200 color: $dark-grey;
1022} 1201}
1023 1202
1024#page404 { 1203.page404-container {
1025 color: #3f3f3f; 1204 color: $dark-grey;
1026} 1205}
1027 1206
1028/** 1207// EDIT LINK
1029 * EDIT LINK 1208.edit-link-container {
1030 */ 1209 .created-date {
1031#editlinkform .created-date {
1032 color: #767676;
1033 margin-bottom: 10px; 1210 margin-bottom: 10px;
1211 color: $light-grey;
1212 }
1034} 1213}
1035 1214
1036/** 1215// LOGIN
1037 * LOGIN 1216.login-form-container {
1038 */ 1217 .remember-me {
1039#login-form .remember-me {
1040 margin: 5px 0; 1218 margin: 5px 0;
1219 }
1041} 1220}
1042 1221
1043/** 1222// Search results
1044 * Search results 1223.search-result {
1045 */ 1224 a {
1046.search-result a {
1047 color: white;
1048 text-decoration: none; 1225 text-decoration: none;
1049} 1226 color: $white;
1227 }
1050 1228
1051.search-result .label-tag { 1229 .label-tag {
1052 border-color: white; 1230 border-color: $white;
1053}
1054 1231
1055.search-result .label-tag .remove { 1232 .remove {
1056 border-left: white 1px solid; 1233 margin: 0 0 0 5px;
1057 padding: 0 0 0 5px; 1234 border-left: $white 1px solid;
1058 margin: 0 0 0 5px; 1235 padding: 0 0 0 5px;
1059} 1236 }
1237 }
1060 1238
1061.search-result .label-private { 1239 .label-private {
1062 border: 1px solid white; 1240 border: 1px solid $white;
1241 }
1063} 1242}
1064 1243
1065/** 1244// TOOLS
1066 * TOOLS
1067 */
1068.tools-item { 1245.tools-item {
1069 margin: 10px 0; 1246 margin: 10px 0;
1070}
1071 1247
1072.tools-item .pure-button:hover { 1248 .pure-button {
1073 background-image: none; 1249 &:hover {
1074 background-color: #1b926c; 1250 background-color: $main-green;
1075 color: #f5f5f5; 1251 background-image: none;
1252 color: $almost-white;
1253 }
1254 }
1076} 1255}
1077 1256
1078/** 1257// PLUGIN ADMIN
1079 * PLUGIN ADMIN 1258.pluginform-container {
1080 */ 1259 .mobile-row {
1081#pluginform .mobile-row { 1260 font-size: .9em;
1082 font-size: 0.9em; 1261 }
1083}
1084 1262
1085#pluginform .more { 1263 .more {
1086 margin-top: 10px; 1264 margin-top: 10px;
1265 }
1087} 1266}
1088 1267
1089@media screen and (max-width: 64em) { 1268@media screen and (max-width: 64em) {
1090 #pluginform .main-row, #pluginform .main-row td { 1269 .pluginform-container {
1091 border-bottom-style: none; 1270 .main-row {
1092 } 1271 border-top-style: none;
1272 border-bottom-style: none;
1093 1273
1094 #pluginform .mobile-row, #pluginform .mobile-row td { 1274 td {
1095 border-top-style: none; 1275 border-top-style: none;
1276 border-bottom-style: none;
1277 }
1096 } 1278 }
1279 }
1097} 1280}
1098 1281
1099/** 1282// IMPORT
1100 * IMPORT 1283.import-field-container {
1101 */ 1284 margin: 15px 0;
1102#import-field {
1103 margin: 15px 0;
1104} 1285}
1105 1286
1106/** 1287// TAG CLOUD
1107 * TAG CLOUD 1288.cloudtag-container {
1108 */ 1289 padding: 10px;
1109#cloudtag { 1290 text-align: center;
1110 padding: 10px; 1291 text-decoration: none;
1111 text-align: center; 1292 color: $dark-grey;
1112}
1113 1293
1114#cloudtag, #cloudtag a { 1294 a {
1115 color: #252525;
1116 text-decoration: none; 1295 text-decoration: none;
1117} 1296 color: $dark-grey;
1297 }
1118 1298
1119#cloudtag .count { 1299 .count {
1120 color: #7f7f7f; 1300 color: $light-grey;
1301 }
1121} 1302}
1122 1303
1123/** 1304// TAG LIST
1124 * TAG LIST 1305.taglist-container {
1125 */ 1306 padding: 0 10px;
1126#taglist {
1127 padding: 0 10px;
1128}
1129 1307
1130#taglist a { 1308 a {
1131 color: #252525;
1132 text-decoration: none; 1309 text-decoration: none;
1133} 1310 color: $dark-grey;
1311 }
1134 1312
1135#taglist .count { 1313 .count {
1136 display: inline-block; 1314 display: inline-block;
1137 width: 35px; 1315 width: 35px;
1138 text-align: right; 1316 text-align: right;
1139 color: #7f7f7f; 1317 color: $light-grey;
1140} 1318 }
1141 1319
1142#taglist .rename-tag-form { 1320 .rename-tag-form {
1143 display: none; 1321 display: none;
1144} 1322 }
1145 1323
1146#taglist .delete-tag { 1324 .delete-tag {
1147 color: #ac2925;
1148 display: none; 1325 display: none;
1149} 1326 color: $red;
1150 1327 }
1151#taglist .rename-tag { 1328
1152 color: #0b5ea6; 1329 .rename-tag {
1153} 1330 color: $blue;
1154 1331 }
1155#taglist .validate-rename-tag { 1332
1156 color: #1b926c; 1333 .validate-rename-tag {
1157} 1334 color: $main-green;
1158 1335 }
1159/** 1336}
1160 * Picture wall CSS 1337
1161 */ 1338// Picture wall CSS
1162#picwall_container { 1339.picwall-container {
1163 margin: 0 10px 10px 10px; 1340 clear: both;
1164 color: #252525; 1341 margin: 0 10px 10px;
1165 background-color: #f5f5f5; 1342 background-color: $almost-white;
1166 clear: both; 1343 color: $dark-grey;
1167} 1344}
1168 1345
1169.picwall_pictureframe { 1346.picwall-pictureframe {
1170 margin: 2px; 1347 display: table-cell;
1171 background-color: #f5f5f5; 1348 position: relative;
1172 z-index: 5; 1349 float: left;
1173 position: relative; 1350 z-index: 5;
1174 display: table-cell; 1351 margin: 2px;
1175 vertical-align: middle; 1352 background-color: $almost-white;
1176 width: 90px; 1353 width: 90px;
1177 height: 90px; 1354 height: 90px;
1178 overflow: hidden; 1355 overflow: hidden;
1179 text-align: center; 1356 vertical-align: middle;
1180 float: left; 1357 text-align: center;
1181} 1358
1182 1359 // Adapt the width of the image
1183.b-lazy { 1360 img {
1184 -webkit-transition: opacity 500ms ease-in-out;
1185 -moz-transition: opacity 500ms ease-in-out;
1186 -o-transition: opacity 500ms ease-in-out;
1187 transition: opacity 500ms ease-in-out;
1188 opacity: 0;
1189}
1190.b-lazy.b-loaded {
1191 opacity: 1;
1192}
1193
1194.picwall_pictureframe img {
1195 max-width: 100%; 1361 max-width: 100%;
1196 height: auto; 1362 height: auto;
1197 color: transparent; 1363 color: transparent;
1198} /* Adapt the width of the image */ 1364 }
1199 1365
1200.picwall_pictureframe a { 1366 a {
1201 text-decoration: none; 1367 text-decoration: none;
1202} 1368 }
1203 1369
1204/* CSS to show title when hovering an image - no javascript required. */ 1370 span {
1205.picwall_pictureframe span.info { 1371 &.info {
1206 display: none; 1372 display: none;
1207 font-family: Arial, sans-serif; 1373 font-family: Arial, sans-serif;
1374 }
1375 }
1376
1377 // CSS to show title when hovering an image - no javascript required.
1378 &:hover {
1379 span {
1380 &.info {
1381 display: block;
1382 position: absolute;
1383 top: 0;
1384 left: 0;
1385 background-color: $dark-shadow;
1386 width: 90px;
1387 height: 90px;
1388 text-align: left;
1389 color: $almost-white;
1390 font-size: 9pt;
1391 font-weight: bold;
1392 }
1393 }
1394 }
1208} 1395}
1209 1396
1210.picwall_pictureframe:hover span.info { 1397.b-lazy {
1211 display: block; 1398 transition: opacity 500ms ease-in-out;
1212 position: absolute; 1399 opacity: 0;
1213 top: 0; 1400 -webkit-transition: opacity 500ms ease-in-out;
1214 left: 0; 1401 -moz-transition: opacity 500ms ease-in-out;
1215 width: 90px; 1402 -o-transition: opacity 500ms ease-in-out;
1216 height: 90px; 1403
1217 font-weight: bold; 1404 &.b-loaded {
1218 font-size: 9pt; 1405 opacity: 1;
1219 color: #f5f5f5; 1406 }
1220 text-align: left;
1221 background-color: rgba(0, 0, 0, 0.8);
1222} 1407}
1223 1408
1224/** 1409// DAILY
1225 * DAILY
1226 */
1227.daily-desc { 1410.daily-desc {
1228 color: #7f7f7f; 1411 color: $light-grey;
1229 font-size: 0.8em; 1412 font-size: .8em;
1230}
1231 1413
1232.daily-about a { 1414 a {
1233 color: #343434;
1234 text-decoration: none; 1415 text-decoration: none;
1235} 1416 color: $dark-grey;
1236
1237.daily-about a:hover {
1238 color: #7f7f7f;
1239}
1240 1417
1241.daily-about h3:before, .daily-about h3:after { 1418 &:hover {
1242 display: block; 1419 color: $light-grey;
1243 content:""; 1420 }
1244 background: linear-gradient(to right, #d5d4d4, #252525, #d5d4d4); 1421 }
1245 height: 1px; 1422}
1246 width: 90%; 1423
1247 margin: 10px auto; 1424.daily-about {
1425 h3 {
1426 &::before,
1427 &::after {
1428 display: block;
1429 margin: 10px auto;
1430 background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
1431 width: 90%;
1432 height: 1px;
1433 content: '';
1434 }
1435 }
1248} 1436}
1249 1437
1250.daily-entry { 1438.daily-entry {
1251 padding: 0 10px; 1439 padding: 0 10px;
1252}
1253 1440
1254.daily-entry .daily-entry-title:after { 1441 .daily-entry-title {
1255 display: block; 1442 margin: 10px 0 0;
1256 content:"";
1257 background: linear-gradient(to right, #fff, #515151, #fff);
1258 height: 1px;
1259 width: 70%;
1260 margin: 5px auto;
1261}
1262 1443
1263.daily-entry .daily-entry-title { 1444 a {
1264 margin: 10px 0 0 0; 1445 text-decoration: none;
1265} 1446 color: $black;
1447 }
1266 1448
1267.daily-entry .daily-entry-title a { 1449 &::after {
1268 color: #000; 1450 display: block;
1269 text-decoration: none; 1451 margin: 5px auto;
1270} 1452 background: linear-gradient(to right, $white, $light-grey, $white);
1453 width: 70%;
1454 height: 1px;
1455 content: '';
1456 }
1457 }
1271 1458
1272.daily-entry .daily-entry-description { 1459 .daily-entry-description {
1273 padding: 5px 5px 0 5px; 1460 padding: 5px 5px 0;
1274 font-size: 0.9em;
1275 text-align: justify; 1461 text-align: justify;
1462 font-size: .9em;
1276 word-wrap: break-word; 1463 word-wrap: break-word;
1277} 1464 }
1278 1465
1279.daily-entry .daily-entry-tags { 1466 .daily-entry-tags {
1280 padding: 0 5px 5px 5px; 1467 padding: 0 5px 5px;
1281 font-size: 0.8em; 1468 font-size: .8em;
1469 }
1282} 1470}
1283 1471
1284.daily-entry-thumbnail { 1472.daily-entry-thumbnail {
1285 float: left; 1473 float: left;
1286 margin: 15px 5px 5px 15px; 1474 margin: 15px 5px 5px 15px;
1287} 1475}
1288 1476
1289.daily-entry-description a { 1477.daily-entry-description {
1478 a {
1290 text-decoration: none; 1479 text-decoration: none;
1291 color: #1b926c; 1480 color: $main-green;
1292}
1293 1481
1294.daily-entry-description a:hover { 1482 &:hover {
1295 text-shadow: 1px 1px #ddd; 1483 text-shadow: 1px 1px $background-linklist-info;
1296} 1484 }
1297 1485
1298.daily-entry-description a:visited { 1486 &:visited {
1299 color: #20b988; 1487 color: $dark-green;
1488 }
1489 }
1300} 1490}
1301 1491
1302/* 1492// Fix empty bookmarklet name in Firefox
1303 * Fix empty bookmarklet name in Firefox
1304 */
1305.pure-button { 1493.pure-button {
1306 -moz-user-select: auto; 1494 -moz-user-select: auto;
1307} 1495}
1308 1496
1309.tag-sort { 1497.tag-sort {
1310 margin-top: 30px; 1498 margin-top: 30px;
1311 text-align: center; 1499 text-align: center;
1312}
1313 1500
1314.tag-sort a { 1501 a {
1315 display: inline-block; 1502 display: inline-block;
1316 margin: 0 15px; 1503 margin: 0 15px;
1317 color: white;
1318 text-decoration: none; 1504 text-decoration: none;
1505 color: $white;
1319 font-weight: bold; 1506 font-weight: bold;
1507 }
1320} 1508}
1321 1509
1322/** 1510// Markdown
1323 * Markdown 1511.markdown {
1324 */ 1512 p {
1325.markdown p {
1326 margin: 0 !important; 1513 margin: 0 !important;
1327} 1514 }
1328 1515
1329.markdown p + p { 1516 p + p {
1330 margin: 0.5em 0 0 0 !important; 1517 margin: .5em 0 0 !important;
1331} 1518 }
1332 1519
1333.markdown *:first-child { 1520 * {
1334 margin-top: 0 !important; 1521 &:first-child {
1335} 1522 margin-top: 0 !important;
1523 }
1336 1524
1337.markdown *:last-child { 1525 &:last-child {
1338 margin-bottom: 5px !important; 1526 margin-bottom: 5px !important;
1527 }
1528 }
1339} 1529}
1340 1530
1341/** 1531// Pure Button
1342 * Pure Button
1343 */
1344.pure-button-success, 1532.pure-button-success,
1345.pure-button-error, 1533.pure-button-error,
1346.pure-button-warning, 1534.pure-button-warning,
1347.pure-button-primary, 1535.pure-button-primary,
1348.pure-button-shaarli, 1536.pure-button-shaarli,
1349.pure-button-secondary { 1537.pure-button-secondary {
1350 color: white !important; 1538 border-radius: 4px;
1351 border-radius: 4px; 1539 text-shadow: 0 1px 1px $dark-shadow;
1352 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 1540 color: $white !important;
1353} 1541}
1354 1542
1355.pure-button-shaarli { 1543.pure-button-shaarli {
1356 background-color: #1B926C; 1544 background-color: $main-green;
1357} 1545}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-05 07:19:32 +0000