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;
1273 .login-form-container {
1282 text-decoration: none;
1287 border-color: $white;
1291 border-left: $white 1px solid;
1297 border: 1px solid $white;
1307 background-color: var(--main-color);
1308 background-image: none;
1309 color: $almost-white;
1315 .pluginform-container {
1325 @media screen and (max-width: 64em) {
1326 .pluginform-container {
1328 border-top-style: none;
1329 border-bottom-style: none;
1332 border-top-style: none;
1333 border-bottom-style: none;
1340 .import-field-container {
1345 .cloudtag-container {
1348 text-decoration: none;
1352 text-decoration: none;
1362 .taglist-container {
1366 text-decoration: none;
1371 display: inline-block;
1390 .validate-rename-tag {
1391 color: var(--main-color);
1396 .picwall-container {
1398 margin: 0 10px 10px;
1399 background-color: $almost-white;
1403 .picwall-pictureframe {
1404 display: table-cell;
1409 background-color: $almost-white;
1413 vertical-align: middle;
1416 // Adapt the width of the image
1424 text-decoration: none;
1430 font-family: Arial, sans-serif;
1434 // CSS to show title when hovering an image - no javascript required.
1442 background-color: $dark-shadow;
1446 color: $almost-white;
1455 transition: opacity 500ms ease-in-out;
1457 -webkit-transition: opacity 500ms ease-in-out;
1458 -moz-transition: opacity 500ms ease-in-out;
1459 -o-transition: opacity 500ms ease-in-out;
1474 text-decoration: none;
1489 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
1500 .daily-entry-title {
1504 text-decoration: none;
1511 background: linear-gradient(to right, $white, $light-grey, $white);
1518 .daily-entry-description {
1520 text-align: justify;
1522 word-wrap: break-word;
1531 .daily-entry-thumbnail {
1533 margin: 15px 5px 5px 15px;
1536 .daily-entry-description {
1538 text-decoration: none;
1539 color: var(--main-color);
1542 text-shadow: 1px 1px $background-linklist-info;
1546 color: var(--dark-main-color);
1551 // Fix empty bookmarklet name in Firefox
1553 -moz-user-select: auto;
1561 background: $almost-white;
1562 display: inline-block;
1564 text-decoration: none;
1572 margin: 0 !important;
1576 margin: .5em 0 0 !important;
1581 margin-top: 0 !important;
1585 margin-bottom: 5px !important;
1591 .pure-button-success,
1593 .pure-button-warning,
1594 .pure-button-primary,
1595 .pure-button-shaarli,
1596 .pure-button-secondary {
1598 text-shadow: 0 1px 1px $dark-shadow;
1599 color: $white !important;
1602 .pure-button-shaarli {
1603 background-color: var(--main-color);
1608 background-color: var(--main-color);
1612 border-radius: 10px;
1614 repeating-linear-gradient(
1618 var(--background-color) 6px,
1619 var(--background-color) 12px
1626 .thumbnails-page-container {
1628 padding: 10px 0 20px;
1631 .thumbnail-placeholder {
1633 background-color: $light-grey;
1636 .thumbnail-link-title {
1637 padding-bottom: 20px;
1639 text-overflow: ellipsis;
1640 white-space: nowrap;
1652 .linklist-item-infos-controls-group,