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;
145 display: inline-block;
148 background-color: var(--background-color);
152 // Make pure-extras alert closable.
153 .pure-alert-closable {
163 .pure-alert-success {
164 background-color: var(--main-color);
167 .pure-alert-warning {
169 color: $warning-text;
188 transition: max-height .5s;
190 background: var(--main-color);
192 // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919
195 -webkit-font-smoothing: antialiased;
198 transition: max-height .75s;
204 // Chrome bugfix: with 100% height, it only displays the first element.
226 color: $almost-white;
230 background: transparent;
243 @extend %menu-link-hover;
247 .pure-menu-selected {
257 @extend %menu-link-hover;
275 border-radius: 100px;
276 background-color: $light-green;
279 transition-duration: .5s;
282 transform: translateY(-6px);
288 transform: rotate(45deg);
291 transform: rotate(-45deg);
297 @media screen and (max-width: 64em) {
312 @media screen and (min-width: 64em) {
325 border: medium none currentColor;
327 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
328 background: $almost-white;
334 &::-webkit-input-placeholder {
343 background-color: var(--main-color);
344 padding: 4px 8px 6px;
345 color: $almost-white;
349 @media screen and (max-width: 64em) {
362 @media screen and (max-width: 64em) {
379 color: var(--background-color);
389 @media screen and (max-width: 64em) {
396 %subheader-form-input {
397 border: medium none currentColor;
399 box-shadow: 0 1px 0 $light-shadow, 0 1px 4px $dark-shadow inset;
400 background: $almost-white;
401 padding: 5px 5px 3px 15px;
410 background: var(--main-color);
419 @extend %subheader-form-input;
421 &::-webkit-input-placeholder {
428 display: inline-block;
430 border: 1px solid $almost-white;
432 background: var(--main-color);
436 color: $almost-white;
439 background: $almost-white;
440 color: var(--main-color);
445 @extend %subheader-form-input;
447 display: inline-block;
449 padding: 5px 20px 3px;
460 border: 2px solid $almost-white;
463 text-decoration: none;
464 color: $almost-white;
477 &::-webkit-input-placeholder {
484 @media screen and (min-width: 64em) {
496 .new-version-message {
500 color: $warning-text;
505 .header-alert-message {
516 // Plugins additional forms
523 border: medium none currentColor;
525 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
526 background: $almost-white;
532 &::-webkit-input-placeholder {
538 border: medium none currentColor;
540 background: $almost-white;
552 @media screen and (max-width: 64em) {
562 // CONTENT - LINKLIST PAGING
570 display: inline-block;
573 text-decoration: none;
577 background: $almost-white;
582 background: var(--main-color);
588 color: $almost-white;
598 text-decoration: none;
607 %linksperpage-button {
608 display: inline-block;
624 @extend %linksperpage-button;
626 background: $almost-white;
628 text-decoration: none;
632 background: var(--main-color);
639 @extend %linksperpage-button;
642 border: medium none currentColor;
643 background: $almost-white;
644 padding: 4px 5px 3px 8px;
652 // CONTENT - LINKLIST ITEMS
668 box-shadow: 1px 1px 3px $light-grey;
669 background: $almost-white;
686 background-color: yellow;
690 .linklist-item-buttons {
693 background: transparent;
697 .linklist-item-buttons-right {
702 .linklist-item-buttons * {
710 .linklist-item-title {
713 background: $almost-white;
714 word-wrap: break-word;
720 word-wrap: break-word;
723 vertical-align: middle;
724 text-decoration: none;
730 color: var(--dark-main-color);
741 color: var(--main-color);
750 font-family: Arial, sans-serif;
755 border: solid 1px $orange;
760 border: solid 1px $blue;
770 .linklist-item-editbuttons {
795 color: $red !important;
804 color: $blue !important;
807 .linklist-item-description {
812 word-wrap: break-word;
815 text-decoration: none;
816 color: var(--main-color);
823 color: var(--dark-main-color);
828 .linklist-item-thumbnail {
837 .linklist-item-infos {
838 background: $background-linklist-info;
843 text-decoration: none;
851 .linklist-item-tags {
863 .linklist-plugin-icon {
864 display: inline-block;
871 .linklist-item-infos-dateblock {
875 .linklist-plugin-icon {
880 .linklist-item-infos-url {
884 text-overflow: ellipsis;
890 .linklist-item-infos-controls-group {
891 display: inline-block;
892 border-right: 1px solid $light-grey;
905 @media screen and (max-width: 64em) {
906 .linklist-item-infos-url {
921 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
935 border: solid 1px $form-input-border;
937 background: $form-input-background;
938 padding: 5px 5px 3px 15px;
942 box-sizing: border-box;
946 display: inline-block;
949 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;
950 background: var(--main-color);
953 vertical-align: center;
954 text-decoration: none;
956 color: $almost-white;
963 box-shadow: 1px 1px 2px $light-grey;
964 background: $almost-white;
970 background: $almost-white;
974 color: var(--main-color);
982 text-decoration: none;
983 color: var(--main-color);
987 @extend %page-form-button;
998 @extend %page-form-input;
1000 &::-webkit-input-placeholder {
1005 &[type='password'] {
1006 @extend %page-form-input;
1008 &::-webkit-input-placeholder {
1014 @extend %page-form-button;
1019 @extend %page-form-input;
1021 padding: 15px 5px 3px 15px;
1025 word-wrap: break-word;
1038 background: $light-grey;
1043 margin-bottom: 10px;
1047 margin: 10px 0 25px;
1053 border-width: 1px 0;
1054 border-style: solid;
1055 border-color: $light-grey;
1064 margin: 10px auto 25px auto;
1068 text-decoration: none;
1090 @media screen and (min-width: 64em) {
1110 @media screen and (max-width: 64em) {
1120 // PAGE FORM - LIGHT
1128 // PAGE FORM - COMPLETE
1132 transform: translateY(-50%);
1135 .page-form-complete {
1149 @extend %page-form-valign;
1167 @extend %page-form-valign;
1170 &[type='password'] {
1177 @extend %page-form-valign;
1187 @extend %page-form-valign;
1207 &[name='linkform'] {
1214 @media screen and (max-width: 64em) {
1215 %page-form-valign-mobile {
1218 transform: translateY(0);
1221 .page-form-complete {
1226 @extend %page-form-valign-mobile;
1238 @extend %page-form-valign-mobile;
1240 &[type='checkbox'] {
1244 transform: translateY(-50%);
1250 @extend %page-form-valign-mobile;
1259 .timezone-continent {
1267 // Page visitor (page form extended)
1272 .page-error-container {
1276 margin: 70px 0 25px;
1280 color: var(--main-color);
1292 .edit-link-container {
1294 margin-bottom: 10px;
1304 transform: rotate(0deg);
1308 transform: rotate(360deg);
1315 top: calc(50% - 10px);
1322 display: inline-block;
1323 animation: around 5.4s infinite;
1328 background: $form-input-background;
1330 display: inline-block;
1334 border-color: #333 #333 transparent transparent;
1335 border-style: solid;
1336 border-radius: 20px;
1337 box-sizing: border-box;
1340 animation: around 0.7s ease-in-out infinite;
1344 animation: around 0.7s ease-in-out 0.1s infinite;
1345 background: transparent;
1351 .login-form-container {
1360 text-decoration: none;
1365 border-color: $white;
1369 border-left: $white 1px solid;
1375 border: 1px solid $white;
1385 background-color: var(--main-color);
1386 background-image: none;
1387 color: $almost-white;
1393 .pluginform-container {
1403 @media screen and (max-width: 64em) {
1404 .pluginform-container {
1406 border-top-style: none;
1407 border-bottom-style: none;
1410 border-top-style: none;
1411 border-bottom-style: none;
1418 .import-field-container {
1423 .cloudtag-container {
1426 text-decoration: none;
1430 text-decoration: none;
1440 .taglist-container {
1444 text-decoration: none;
1449 display: inline-block;
1468 .validate-rename-tag {
1469 color: var(--main-color);
1474 .picwall-container {
1476 margin: 0 10px 10px;
1477 background-color: $almost-white;
1481 .picwall-pictureframe {
1482 display: table-cell;
1487 background-color: $almost-white;
1491 vertical-align: middle;
1494 // Adapt the width of the image
1502 text-decoration: none;
1508 font-family: Arial, sans-serif;
1512 // CSS to show title when hovering an image - no javascript required.
1520 background-color: $dark-shadow;
1524 color: $almost-white;
1533 transition: opacity 500ms ease-in-out;
1535 -webkit-transition: opacity 500ms ease-in-out;
1536 -moz-transition: opacity 500ms ease-in-out;
1537 -o-transition: opacity 500ms ease-in-out;
1552 text-decoration: none;
1567 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
1578 .daily-entry-title {
1582 text-decoration: none;
1589 background: linear-gradient(to right, $white, $light-grey, $white);
1596 .daily-entry-description {
1598 text-align: justify;
1600 word-wrap: break-word;
1609 .daily-entry-thumbnail {
1611 margin: 15px 5px 5px 15px;
1614 .daily-entry-description {
1616 text-decoration: none;
1617 color: var(--main-color);
1620 text-shadow: 1px 1px $background-linklist-info;
1624 color: var(--dark-main-color);
1629 // Fix empty bookmarklet name in Firefox
1631 -moz-user-select: auto;
1639 background: $almost-white;
1640 display: inline-block;
1642 text-decoration: none;
1650 margin: 0 !important;
1654 margin: .5em 0 0 !important;
1659 margin-top: 0 !important;
1663 margin-bottom: 5px !important;
1669 .pure-button-success,
1671 .pure-button-warning,
1672 .pure-button-primary,
1673 .pure-button-shaarli,
1674 .pure-button-secondary {
1676 text-shadow: 0 1px 1px $dark-shadow;
1677 color: $white !important;
1680 .pure-button-shaarli {
1681 background-color: var(--main-color);
1686 background-color: var(--main-color);
1690 border-radius: 10px;
1692 repeating-linear-gradient(
1696 var(--background-color) 6px,
1697 var(--background-color) 12px
1704 .thumbnails-page-container {
1706 padding: 10px 0 20px;
1709 .thumbnail-placeholder {
1711 background-color: $light-grey;
1714 .thumbnail-link-title {
1715 padding-bottom: 20px;
1717 text-overflow: ellipsis;
1718 white-space: nowrap;
1724 .server-tables-page,
1730 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
1763 @media screen and (max-width: 64em) {
1777 input[name='save_edit_batch'] {
1778 @extend %page-form-button;
1781 .addlink-batch-show-more {
1783 align-items: center;
1787 color: var(--main-color);
1788 text-decoration: none;
1795 background: rgba(0, 0, 0, 0.35);
1816 background-color: rgba(0, 0, 0, .75);
1821 flex-direction: column;
1822 justify-content: center;
1823 align-items: center;
1833 .addlink-batch-form-block {
1847 .linklist-item-infos-controls-group,