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;
1028 background: $light-grey;
1033 margin-bottom: 10px;
1037 margin: 10px 0 25px;
1043 border-width: 1px 0;
1044 border-style: solid;
1045 border-color: $light-grey;
1054 margin: 10px auto 25px auto;
1058 text-decoration: none;
1080 @media screen and (min-width: 64em) {
1100 @media screen and (max-width: 64em) {
1110 // PAGE FORM - LIGHT
1118 // PAGE FORM - COMPLETE
1122 transform: translateY(-50%);
1125 .page-form-complete {
1139 @extend %page-form-valign;
1157 @extend %page-form-valign;
1160 &[type='password'] {
1167 @extend %page-form-valign;
1177 @extend %page-form-valign;
1197 &[name='linkform'] {
1204 @media screen and (max-width: 64em) {
1205 %page-form-valign-mobile {
1208 transform: translateY(0);
1211 .page-form-complete {
1216 @extend %page-form-valign-mobile;
1228 @extend %page-form-valign-mobile;
1230 &[type='checkbox'] {
1234 transform: translateY(-50%);
1240 @extend %page-form-valign-mobile;
1249 .timezone-continent {
1257 // Page visitor (page form extended)
1262 .page-error-container {
1266 margin: 70px 0 25px;
1278 .edit-link-container {
1280 margin-bottom: 10px;
1290 transform: rotate(0deg);
1294 transform: rotate(360deg);
1301 top: calc(50% - 10px);
1308 display: inline-block;
1309 animation: around 5.4s infinite;
1314 background: $form-input-background;
1316 display: inline-block;
1320 border-color: #333 #333 transparent transparent;
1321 border-style: solid;
1322 border-radius: 20px;
1323 box-sizing: border-box;
1326 animation: around 0.7s ease-in-out infinite;
1330 animation: around 0.7s ease-in-out 0.1s infinite;
1331 background: transparent;
1337 .login-form-container {
1346 text-decoration: none;
1351 border-color: $white;
1355 border-left: $white 1px solid;
1361 border: 1px solid $white;
1371 background-color: var(--main-color);
1372 background-image: none;
1373 color: $almost-white;
1379 .pluginform-container {
1389 @media screen and (max-width: 64em) {
1390 .pluginform-container {
1392 border-top-style: none;
1393 border-bottom-style: none;
1396 border-top-style: none;
1397 border-bottom-style: none;
1404 .import-field-container {
1409 .cloudtag-container {
1412 text-decoration: none;
1416 text-decoration: none;
1426 .taglist-container {
1430 text-decoration: none;
1435 display: inline-block;
1454 .validate-rename-tag {
1455 color: var(--main-color);
1460 .picwall-container {
1462 margin: 0 10px 10px;
1463 background-color: $almost-white;
1467 .picwall-pictureframe {
1468 display: table-cell;
1473 background-color: $almost-white;
1477 vertical-align: middle;
1480 // Adapt the width of the image
1488 text-decoration: none;
1494 font-family: Arial, sans-serif;
1498 // CSS to show title when hovering an image - no javascript required.
1506 background-color: $dark-shadow;
1510 color: $almost-white;
1519 transition: opacity 500ms ease-in-out;
1521 -webkit-transition: opacity 500ms ease-in-out;
1522 -moz-transition: opacity 500ms ease-in-out;
1523 -o-transition: opacity 500ms ease-in-out;
1538 text-decoration: none;
1553 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
1564 .daily-entry-title {
1568 text-decoration: none;
1575 background: linear-gradient(to right, $white, $light-grey, $white);
1582 .daily-entry-description {
1584 text-align: justify;
1586 word-wrap: break-word;
1595 .daily-entry-thumbnail {
1597 margin: 15px 5px 5px 15px;
1600 .daily-entry-description {
1602 text-decoration: none;
1603 color: var(--main-color);
1606 text-shadow: 1px 1px $background-linklist-info;
1610 color: var(--dark-main-color);
1615 // Fix empty bookmarklet name in Firefox
1617 -moz-user-select: auto;
1625 background: $almost-white;
1626 display: inline-block;
1628 text-decoration: none;
1636 margin: 0 !important;
1640 margin: .5em 0 0 !important;
1645 margin-top: 0 !important;
1649 margin-bottom: 5px !important;
1655 .pure-button-success,
1657 .pure-button-warning,
1658 .pure-button-primary,
1659 .pure-button-shaarli,
1660 .pure-button-secondary {
1662 text-shadow: 0 1px 1px $dark-shadow;
1663 color: $white !important;
1666 .pure-button-shaarli {
1667 background-color: var(--main-color);
1672 background-color: var(--main-color);
1676 border-radius: 10px;
1678 repeating-linear-gradient(
1682 var(--background-color) 6px,
1683 var(--background-color) 12px
1690 .thumbnails-page-container {
1692 padding: 10px 0 20px;
1695 .thumbnail-placeholder {
1697 background-color: $light-grey;
1700 .thumbnail-link-title {
1701 padding-bottom: 20px;
1703 text-overflow: ellipsis;
1704 white-space: nowrap;
1710 .server-tables-page,
1716 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
1749 @media screen and (max-width: 64em) {
1763 input[name='save_edit_batch'] {
1764 @extend %page-form-button;
1767 .addlink-batch-show-more {
1769 align-items: center;
1773 color: var(--main-color);
1774 text-decoration: none;
1781 background: rgba(0, 0, 0, 0.35);
1796 .addlink-batch-form-block {
1810 .linklist-item-infos-controls-group,