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 .linklist-item-buttons {
679 background: transparent;
683 .linklist-item-buttons-right {
688 .linklist-item-buttons * {
696 .linklist-item-title {
699 background: $almost-white;
700 word-wrap: break-word;
706 word-wrap: break-word;
709 vertical-align: middle;
710 text-decoration: none;
716 color: var(--dark-main-color);
727 color: var(--main-color);
736 font-family: Arial, sans-serif;
741 border: solid 1px $orange;
746 border: solid 1px $blue;
756 .linklist-item-editbuttons {
781 color: $red !important;
790 color: $blue !important;
793 .linklist-item-description {
798 word-wrap: break-word;
801 text-decoration: none;
802 color: var(--main-color);
809 color: var(--dark-main-color);
814 .linklist-item-thumbnail {
823 .linklist-item-infos {
824 background: $background-linklist-info;
829 text-decoration: none;
837 .linklist-item-tags {
849 .linklist-plugin-icon {
850 display: inline-block;
857 .linklist-item-infos-dateblock {
861 .linklist-plugin-icon {
866 .linklist-item-infos-url {
870 text-overflow: ellipsis;
876 .linklist-item-infos-controls-group {
877 display: inline-block;
878 border-right: 1px solid $light-grey;
891 @media screen and (max-width: 64em) {
892 .linklist-item-infos-url {
907 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
921 border: solid 1px $form-input-border;
923 background: $form-input-background;
924 padding: 5px 5px 3px 15px;
928 box-sizing: border-box;
932 display: inline-block;
935 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;
936 background: var(--main-color);
939 vertical-align: center;
940 text-decoration: none;
942 color: $almost-white;
949 box-shadow: 1px 1px 2px $light-grey;
950 background: $almost-white;
956 background: $almost-white;
960 color: var(--main-color);
968 text-decoration: none;
969 color: var(--main-color);
973 @extend %page-form-button;
984 @extend %page-form-input;
986 &::-webkit-input-placeholder {
992 @extend %page-form-input;
994 &::-webkit-input-placeholder {
1000 @extend %page-form-button;
1005 @extend %page-form-input;
1007 padding: 15px 5px 3px 15px;
1011 word-wrap: break-word;
1025 margin-bottom: 10px;
1029 margin: 10px 0 25px;
1035 border-width: 1px 0;
1036 border-style: solid;
1037 border-color: $light-grey;
1050 text-decoration: none;
1072 @media screen and (min-width: 64em) {
1087 @media screen and (max-width: 64em) {
1097 // PAGE FORM - LIGHT
1105 // PAGE FORM - COMPLETE
1109 transform: translateY(-50%);
1112 .page-form-complete {
1126 @extend %page-form-valign;
1144 @extend %page-form-valign;
1147 &[type='password'] {
1154 @extend %page-form-valign;
1164 @extend %page-form-valign;
1184 &[name='linkform'] {
1191 @media screen and (max-width: 64em) {
1192 %page-form-valign-mobile {
1195 transform: translateY(0);
1198 .page-form-complete {
1203 @extend %page-form-valign-mobile;
1215 @extend %page-form-valign-mobile;
1217 &[type='checkbox'] {
1221 transform: translateY(-50%);
1227 @extend %page-form-valign-mobile;
1236 .timezone-continent {
1244 // Page visitor (page form extended)
1249 .page-error-container {
1253 margin: 70px 0 25px;
1265 .edit-link-container {
1267 margin-bottom: 10px;
1277 transform: rotate(0deg);
1281 transform: rotate(360deg);
1288 top: calc(50% - 10px);
1295 display: inline-block;
1296 animation: around 5.4s infinite;
1301 background: $form-input-background;
1303 display: inline-block;
1307 border-color: #333 #333 transparent transparent;
1308 border-style: solid;
1309 border-radius: 20px;
1310 box-sizing: border-box;
1313 animation: around 0.7s ease-in-out infinite;
1317 animation: around 0.7s ease-in-out 0.1s infinite;
1318 background: transparent;
1324 .login-form-container {
1333 text-decoration: none;
1338 border-color: $white;
1342 border-left: $white 1px solid;
1348 border: 1px solid $white;
1358 background-color: var(--main-color);
1359 background-image: none;
1360 color: $almost-white;
1366 .pluginform-container {
1376 @media screen and (max-width: 64em) {
1377 .pluginform-container {
1379 border-top-style: none;
1380 border-bottom-style: none;
1383 border-top-style: none;
1384 border-bottom-style: none;
1391 .import-field-container {
1396 .cloudtag-container {
1399 text-decoration: none;
1403 text-decoration: none;
1413 .taglist-container {
1417 text-decoration: none;
1422 display: inline-block;
1441 .validate-rename-tag {
1442 color: var(--main-color);
1447 .picwall-container {
1449 margin: 0 10px 10px;
1450 background-color: $almost-white;
1454 .picwall-pictureframe {
1455 display: table-cell;
1460 background-color: $almost-white;
1464 vertical-align: middle;
1467 // Adapt the width of the image
1475 text-decoration: none;
1481 font-family: Arial, sans-serif;
1485 // CSS to show title when hovering an image - no javascript required.
1493 background-color: $dark-shadow;
1497 color: $almost-white;
1506 transition: opacity 500ms ease-in-out;
1508 -webkit-transition: opacity 500ms ease-in-out;
1509 -moz-transition: opacity 500ms ease-in-out;
1510 -o-transition: opacity 500ms ease-in-out;
1525 text-decoration: none;
1540 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
1551 .daily-entry-title {
1555 text-decoration: none;
1562 background: linear-gradient(to right, $white, $light-grey, $white);
1569 .daily-entry-description {
1571 text-align: justify;
1573 word-wrap: break-word;
1582 .daily-entry-thumbnail {
1584 margin: 15px 5px 5px 15px;
1587 .daily-entry-description {
1589 text-decoration: none;
1590 color: var(--main-color);
1593 text-shadow: 1px 1px $background-linklist-info;
1597 color: var(--dark-main-color);
1602 // Fix empty bookmarklet name in Firefox
1604 -moz-user-select: auto;
1612 background: $almost-white;
1613 display: inline-block;
1615 text-decoration: none;
1623 margin: 0 !important;
1627 margin: .5em 0 0 !important;
1632 margin-top: 0 !important;
1636 margin-bottom: 5px !important;
1642 .pure-button-success,
1644 .pure-button-warning,
1645 .pure-button-primary,
1646 .pure-button-shaarli,
1647 .pure-button-secondary {
1649 text-shadow: 0 1px 1px $dark-shadow;
1650 color: $white !important;
1653 .pure-button-shaarli {
1654 background-color: var(--main-color);
1659 background-color: var(--main-color);
1663 border-radius: 10px;
1665 repeating-linear-gradient(
1669 var(--background-color) 6px,
1670 var(--background-color) 12px
1677 .thumbnails-page-container {
1679 padding: 10px 0 20px;
1682 .thumbnail-placeholder {
1684 background-color: $light-grey;
1687 .thumbnail-link-title {
1688 padding-bottom: 20px;
1690 text-overflow: ellipsis;
1691 white-space: nowrap;
1703 .linklist-item-infos-controls-group,