1 $fa-font-path: '~font-awesome/fonts';
3 @import '~font-awesome/scss/font-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;
163 transition: max-height .5s;
165 background: $main-green;
167 // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919
170 -webkit-font-smoothing: antialiased;
173 transition: max-height .75s;
179 // Chrome bugfix: with 100% height, it only displays the first element.
201 color: $almost-white;
205 background: transparent;
218 @extend %menu-link-hover;
222 .pure-menu-selected {
232 @extend %menu-link-hover;
250 border-radius: 100px;
251 background-color: $light-green;
254 transition-duration: .5s;
257 transform: translateY(-6px);
263 transform: rotate(45deg);
266 transform: rotate(-45deg);
272 @media screen and (max-width: 64em) {
287 @media screen and (min-width: 64em) {
300 border: medium none currentColor;
302 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
303 background: $almost-white;
309 &::-webkit-input-placeholder {
318 background-color: $main-green;
319 padding: 4px 8px 6px;
320 color: $almost-white;
324 @media screen and (max-width: 64em) {
337 @media screen and (max-width: 64em) {
354 color: $background-color;
364 @media screen and (max-width: 64em) {
371 %subheader-form-input {
372 border: medium none currentColor;
374 box-shadow: 0 1px 0 $light-shadow, 0 1px 4px $dark-shadow inset;
375 background: $almost-white;
376 padding: 5px 5px 3px 15px;
387 background: $main-green;
396 @extend %subheader-form-input;
398 &::-webkit-input-placeholder {
405 display: inline-block;
407 border: 1px solid $almost-white;
409 background: $main-green;
413 color: $almost-white;
416 background: $almost-white;
422 @extend %subheader-form-input;
424 display: inline-block;
426 padding: 5px 20px 3px;
437 border: 2px solid $almost-white;
440 text-decoration: none;
441 color: $almost-white;
454 &::-webkit-input-placeholder {
461 @media screen and (min-width: 64em) {
473 .new-version-message {
477 color: $warning-text;
489 // Plugins additional forms
496 border: medium none currentColor;
498 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
499 background: $almost-white;
505 &::-webkit-input-placeholder {
511 border: medium none currentColor;
513 background: $almost-white;
525 @media screen and (max-width: 64em) {
535 // CONTENT - LINKLIST PAGING
544 text-decoration: none;
548 background: $almost-white;
553 background: $main-green;
559 color: $almost-white;
569 text-decoration: none;
578 %linksperpage-button {
579 display: inline-block;
595 @extend %linksperpage-button;
597 background: $almost-white;
599 text-decoration: none;
605 @extend %linksperpage-button;
608 border: medium none currentColor;
609 background: $almost-white;
610 padding: 4px 5px 3px 8px;
618 // CONTENT - LINKLIST ITEMS
633 box-shadow: 1px 1px 3px $light-grey;
634 background: $almost-white;
637 .linklist-item-title {
639 @extend %private-border;
644 .linklist-item-description {
646 @extend %private-border;
653 .linklist-item-buttons {
656 background: transparent;
660 .linklist-item-buttons-right {
665 .linklist-item-buttons * {
673 .linklist-item-title {
676 background: $almost-white;
677 word-wrap: break-word;
683 word-wrap: break-word;
686 vertical-align: middle;
687 text-decoration: none;
713 border: solid 1px $orange;
715 font-family: Arial, sans-serif;
725 .linklist-item-editbuttons {
750 color: $red !important;
754 .linklist-item-description {
759 word-wrap: break-word;
762 text-decoration: none;
775 .linklist-item-thumbnail {
784 .linklist-item-infos {
785 background: $background-linklist-info;
790 text-decoration: none;
798 .linklist-item-tags {
810 .linklist-plugin-icon {
811 display: inline-block;
818 .linklist-item-infos-dateblock {
822 .linklist-plugin-icon {
827 .linklist-item-infos-url {
831 text-overflow: ellipsis;
837 .linklist-item-infos-controls-group {
838 display: inline-block;
839 border-right: 1px solid $light-grey;
848 @media screen and (max-width: 64em) {
849 .linklist-item-infos-url {
864 background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
878 border: solid 1px $form-input-border;
880 background: $form-input-background;
881 padding: 5px 5px 3px 15px;
885 box-sizing: border-box;
889 display: inline-block;
892 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;
893 background: $main-green;
896 vertical-align: center;
897 text-decoration: none;
899 color: $almost-white;
906 box-shadow: 1px 1px 2px $light-grey;
907 background: $almost-white;
913 background: $almost-white;
925 text-decoration: none;
930 @extend %page-form-button;
941 @extend %page-form-input;
943 &::-webkit-input-placeholder {
949 @extend %page-form-input;
951 &::-webkit-input-placeholder {
957 @extend %page-form-button;
962 @extend %page-form-input;
964 padding: 15px 5px 3px 15px;
968 word-wrap: break-word;
994 border-color: $light-grey;
1007 text-decoration: none;
1029 @media screen and (min-width: 64em) {
1044 @media screen and (max-width: 64em) {
1055 // PAGE FORM - LIGHT
1063 // PAGE FORM - COMPLETE
1067 transform: translateY(-50%);
1070 .page-form-complete {
1084 @extend %page-form-valign;
1102 @extend %page-form-valign;
1105 &[type='password'] {
1112 @extend %page-form-valign;
1122 @extend %page-form-valign;
1142 &[name='linkform'] {
1149 @media screen and (max-width: 64em) {
1150 %page-form-valign-mobile {
1153 transform: translateY(0);
1156 .page-form-complete {
1161 @extend %page-form-valign-mobile;
1173 @extend %page-form-valign-mobile;
1175 &[type='checkbox'] {
1179 transform: translateY(-50%);
1185 @extend %page-form-valign-mobile;
1194 .timezone-continent {
1202 // Page visitor (page form extended)
1207 .page404-container {
1212 .edit-link-container {
1214 margin-bottom: 10px;
1220 .login-form-container {
1229 text-decoration: none;
1234 border-color: $white;
1238 border-left: $white 1px solid;
1244 border: 1px solid $white;
1254 background-color: $main-green;
1255 background-image: none;
1256 color: $almost-white;
1262 .pluginform-container {
1272 @media screen and (max-width: 64em) {
1273 .pluginform-container {
1275 border-top-style: none;
1276 border-bottom-style: none;
1279 border-top-style: none;
1280 border-bottom-style: none;
1287 .import-field-container {
1292 .cloudtag-container {
1295 text-decoration: none;
1299 text-decoration: none;
1309 .taglist-container {
1313 text-decoration: none;
1318 display: inline-block;
1337 .validate-rename-tag {
1343 .picwall-container {
1345 margin: 0 10px 10px;
1346 background-color: $almost-white;
1350 .picwall-pictureframe {
1351 display: table-cell;
1356 background-color: $almost-white;
1360 vertical-align: middle;
1363 // Adapt the width of the image
1371 text-decoration: none;
1377 font-family: Arial, sans-serif;
1381 // CSS to show title when hovering an image - no javascript required.
1389 background-color: $dark-shadow;
1393 color: $almost-white;
1402 transition: opacity 500ms ease-in-out;
1404 -webkit-transition: opacity 500ms ease-in-out;
1405 -moz-transition: opacity 500ms ease-in-out;
1406 -o-transition: opacity 500ms ease-in-out;
1419 text-decoration: none;
1434 background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
1445 .daily-entry-title {
1449 text-decoration: none;
1456 background: linear-gradient(to right, $white, $light-grey, $white);
1463 .daily-entry-description {
1465 text-align: justify;
1467 word-wrap: break-word;
1476 .daily-entry-thumbnail {
1478 margin: 15px 5px 5px 15px;
1481 .daily-entry-description {
1483 text-decoration: none;
1487 text-shadow: 1px 1px $background-linklist-info;
1496 // Fix empty bookmarklet name in Firefox
1498 -moz-user-select: auto;
1506 display: inline-block;
1508 text-decoration: none;
1517 margin: 0 !important;
1521 margin: .5em 0 0 !important;
1526 margin-top: 0 !important;
1530 margin-bottom: 5px !important;
1536 .pure-button-success,
1538 .pure-button-warning,
1539 .pure-button-primary,
1540 .pure-button-shaarli,
1541 .pure-button-secondary {
1543 text-shadow: 0 1px 1px $dark-shadow;
1544 color: $white !important;
1547 .pure-button-shaarli {
1548 background-color: $main-green;