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;
159 transition: max-height .5s;
161 background: $main-green;
163 // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919
166 -webkit-font-smoothing: antialiased;
169 transition: max-height .75s;
175 // Chrome bugfix: with 100% height, it only displays the first element.
197 color: $almost-white;
201 background: transparent;
214 @extend %menu-link-hover;
218 .pure-menu-selected {
228 @extend %menu-link-hover;
246 border-radius: 100px;
247 background-color: $light-green;
250 transition-duration: .5s;
253 transform: translateY(-6px);
259 transform: rotate(45deg);
262 transform: rotate(-45deg);
268 @media screen and (max-width: 64em) {
283 @media screen and (min-width: 64em) {
296 border: medium none currentColor;
298 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
299 background: $almost-white;
305 &::-webkit-input-placeholder {
314 background-color: $main-green;
315 padding: 4px 8px 6px;
316 color: $almost-white;
320 @media screen and (max-width: 64em) {
333 @media screen and (max-width: 64em) {
350 color: $background-color;
360 @media screen and (max-width: 64em) {
367 %subheader-form-input {
368 border: medium none currentColor;
370 box-shadow: 0 1px 0 $light-shadow, 0 1px 4px $dark-shadow inset;
371 background: $almost-white;
372 padding: 5px 5px 3px 15px;
383 background: $main-green;
392 @extend %subheader-form-input;
394 &::-webkit-input-placeholder {
401 display: inline-block;
403 border: 1px solid $almost-white;
405 background: $main-green;
409 color: $almost-white;
412 background: $almost-white;
418 @extend %subheader-form-input;
420 display: inline-block;
422 padding: 5px 20px 3px;
433 border: 2px solid $almost-white;
436 text-decoration: none;
437 color: $almost-white;
450 &::-webkit-input-placeholder {
457 @media screen and (min-width: 64em) {
469 .new-version-message {
473 color: $warning-text;
485 // Plugins additional forms
492 border: medium none currentColor;
494 box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
495 background: $almost-white;
501 &::-webkit-input-placeholder {
507 border: medium none currentColor;
509 background: $almost-white;
521 @media screen and (max-width: 64em) {
531 // CONTENT - LINKLIST PAGING
540 text-decoration: none;
544 background: $almost-white;
549 background: $main-green;
555 color: $almost-white;
565 text-decoration: none;
574 %linksperpage-button {
575 display: inline-block;
591 @extend %linksperpage-button;
593 background: $almost-white;
595 text-decoration: none;
601 @extend %linksperpage-button;
604 border: medium none currentColor;
605 background: $almost-white;
606 padding: 4px 5px 3px 8px;
614 // CONTENT - LINKLIST ITEMS
629 box-shadow: 1px 1px 3px $light-grey;
630 background: $almost-white;
633 .linklist-item-title {
635 @extend %private-border;
640 .linklist-item-description {
642 @extend %private-border;
649 .linklist-item-buttons {
652 background: transparent;
656 .linklist-item-buttons-right {
661 .linklist-item-buttons * {
669 .linklist-item-title {
672 background: $almost-white;
673 word-wrap: break-word;
679 word-wrap: break-word;
682 vertical-align: middle;
683 text-decoration: none;
709 border: solid 1px $orange;
711 font-family: Arial, sans-serif;
721 .linklist-item-editbuttons {
746 color: $red !important;
750 .linklist-item-description {
755 word-wrap: break-word;
758 text-decoration: none;
771 .linklist-item-thumbnail {
780 .linklist-item-infos {
781 background: $background-linklist-info;
786 text-decoration: none;
794 .linklist-item-tags {
806 .linklist-plugin-icon {
807 display: inline-block;
814 .linklist-item-infos-dateblock {
818 .linklist-plugin-icon {
823 .linklist-item-infos-url {
827 text-overflow: ellipsis;
833 .linklist-item-infos-controls-group {
834 display: inline-block;
835 border-right: 1px solid $light-grey;
844 @media screen and (max-width: 64em) {
845 .linklist-item-infos-url {
860 background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
874 border: solid 1px $form-input-border;
876 background: $form-input-background;
877 padding: 5px 5px 3px 15px;
881 box-sizing: border-box;
885 display: inline-block;
888 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;
889 background: $main-green;
892 vertical-align: center;
893 text-decoration: none;
895 color: $almost-white;
902 box-shadow: 1px 1px 2px $light-grey;
903 background: $almost-white;
909 background: $almost-white;
921 text-decoration: none;
926 @extend %page-form-button;
937 @extend %page-form-input;
939 &::-webkit-input-placeholder {
945 @extend %page-form-input;
947 &::-webkit-input-placeholder {
953 @extend %page-form-button;
958 @extend %page-form-input;
960 padding: 15px 5px 3px 15px;
964 word-wrap: break-word;
990 border-color: $light-grey;
1003 text-decoration: none;
1025 @media screen and (min-width: 64em) {
1040 @media screen and (max-width: 64em) {
1051 // PAGE FORM - LIGHT
1059 // PAGE FORM - COMPLETE
1063 transform: translateY(-50%);
1066 .page-form-complete {
1080 @extend %page-form-valign;
1098 @extend %page-form-valign;
1101 &[type='password'] {
1108 @extend %page-form-valign;
1118 @extend %page-form-valign;
1138 &[name='linkform'] {
1145 @media screen and (max-width: 64em) {
1146 %page-form-valign-mobile {
1149 transform: translateY(0);
1152 .page-form-complete {
1157 @extend %page-form-valign-mobile;
1169 @extend %page-form-valign-mobile;
1171 &[type='checkbox'] {
1175 transform: translateY(-50%);
1181 @extend %page-form-valign-mobile;
1190 .timezone-continent {
1198 // Page visitor (page form extended)
1203 .page404-container {
1208 .edit-link-container {
1210 margin-bottom: 10px;
1216 .login-form-container {
1225 text-decoration: none;
1230 border-color: $white;
1234 border-left: $white 1px solid;
1240 border: 1px solid $white;
1250 background-color: $main-green;
1251 background-image: none;
1252 color: $almost-white;
1258 .pluginform-container {
1268 @media screen and (max-width: 64em) {
1269 .pluginform-container {
1271 border-top-style: none;
1272 border-bottom-style: none;
1275 border-top-style: none;
1276 border-bottom-style: none;
1283 .import-field-container {
1288 .cloudtag-container {
1291 text-decoration: none;
1295 text-decoration: none;
1305 .taglist-container {
1309 text-decoration: none;
1314 display: inline-block;
1333 .validate-rename-tag {
1339 .picwall-container {
1341 margin: 0 10px 10px;
1342 background-color: $almost-white;
1346 .picwall-pictureframe {
1347 display: table-cell;
1352 background-color: $almost-white;
1356 vertical-align: middle;
1359 // Adapt the width of the image
1367 text-decoration: none;
1373 font-family: Arial, sans-serif;
1377 // CSS to show title when hovering an image - no javascript required.
1385 background-color: $dark-shadow;
1389 color: $almost-white;
1398 transition: opacity 500ms ease-in-out;
1400 -webkit-transition: opacity 500ms ease-in-out;
1401 -moz-transition: opacity 500ms ease-in-out;
1402 -o-transition: opacity 500ms ease-in-out;
1415 text-decoration: none;
1430 background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
1441 .daily-entry-title {
1445 text-decoration: none;
1452 background: linear-gradient(to right, $white, $light-grey, $white);
1459 .daily-entry-description {
1461 text-align: justify;
1463 word-wrap: break-word;
1472 .daily-entry-thumbnail {
1474 margin: 15px 5px 5px 15px;
1477 .daily-entry-description {
1479 text-decoration: none;
1483 text-shadow: 1px 1px $background-linklist-info;
1492 // Fix empty bookmarklet name in Firefox
1494 -moz-user-select: auto;
1502 display: inline-block;
1504 text-decoration: none;
1513 margin: 0 !important;
1517 margin: .5em 0 0 !important;
1522 margin-top: 0 !important;
1526 margin-bottom: 5px !important;
1532 .pure-button-success,
1534 .pure-button-warning,
1535 .pure-button-primary,
1536 .pure-button-shaarli,
1537 .pure-button-secondary {
1539 text-shadow: 0 1px 1px $dark-shadow;
1540 color: $white !important;
1543 .pure-button-shaarli {
1544 background-color: $main-green;