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';
73 local('Roboto-Regular'),
74 url('../fonts/Roboto-Regular.woff2') format('woff2'),
75 url('../fonts/Roboto-Regular.woff') format('woff');
79 font-family: 'Roboto';
84 url('../fonts/Roboto-Bold.woff2') format('woff2'),
85 url('../fonts/Roboto-Bold.woff') format('woff');
89 .pure-g [class*='pure-u'] {
90 font-family: Roboto, Arial, sans-serif;
93 // Extends Pure grids responsive to hide items.
94 // Use xx-0 to hide an item on xx screen.
95 // Display it at any level with xx-visible.
97 display: none !important;
100 @media screen and (min-width: 35.5em) {
102 display: none !important;
106 display: inline-block !important;
110 @media screen and (min-width: 48em) {
112 display: none !important;
116 display: inline-block !important;
120 @media screen and (min-width: 64em) {
122 display: none !important;
126 display: inline-block !important;
130 @media screen and (min-width: 80em) {
132 display: none !important;
136 display: inline-block !important;
140 // Make pure-extras alert closable.
141 .pure-alert-closable {
151 .pure-alert-success {
152 background-color: var(--main-color);
155 .pure-alert-warning {
157 color: $warning-text;
176 transition: max-height .5s;
178 background: var(--main-color);
180 // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919
183 -webkit-font-smoothing: antialiased;
186 transition: max-height .75s;
192 // Chrome bugfix: with 100% height, it only displays the first element.
214 color: $almost-white;
218 background: transparent;
231 @extend %menu-link-hover;
235 .pure-menu-selected {
245 @extend %menu-link-hover;
263 border-radius: 100px;
264 background-color: $light-green;
267 transition-duration: .5s;
270 transform: translateY(-6px);
276 transform: rotate(45deg);
279 transform: rotate(-45deg);
285 @media screen and (max-width: 64em) {
300 @media screen and (min-width: 64em) {
313 border: medium none currentColor;
315 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
316 background: $almost-white;
322 &::-webkit-input-placeholder {
331 background-color: var(--main-color);
332 padding: 4px 8px 6px;
333 color: $almost-white;
337 @media screen and (max-width: 64em) {
350 @media screen and (max-width: 64em) {
367 color: var(--background-color);
377 @media screen and (max-width: 64em) {
384 %subheader-form-input {
385 border: medium none currentColor;
387 box-shadow: 0 1px 0 $light-shadow, 0 1px 4px $dark-shadow inset;
388 background: $almost-white;
389 padding: 5px 5px 3px 15px;
398 background: var(--main-color);
407 @extend %subheader-form-input;
409 &::-webkit-input-placeholder {
416 display: inline-block;
418 border: 1px solid $almost-white;
420 background: var(--main-color);
424 color: $almost-white;
427 background: $almost-white;
428 color: var(--main-color);
433 @extend %subheader-form-input;
435 display: inline-block;
437 padding: 5px 20px 3px;
448 border: 2px solid $almost-white;
451 text-decoration: none;
452 color: $almost-white;
465 &::-webkit-input-placeholder {
472 @media screen and (min-width: 64em) {
484 .new-version-message {
488 color: $warning-text;
493 .header-alert-message {
504 // Plugins additional forms
511 border: medium none currentColor;
513 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
514 background: $almost-white;
520 &::-webkit-input-placeholder {
526 border: medium none currentColor;
528 background: $almost-white;
540 @media screen and (max-width: 64em) {
550 // CONTENT - LINKLIST PAGING
559 display: inline-block;
562 text-decoration: none;
566 background: $almost-white;
571 background: var(--main-color);
577 color: $almost-white;
587 text-decoration: none;
596 %linksperpage-button {
597 display: inline-block;
613 @extend %linksperpage-button;
615 background: $almost-white;
617 text-decoration: none;
621 background: var(--main-color);
628 @extend %linksperpage-button;
631 border: medium none currentColor;
632 background: $almost-white;
633 padding: 4px 5px 3px 8px;
641 // CONTENT - LINKLIST ITEMS
657 box-shadow: 1px 1px 3px $light-grey;
658 background: $almost-white;
675 .linklist-item-buttons {
678 background: transparent;
682 .linklist-item-buttons-right {
687 .linklist-item-buttons * {
695 .linklist-item-title {
698 background: $almost-white;
699 word-wrap: break-word;
705 word-wrap: break-word;
708 vertical-align: middle;
709 text-decoration: none;
715 color: var(--dark-main-color);
726 color: var(--main-color);
735 font-family: Arial, sans-serif;
740 border: solid 1px $orange;
745 border: solid 1px $blue;
755 .linklist-item-editbuttons {
780 color: $red !important;
789 color: $blue !important;
792 .linklist-item-description {
797 word-wrap: break-word;
800 text-decoration: none;
801 color: var(--main-color);
808 color: var(--dark-main-color);
813 .linklist-item-thumbnail {
822 .linklist-item-infos {
823 background: $background-linklist-info;
828 text-decoration: none;
836 .linklist-item-tags {
848 .linklist-plugin-icon {
849 display: inline-block;
856 .linklist-item-infos-dateblock {
860 .linklist-plugin-icon {
865 .linklist-item-infos-url {
869 text-overflow: ellipsis;
875 .linklist-item-infos-controls-group {
876 display: inline-block;
877 border-right: 1px solid $light-grey;
890 @media screen and (max-width: 64em) {
891 .linklist-item-infos-url {
906 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
920 border: solid 1px $form-input-border;
922 background: $form-input-background;
923 padding: 5px 5px 3px 15px;
927 box-sizing: border-box;
931 display: inline-block;
934 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;
935 background: var(--main-color);
938 vertical-align: center;
939 text-decoration: none;
941 color: $almost-white;
948 box-shadow: 1px 1px 2px $light-grey;
949 background: $almost-white;
955 background: $almost-white;
959 color: var(--main-color);
967 text-decoration: none;
968 color: var(--main-color);
972 @extend %page-form-button;
983 @extend %page-form-input;
985 &::-webkit-input-placeholder {
991 @extend %page-form-input;
993 &::-webkit-input-placeholder {
999 @extend %page-form-button;
1004 @extend %page-form-input;
1006 padding: 15px 5px 3px 15px;
1010 word-wrap: break-word;
1024 margin-bottom: 10px;
1028 margin: 10px 0 25px;
1034 border-width: 1px 0;
1035 border-style: solid;
1036 border-color: $light-grey;
1049 text-decoration: none;
1071 @media screen and (min-width: 64em) {
1086 @media screen and (max-width: 64em) {
1096 // PAGE FORM - LIGHT
1104 // PAGE FORM - COMPLETE
1108 transform: translateY(-50%);
1111 .page-form-complete {
1125 @extend %page-form-valign;
1143 @extend %page-form-valign;
1146 &[type='password'] {
1153 @extend %page-form-valign;
1163 @extend %page-form-valign;
1183 &[name='linkform'] {
1190 @media screen and (max-width: 64em) {
1191 %page-form-valign-mobile {
1194 transform: translateY(0);
1197 .page-form-complete {
1202 @extend %page-form-valign-mobile;
1214 @extend %page-form-valign-mobile;
1216 &[type='checkbox'] {
1220 transform: translateY(-50%);
1226 @extend %page-form-valign-mobile;
1235 .timezone-continent {
1243 // Page visitor (page form extended)
1248 .page-error-container {
1252 margin: 70px 0 25px;
1264 .edit-link-container {
1266 margin-bottom: 10px;
1272 .login-form-container {
1281 text-decoration: none;
1286 border-color: $white;
1290 border-left: $white 1px solid;
1296 border: 1px solid $white;
1306 background-color: var(--main-color);
1307 background-image: none;
1308 color: $almost-white;
1314 .pluginform-container {
1324 @media screen and (max-width: 64em) {
1325 .pluginform-container {
1327 border-top-style: none;
1328 border-bottom-style: none;
1331 border-top-style: none;
1332 border-bottom-style: none;
1339 .import-field-container {
1344 .cloudtag-container {
1347 text-decoration: none;
1351 text-decoration: none;
1361 .taglist-container {
1365 text-decoration: none;
1370 display: inline-block;
1389 .validate-rename-tag {
1390 color: var(--main-color);
1395 .picwall-container {
1397 margin: 0 10px 10px;
1398 background-color: $almost-white;
1402 .picwall-pictureframe {
1403 display: table-cell;
1408 background-color: $almost-white;
1412 vertical-align: middle;
1415 // Adapt the width of the image
1423 text-decoration: none;
1429 font-family: Arial, sans-serif;
1433 // CSS to show title when hovering an image - no javascript required.
1441 background-color: $dark-shadow;
1445 color: $almost-white;
1454 transition: opacity 500ms ease-in-out;
1456 -webkit-transition: opacity 500ms ease-in-out;
1457 -moz-transition: opacity 500ms ease-in-out;
1458 -o-transition: opacity 500ms ease-in-out;
1473 text-decoration: none;
1488 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
1499 .daily-entry-title {
1503 text-decoration: none;
1510 background: linear-gradient(to right, $white, $light-grey, $white);
1517 .daily-entry-description {
1519 text-align: justify;
1521 word-wrap: break-word;
1530 .daily-entry-thumbnail {
1532 margin: 15px 5px 5px 15px;
1535 .daily-entry-description {
1537 text-decoration: none;
1538 color: var(--main-color);
1541 text-shadow: 1px 1px $background-linklist-info;
1545 color: var(--dark-main-color);
1550 // Fix empty bookmarklet name in Firefox
1552 -moz-user-select: auto;
1560 display: inline-block;
1562 text-decoration: none;
1571 margin: 0 !important;
1575 margin: .5em 0 0 !important;
1580 margin-top: 0 !important;
1584 margin-bottom: 5px !important;
1590 .pure-button-success,
1592 .pure-button-warning,
1593 .pure-button-primary,
1594 .pure-button-shaarli,
1595 .pure-button-secondary {
1597 text-shadow: 0 1px 1px $dark-shadow;
1598 color: $white !important;
1601 .pure-button-shaarli {
1602 background-color: var(--main-color);
1607 background-color: var(--main-color);
1611 border-radius: 10px;
1612 background: repeating-linear-gradient(
1616 var(--background-color) 6px,
1617 var(--background-color) 12px
1624 .thumbnails-page-container {
1626 padding: 10px 0 20px;
1629 .thumbnail-placeholder {
1631 background-color: $light-grey;
1634 .thumbnail-link-title {
1635 padding-bottom: 20px;
1637 text-overflow: ellipsis;
1638 white-space: nowrap;
1650 .linklist-item-infos-controls-group,