1 $fa-font-path: '~fork-awesome/fonts';
3 @import '~fork-awesome/scss/fork-awesome';
4 @import '~purecss/build/pure.css';
5 @import '~purecss/build/grids-responsive.css';
6 @import '~pure-extras/css/pure-extras.css';
7 @import '~awesomplete/awesomplete.css';
11 $almost-white: #f5f5f5;
15 $light-green: #b0ddce;
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;
29 --main-color: #{$main-green};
30 --background-color: #{$background-color};
31 --dark-main-color: #{$dark-green};
36 background: var(--background-color);
53 display: inline-block;
54 border-radius: .25rem;
56 vertical-align: baseline;
69 font-family: 'Roboto';
74 local('Roboto-Regular'),
75 url('../fonts/Roboto-Regular.woff2') format('woff2'),
76 url('../fonts/Roboto-Regular.woff') format('woff');
80 font-family: 'Roboto';
86 url('../fonts/Roboto-Bold.woff2') format('woff2'),
87 url('../fonts/Roboto-Bold.woff') format('woff');
91 .pure-g [class*='pure-u'] {
92 font-family: Roboto, Arial, sans-serif;
95 // Extends Pure grids responsive to hide items.
96 // Use xx-0 to hide an item on xx screen.
97 // Display it at any level with xx-visible.
99 display: none !important;
102 @media screen and (min-width: 35.5em) {
104 display: none !important;
108 display: inline-block !important;
112 @media screen and (min-width: 48em) {
114 display: none !important;
118 display: inline-block !important;
122 @media screen and (min-width: 64em) {
124 display: none !important;
128 display: inline-block !important;
132 @media screen and (min-width: 80em) {
134 display: none !important;
138 display: inline-block !important;
142 // Make pure-extras alert closable.
143 .pure-alert-closable {
153 .pure-alert-success {
154 background-color: var(--main-color);
157 .pure-alert-warning {
159 color: $warning-text;
178 transition: max-height .5s;
180 background: var(--main-color);
182 // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919
185 -webkit-font-smoothing: antialiased;
188 transition: max-height .75s;
194 // Chrome bugfix: with 100% height, it only displays the first element.
216 color: $almost-white;
220 background: transparent;
233 @extend %menu-link-hover;
237 .pure-menu-selected {
247 @extend %menu-link-hover;
265 border-radius: 100px;
266 background-color: $light-green;
269 transition-duration: .5s;
272 transform: translateY(-6px);
278 transform: rotate(45deg);
281 transform: rotate(-45deg);
287 @media screen and (max-width: 64em) {
302 @media screen and (min-width: 64em) {
315 border: medium none currentColor;
317 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
318 background: $almost-white;
324 &::-webkit-input-placeholder {
333 background-color: var(--main-color);
334 padding: 4px 8px 6px;
335 color: $almost-white;
339 @media screen and (max-width: 64em) {
352 @media screen and (max-width: 64em) {
369 color: var(--background-color);
379 @media screen and (max-width: 64em) {
386 %subheader-form-input {
387 border: medium none currentColor;
389 box-shadow: 0 1px 0 $light-shadow, 0 1px 4px $dark-shadow inset;
390 background: $almost-white;
391 padding: 5px 5px 3px 15px;
400 background: var(--main-color);
409 @extend %subheader-form-input;
411 &::-webkit-input-placeholder {
418 display: inline-block;
420 border: 1px solid $almost-white;
422 background: var(--main-color);
426 color: $almost-white;
429 background: $almost-white;
430 color: var(--main-color);
435 @extend %subheader-form-input;
437 display: inline-block;
439 padding: 5px 20px 3px;
450 border: 2px solid $almost-white;
453 text-decoration: none;
454 color: $almost-white;
467 &::-webkit-input-placeholder {
474 @media screen and (min-width: 64em) {
486 .new-version-message {
490 color: $warning-text;
495 .header-alert-message {
506 // Plugins additional forms
513 border: medium none currentColor;
515 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
516 background: $almost-white;
522 &::-webkit-input-placeholder {
528 border: medium none currentColor;
530 background: $almost-white;
542 @media screen and (max-width: 64em) {
552 // CONTENT - LINKLIST PAGING
560 display: inline-block;
563 text-decoration: none;
567 background: $almost-white;
572 background: var(--main-color);
578 color: $almost-white;
588 text-decoration: none;
597 %linksperpage-button {
598 display: inline-block;
614 @extend %linksperpage-button;
616 background: $almost-white;
618 text-decoration: none;
622 background: var(--main-color);
629 @extend %linksperpage-button;
632 border: medium none currentColor;
633 background: $almost-white;
634 padding: 4px 5px 3px 8px;
642 // CONTENT - LINKLIST ITEMS
658 box-shadow: 1px 1px 3px $light-grey;
659 background: $almost-white;
676 background-color: yellow;
680 .linklist-item-buttons {
683 background: transparent;
687 .linklist-item-buttons-right {
692 .linklist-item-buttons * {
700 .linklist-item-title {
703 background: $almost-white;
704 word-wrap: break-word;
710 word-wrap: break-word;
713 vertical-align: middle;
714 text-decoration: none;
720 color: var(--dark-main-color);
731 color: var(--main-color);
740 font-family: Arial, sans-serif;
745 border: solid 1px $orange;
750 border: solid 1px $blue;
760 .linklist-item-editbuttons {
785 color: $red !important;
794 color: $blue !important;
797 .linklist-item-description {
802 word-wrap: break-word;
805 text-decoration: none;
806 color: var(--main-color);
813 color: var(--dark-main-color);
818 .linklist-item-thumbnail {
827 .linklist-item-infos {
828 background: $background-linklist-info;
833 text-decoration: none;
841 .linklist-item-tags {
853 .linklist-plugin-icon {
854 display: inline-block;
861 .linklist-item-infos-dateblock {
865 .linklist-plugin-icon {
870 .linklist-item-infos-url {
874 text-overflow: ellipsis;
880 .linklist-item-infos-controls-group {
881 display: inline-block;
882 border-right: 1px solid $light-grey;
895 @media screen and (max-width: 64em) {
896 .linklist-item-infos-url {
911 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
925 border: solid 1px $form-input-border;
927 background: $form-input-background;
928 padding: 5px 5px 3px 15px;
932 box-sizing: border-box;
936 display: inline-block;
939 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;
940 background: var(--main-color);
943 vertical-align: center;
944 text-decoration: none;
946 color: $almost-white;
953 box-shadow: 1px 1px 2px $light-grey;
954 background: $almost-white;
960 background: $almost-white;
964 color: var(--main-color);
972 text-decoration: none;
973 color: var(--main-color);
977 @extend %page-form-button;
988 @extend %page-form-input;
990 &::-webkit-input-placeholder {
996 @extend %page-form-input;
998 &::-webkit-input-placeholder {
1004 @extend %page-form-button;
1009 @extend %page-form-input;
1011 padding: 15px 5px 3px 15px;
1015 word-wrap: break-word;
1029 margin-bottom: 10px;
1033 margin: 10px 0 25px;
1039 border-width: 1px 0;
1040 border-style: solid;
1041 border-color: $light-grey;
1054 text-decoration: none;
1076 @media screen and (min-width: 64em) {
1091 @media screen and (max-width: 64em) {
1101 // PAGE FORM - LIGHT
1109 // PAGE FORM - COMPLETE
1113 transform: translateY(-50%);
1116 .page-form-complete {
1130 @extend %page-form-valign;
1148 @extend %page-form-valign;
1151 &[type='password'] {
1158 @extend %page-form-valign;
1168 @extend %page-form-valign;
1188 &[name='linkform'] {
1195 @media screen and (max-width: 64em) {
1196 %page-form-valign-mobile {
1199 transform: translateY(0);
1202 .page-form-complete {
1207 @extend %page-form-valign-mobile;
1219 @extend %page-form-valign-mobile;
1221 &[type='checkbox'] {
1225 transform: translateY(-50%);
1231 @extend %page-form-valign-mobile;
1240 .timezone-continent {
1248 // Page visitor (page form extended)
1253 .page-error-container {
1257 margin: 70px 0 25px;
1269 .edit-link-container {
1271 margin-bottom: 10px;
1281 transform: rotate(0deg);
1285 transform: rotate(360deg);
1292 top: calc(50% - 10px);
1299 display: inline-block;
1300 animation: around 5.4s infinite;
1305 background: $form-input-background;
1307 display: inline-block;
1311 border-color: #333 #333 transparent transparent;
1312 border-style: solid;
1313 border-radius: 20px;
1314 box-sizing: border-box;
1317 animation: around 0.7s ease-in-out infinite;
1321 animation: around 0.7s ease-in-out 0.1s infinite;
1322 background: transparent;
1328 .login-form-container {
1337 text-decoration: none;
1342 border-color: $white;
1346 border-left: $white 1px solid;
1352 border: 1px solid $white;
1362 background-color: var(--main-color);
1363 background-image: none;
1364 color: $almost-white;
1370 .pluginform-container {
1380 @media screen and (max-width: 64em) {
1381 .pluginform-container {
1383 border-top-style: none;
1384 border-bottom-style: none;
1387 border-top-style: none;
1388 border-bottom-style: none;
1395 .import-field-container {
1400 .cloudtag-container {
1403 text-decoration: none;
1407 text-decoration: none;
1417 .taglist-container {
1421 text-decoration: none;
1426 display: inline-block;
1445 .validate-rename-tag {
1446 color: var(--main-color);
1451 .picwall-container {
1453 margin: 0 10px 10px;
1454 background-color: $almost-white;
1458 .picwall-pictureframe {
1459 display: table-cell;
1464 background-color: $almost-white;
1468 vertical-align: middle;
1471 // Adapt the width of the image
1479 text-decoration: none;
1485 font-family: Arial, sans-serif;
1489 // CSS to show title when hovering an image - no javascript required.
1497 background-color: $dark-shadow;
1501 color: $almost-white;
1510 transition: opacity 500ms ease-in-out;
1512 -webkit-transition: opacity 500ms ease-in-out;
1513 -moz-transition: opacity 500ms ease-in-out;
1514 -o-transition: opacity 500ms ease-in-out;
1529 text-decoration: none;
1544 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
1555 .daily-entry-title {
1559 text-decoration: none;
1566 background: linear-gradient(to right, $white, $light-grey, $white);
1573 .daily-entry-description {
1575 text-align: justify;
1577 word-wrap: break-word;
1586 .daily-entry-thumbnail {
1588 margin: 15px 5px 5px 15px;
1591 .daily-entry-description {
1593 text-decoration: none;
1594 color: var(--main-color);
1597 text-shadow: 1px 1px $background-linklist-info;
1601 color: var(--dark-main-color);
1606 // Fix empty bookmarklet name in Firefox
1608 -moz-user-select: auto;
1616 background: $almost-white;
1617 display: inline-block;
1619 text-decoration: none;
1627 margin: 0 !important;
1631 margin: .5em 0 0 !important;
1636 margin-top: 0 !important;
1640 margin-bottom: 5px !important;
1646 .pure-button-success,
1648 .pure-button-warning,
1649 .pure-button-primary,
1650 .pure-button-shaarli,
1651 .pure-button-secondary {
1653 text-shadow: 0 1px 1px $dark-shadow;
1654 color: $white !important;
1657 .pure-button-shaarli {
1658 background-color: var(--main-color);
1663 background-color: var(--main-color);
1667 border-radius: 10px;
1669 repeating-linear-gradient(
1673 var(--background-color) 6px,
1674 var(--background-color) 12px
1681 .thumbnails-page-container {
1683 padding: 10px 0 20px;
1686 .thumbnail-placeholder {
1688 background-color: $light-grey;
1691 .thumbnail-link-title {
1692 padding-bottom: 20px;
1694 text-overflow: ellipsis;
1695 white-space: nowrap;
1707 .linklist-item-infos-controls-group,