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;
30 background: $background-color;
47 display: inline-block;
48 border-radius: .25rem;
50 vertical-align: baseline;
63 font-family: 'Roboto';
67 local('Roboto-Regular'),
68 url('../fonts/Roboto-Regular.woff2') format('woff2'),
69 url('../fonts/Roboto-Regular.woff') format('woff');
73 font-family: 'Roboto';
78 url('../fonts/Roboto-Bold.woff2') format('woff2'),
79 url('../fonts/Roboto-Bold.woff') format('woff');
83 .pure-g [class*='pure-u'] {
84 font-family: Roboto, Arial, sans-serif;
87 // Extends Pure grids responsive to hide items.
88 // Use xx-0 to hide an item on xx screen.
89 // Display it at any level with xx-visible.
91 display: none !important;
94 @media screen and (min-width: 35.5em) {
96 display: none !important;
100 display: inline-block !important;
104 @media screen and (min-width: 48em) {
106 display: none !important;
110 display: inline-block !important;
114 @media screen and (min-width: 64em) {
116 display: none !important;
120 display: inline-block !important;
124 @media screen and (min-width: 80em) {
126 display: none !important;
130 display: inline-block !important;
134 // Make pure-extras alert closable.
135 .pure-alert-closable {
145 .pure-alert-success {
146 background-color: $main-green;
149 .pure-alert-warning {
151 color: $warning-text;
170 transition: max-height .5s;
172 background: $main-green;
174 // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919
177 -webkit-font-smoothing: antialiased;
180 transition: max-height .75s;
186 // Chrome bugfix: with 100% height, it only displays the first element.
208 color: $almost-white;
212 background: transparent;
225 @extend %menu-link-hover;
229 .pure-menu-selected {
239 @extend %menu-link-hover;
257 border-radius: 100px;
258 background-color: $light-green;
261 transition-duration: .5s;
264 transform: translateY(-6px);
270 transform: rotate(45deg);
273 transform: rotate(-45deg);
279 @media screen and (max-width: 64em) {
294 @media screen and (min-width: 64em) {
307 border: medium none currentColor;
309 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
310 background: $almost-white;
316 &::-webkit-input-placeholder {
325 background-color: $main-green;
326 padding: 4px 8px 6px;
327 color: $almost-white;
331 @media screen and (max-width: 64em) {
344 @media screen and (max-width: 64em) {
361 color: $background-color;
371 @media screen and (max-width: 64em) {
378 %subheader-form-input {
379 border: medium none currentColor;
381 box-shadow: 0 1px 0 $light-shadow, 0 1px 4px $dark-shadow inset;
382 background: $almost-white;
383 padding: 5px 5px 3px 15px;
392 background: $main-green;
401 @extend %subheader-form-input;
403 &::-webkit-input-placeholder {
410 display: inline-block;
412 border: 1px solid $almost-white;
414 background: $main-green;
418 color: $almost-white;
421 background: $almost-white;
427 @extend %subheader-form-input;
429 display: inline-block;
431 padding: 5px 20px 3px;
442 border: 2px solid $almost-white;
445 text-decoration: none;
446 color: $almost-white;
459 &::-webkit-input-placeholder {
466 @media screen and (min-width: 64em) {
478 .new-version-message {
482 color: $warning-text;
494 // Plugins additional forms
501 border: medium none currentColor;
503 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
504 background: $almost-white;
510 &::-webkit-input-placeholder {
516 border: medium none currentColor;
518 background: $almost-white;
530 @media screen and (max-width: 64em) {
540 // CONTENT - LINKLIST PAGING
549 display: inline-block;
552 text-decoration: none;
556 background: $almost-white;
561 background: $main-green;
567 color: $almost-white;
577 text-decoration: none;
586 %linksperpage-button {
587 display: inline-block;
603 @extend %linksperpage-button;
605 background: $almost-white;
607 text-decoration: none;
613 @extend %linksperpage-button;
616 border: medium none currentColor;
617 background: $almost-white;
618 padding: 4px 5px 3px 8px;
626 // CONTENT - LINKLIST ITEMS
642 box-shadow: 1px 1px 3px $light-grey;
643 background: $almost-white;
660 .linklist-item-buttons {
663 background: transparent;
667 .linklist-item-buttons-right {
672 .linklist-item-buttons * {
680 .linklist-item-title {
683 background: $almost-white;
684 word-wrap: break-word;
690 word-wrap: break-word;
693 vertical-align: middle;
694 text-decoration: none;
720 font-family: Arial, sans-serif;
725 border: solid 1px $orange;
730 border: solid 1px $blue;
740 .linklist-item-editbuttons {
765 color: $red !important;
774 color: $blue !important;
777 .linklist-item-description {
782 word-wrap: break-word;
785 text-decoration: none;
798 .linklist-item-thumbnail {
807 .linklist-item-infos {
808 background: $background-linklist-info;
813 text-decoration: none;
821 .linklist-item-tags {
833 .linklist-plugin-icon {
834 display: inline-block;
841 .linklist-item-infos-dateblock {
845 .linklist-plugin-icon {
850 .linklist-item-infos-url {
854 text-overflow: ellipsis;
860 .linklist-item-infos-controls-group {
861 display: inline-block;
862 border-right: 1px solid $light-grey;
875 @media screen and (max-width: 64em) {
876 .linklist-item-infos-url {
891 background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
905 border: solid 1px $form-input-border;
907 background: $form-input-background;
908 padding: 5px 5px 3px 15px;
912 box-sizing: border-box;
916 display: inline-block;
919 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;
920 background: $main-green;
923 vertical-align: center;
924 text-decoration: none;
926 color: $almost-white;
933 box-shadow: 1px 1px 2px $light-grey;
934 background: $almost-white;
940 background: $almost-white;
952 text-decoration: none;
957 @extend %page-form-button;
968 @extend %page-form-input;
970 &::-webkit-input-placeholder {
976 @extend %page-form-input;
978 &::-webkit-input-placeholder {
984 @extend %page-form-button;
989 @extend %page-form-input;
991 padding: 15px 5px 3px 15px;
995 word-wrap: break-word;
1009 margin-bottom: 10px;
1013 margin: 10px 0 25px;
1019 border-width: 1px 0;
1020 border-style: solid;
1021 border-color: $light-grey;
1034 text-decoration: none;
1056 @media screen and (min-width: 64em) {
1071 @media screen and (max-width: 64em) {
1082 // PAGE FORM - LIGHT
1090 // PAGE FORM - COMPLETE
1094 transform: translateY(-50%);
1097 .page-form-complete {
1111 @extend %page-form-valign;
1129 @extend %page-form-valign;
1132 &[type='password'] {
1139 @extend %page-form-valign;
1149 @extend %page-form-valign;
1169 &[name='linkform'] {
1176 @media screen and (max-width: 64em) {
1177 %page-form-valign-mobile {
1180 transform: translateY(0);
1183 .page-form-complete {
1188 @extend %page-form-valign-mobile;
1200 @extend %page-form-valign-mobile;
1202 &[type='checkbox'] {
1206 transform: translateY(-50%);
1212 @extend %page-form-valign-mobile;
1221 .timezone-continent {
1229 // Page visitor (page form extended)
1234 .page404-container {
1239 .edit-link-container {
1241 margin-bottom: 10px;
1247 .login-form-container {
1256 text-decoration: none;
1261 border-color: $white;
1265 border-left: $white 1px solid;
1271 border: 1px solid $white;
1281 background-color: $main-green;
1282 background-image: none;
1283 color: $almost-white;
1289 .pluginform-container {
1299 @media screen and (max-width: 64em) {
1300 .pluginform-container {
1302 border-top-style: none;
1303 border-bottom-style: none;
1306 border-top-style: none;
1307 border-bottom-style: none;
1314 .import-field-container {
1319 .cloudtag-container {
1322 text-decoration: none;
1326 text-decoration: none;
1336 .taglist-container {
1340 text-decoration: none;
1345 display: inline-block;
1364 .validate-rename-tag {
1370 .picwall-container {
1372 margin: 0 10px 10px;
1373 background-color: $almost-white;
1377 .picwall-pictureframe {
1378 display: table-cell;
1383 background-color: $almost-white;
1387 vertical-align: middle;
1390 // Adapt the width of the image
1398 text-decoration: none;
1404 font-family: Arial, sans-serif;
1408 // CSS to show title when hovering an image - no javascript required.
1416 background-color: $dark-shadow;
1420 color: $almost-white;
1429 transition: opacity 500ms ease-in-out;
1431 -webkit-transition: opacity 500ms ease-in-out;
1432 -moz-transition: opacity 500ms ease-in-out;
1433 -o-transition: opacity 500ms ease-in-out;
1446 text-decoration: none;
1461 background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
1472 .daily-entry-title {
1476 text-decoration: none;
1483 background: linear-gradient(to right, $white, $light-grey, $white);
1490 .daily-entry-description {
1492 text-align: justify;
1494 word-wrap: break-word;
1503 .daily-entry-thumbnail {
1505 margin: 15px 5px 5px 15px;
1508 .daily-entry-description {
1510 text-decoration: none;
1514 text-shadow: 1px 1px $background-linklist-info;
1523 // Fix empty bookmarklet name in Firefox
1525 -moz-user-select: auto;
1533 display: inline-block;
1535 text-decoration: none;
1544 margin: 0 !important;
1548 margin: .5em 0 0 !important;
1553 margin-top: 0 !important;
1557 margin-bottom: 5px !important;
1563 .pure-button-success,
1565 .pure-button-warning,
1566 .pure-button-primary,
1567 .pure-button-shaarli,
1568 .pure-button-secondary {
1570 text-shadow: 0 1px 1px $dark-shadow;
1571 color: $white !important;
1574 .pure-button-shaarli {
1575 background-color: $main-green;
1580 background-color: $main-green;
1584 border-radius: 10px;
1585 background: repeating-linear-gradient(
1589 $background-color 6px,
1590 $background-color 12px
1597 .thumbnails-page-container {
1599 padding: 10px 0 20px;
1602 .thumbnail-placeholder {
1604 background-color: $light-grey;
1607 .thumbnail-link-title {
1608 padding-bottom: 20px;
1610 text-overflow: ellipsis;
1611 white-space: nowrap;
1623 .linklist-item-infos-controls-group,