@@ -1045,6 +1045,16 @@ export default {
this.profile.following_count--;
}
})
+ },
+
+ momentBackground() {
+ let c = 'w-100 h-100 mt-n3 ';
+ if(this.profile.header_bg) {
+ c += this.profile.header_bg == 'default' ? 'bg-pixelfed' : 'bg-moment-' + this.profile.header_bg;
+ } else {
+ c += 'bg-pixelfed';
+ }
+ return c;
}
}
}
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index 179a956ce..2ead5cc68 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -24,3 +24,5 @@
@import '~plyr/dist/plyr.css';
@import '~vue-loading-overlay/dist/vue-loading.css';
+
+@import "moment";
diff --git a/resources/assets/sass/appdark.scss b/resources/assets/sass/appdark.scss
index a8bcbae68..34e83e884 100644
--- a/resources/assets/sass/appdark.scss
+++ b/resources/assets/sass/appdark.scss
@@ -66,3 +66,5 @@ textarea {
@import '~plyr/dist/plyr.css';
@import '~vue-loading-overlay/dist/vue-loading.css';
+
+@import "moment";
diff --git a/resources/assets/sass/moment.scss b/resources/assets/sass/moment.scss
new file mode 100644
index 000000000..0d642d1f7
--- /dev/null
+++ b/resources/assets/sass/moment.scss
@@ -0,0 +1,98 @@
+/*
+ red
+*/
+.bg-moment-passion {
+ background: #e53935;
+ background: -webkit-linear-gradient(to left, #e35d5b, #e53935);
+ background: linear-gradient(to left, #e35d5b, #e53935);
+}
+
+/*
+ teal/purple
+*/
+.bg-moment-azure {
+ background: #7F7FD5;
+ background: -webkit-linear-gradient(to left, #91EAE4, #86A8E7, #7F7FD5);
+ background: linear-gradient(to left, #91EAE4, #86A8E7, #7F7FD5);
+}
+
+/*
+ blue
+*/
+.bg-moment-reef {
+ background: #00d2ff;
+ background: -webkit-linear-gradient(to right, #3a7bd5, #00d2ff);
+ background: linear-gradient(to right, #3a7bd5, #00d2ff);
+}
+
+/*
+ lush green
+*/
+.bg-moment-lush {
+ background: #56ab2f;
+ background: -webkit-linear-gradient(to left, #a8e063, #56ab2f);
+ background: linear-gradient(to left, #a8e063, #56ab2f);
+}
+
+/*
+ neon green
+*/
+.bg-moment-neon {
+ background: #B3FFAB;
+ background: -webkit-linear-gradient(to right, #12FFF7, #B3FFAB);
+ background: linear-gradient(to right, #12FFF7, #B3FFAB);
+}
+
+/*
+ orange
+*/
+.bg-moment-flare {
+ background: #f12711;
+ background: -webkit-linear-gradient(to left, #f5af19, #f12711);
+ background: linear-gradient(to left, #f5af19, #f12711);
+}
+
+/*
+ orange/pink
+*/
+ .bg-moment-morning {
+ background: #FF5F6D;
+ background: -webkit-linear-gradient(to left, #FFC371, #FF5F6D);
+ background: linear-gradient(to left, #FFC371, #FF5F6D);
+}
+
+/*
+ pink
+*/
+.bg-moment-tranquil {
+ background: #EECDA3;
+ background: -webkit-linear-gradient(to right, #EF629F, #EECDA3);
+ background: linear-gradient(to right, #EF629F, #EECDA3);
+}
+
+/*
+ purple
+*/
+.bg-moment-mauve {
+ background: #42275a;
+ background: -webkit-linear-gradient(to left, #734b6d, #42275a);
+ background: linear-gradient(to left, #734b6d, #42275a);
+}
+
+/*
+ purple
+*/
+.bg-moment-argon {
+ background: #03001e;
+ background: -webkit-linear-gradient(to left, #fdeff9, #ec38bc, #7303c0, #03001e);
+ background: linear-gradient(to left, #fdeff9, #ec38bc, #7303c0, #03001e);
+}
+
+/*
+ dark blue
+*/
+.bg-moment-royal {
+ background: #141E30;
+ background: -webkit-linear-gradient(to left, #243B55, #141E30);
+ background: linear-gradient(to left, #243B55, #141E30);
+}
\ No newline at end of file
diff --git a/resources/views/settings/labs.blade.php b/resources/views/settings/labs.blade.php
index c7dcae813..2b8d47215 100644
--- a/resources/views/settings/labs.blade.php
+++ b/resources/views/settings/labs.blade.php
@@ -31,6 +31,124 @@
MomentUI offers an alternative layout for posts and your profile.