diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index a137ccd5..a6468e01 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -4,31 +4,28 @@
// a bit of a hack to allow scrolling below notifications
padding-bottom: 15em;
- .unseen-count {
- display: inline-block;
- background-color: $fallback--cRed;
- background-color: var(--cRed, $fallback--cRed);
- text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
- border-radius: 99px;
- min-width: 22px;
- max-width: 22px;
- min-height: 22px;
- max-height: 22px;
- color: white;
- font-size: 15px;
- line-height: 22px;
- text-align: center;
- vertical-align: middle
- }
-
.loadmore-error {
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
}
- .unseen {
- box-shadow: inset 4px 0 0 var(--cRed, $fallback--cRed);
- padding-left: 0;
+ .notification {
+ position: relative;
+
+ .notification-overlay {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ pointer-events: none;
+ }
+
+ &.unseen {
+ .notification-overlay {
+ background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
+ }
+ }
}
}
@@ -42,21 +39,27 @@
.broken-favorite {
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
- color: $fallback--faint;
- color: var(--faint, $fallback--faint);
- background-color: $fallback--cAlertRed;
- background-color: var(--cAlertRed, $fallback--cAlertRed);
+ color: $fallback--text;
+ color: var(--alertErrorText, $fallback--text);
+ background-color: $fallback--alertError;
+ background-color: var(--alertError, $fallback--alertError);
padding: 2px .5em
}
.avatar-compact {
width: 32px;
height: 32px;
+ box-shadow: var(--avatarStatusShadow);
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
overflow: hidden;
line-height: 0;
+ &.better-shadow {
+ box-shadow: var(--avatarStatusShadowInset);
+ filter: var(--avatarStatusShadowFilter)
+ }
+
&.animated::before {
display: none;
}
@@ -90,6 +93,9 @@
padding: 0.25em 0;
color: $fallback--faint;
color: var(--faint, $fallback--faint);
+ a {
+ color: var(--faintLink);
+ }
}
padding: 0;
.media-body {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 7a4322f9..64f18720 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -4,7 +4,7 @@
{{$t('notifications.notifications')}}
- {{unseenCount}}
+ {{unseenCount}}
{{$t('timeline.error_fetching')}}
@@ -13,6 +13,7 @@
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
new file mode 100644
index 00000000..3926915b
--- /dev/null
+++ b/src/components/opacity_input/opacity_input.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index e4c46b9a..fcf5c873 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -153,8 +153,8 @@
padding-bottom: 0;
margin-left: $fallback--attachmentRadius;
margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
- background-color: $fallback--btn;
- background-color: var(--btn, $fallback--btn);
+ background-color: $fallback--fg;
+ background-color: var(--btn, $fallback--fg);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@@ -258,11 +258,13 @@
position: absolute;
z-index: 1;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+ // this doesn't match original but i don't care, making it uniform.
+ box-shadow: var(--popupShadow);
min-width: 75%;
background: $fallback--bg;
background: var(--bg, $fallback--bg);
- color: $fallback--lightFg;
- color: var(--lightFg, $fallback--lightFg);
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
}
.autocomplete {
@@ -291,8 +293,8 @@
}
&.highlighted {
- background-color: $fallback--btn;
- background-color: var(--btn, $fallback--btn);
+ background-color: $fallback--fg;
+ background-color: var(--lightBg, $fallback--fg);
}
}
}
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
new file mode 100644
index 00000000..3e50664b
--- /dev/null
+++ b/src/components/range_input/range_input.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index d11140c6..dec33505 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -18,6 +18,7 @@
@@ -218,7 +220,7 @@
@import '../../_variables.scss';
.setting-item {
- border-bottom: 2px solid var(--btn, $fallback--btn);
+ border-bottom: 2px solid var(--fg, $fallback--fg);
margin: 1em 1em 1.4em;
padding-bottom: 1.4em;
@@ -267,12 +269,8 @@
.btn {
min-height: 28px;
- }
-
- .submit {
- margin-top: 1em;
- min-height: 30px;
- width: 10em;
+ min-width: 10em;
+ padding: 0 2em;
}
}
.select-multiple {
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
new file mode 100644
index 00000000..44e4a22f
--- /dev/null
+++ b/src/components/shadow_control/shadow_control.js
@@ -0,0 +1,87 @@
+import ColorInput from '../color_input/color_input.vue'
+import OpacityInput from '../opacity_input/opacity_input.vue'
+import { getCssShadow } from '../../services/style_setter/style_setter.js'
+import { hex2rgb } from '../../services/color_convert/color_convert.js'
+
+export default {
+ // 'Value' and 'Fallback' can be undefined, but if they are
+ // initially vue won't detect it when they become something else
+ // therefore i'm using "ready" which should be passed as true when
+ // data becomes available
+ props: [
+ 'value', 'fallback', 'ready'
+ ],
+ data () {
+ return {
+ selectedId: 0,
+ // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
+ cValue: this.value || this.fallback || []
+ }
+ },
+ components: {
+ ColorInput,
+ OpacityInput
+ },
+ methods: {
+ add () {
+ this.cValue.push(Object.assign({}, this.selected))
+ this.selectedId = this.cValue.length - 1
+ },
+ del () {
+ this.cValue.splice(this.selectedId, 1)
+ this.selectedId = this.cValue.length === 0 ? undefined : this.selectedId - 1
+ },
+ moveUp () {
+ const movable = this.cValue.splice(this.selectedId, 1)[0]
+ this.cValue.splice(this.selectedId - 1, 0, movable)
+ this.selectedId -= 1
+ },
+ moveDn () {
+ const movable = this.cValue.splice(this.selectedId, 1)[0]
+ this.cValue.splice(this.selectedId + 1, 0, movable)
+ this.selectedId += 1
+ }
+ },
+ beforeUpdate () {
+ this.cValue = this.value || this.fallback
+ },
+ computed: {
+ selected () {
+ if (this.ready && this.cValue.length > 0) {
+ return this.cValue[this.selectedId]
+ } else {
+ return {
+ x: 0,
+ y: 0,
+ blur: 0,
+ spread: 0,
+ inset: false,
+ color: '#000000',
+ alpha: 1
+ }
+ }
+ },
+ moveUpValid () {
+ return this.ready && this.selectedId > 0
+ },
+ moveDnValid () {
+ return this.ready && this.selectedId < this.cValue.length - 1
+ },
+ present () {
+ return this.ready &&
+ typeof this.cValue[this.selectedId] !== 'undefined' &&
+ !this.usingFallback
+ },
+ usingFallback () {
+ return typeof this.value === 'undefined'
+ },
+ rgb () {
+ return hex2rgb(this.selected.color)
+ },
+ style () {
+ return this.ready ? {
+ boxShadow: getCssShadow(this.cValue)
+ } : {}
+ }
+ }
+}
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
new file mode 100644
index 00000000..744925d4
--- /dev/null
+++ b/src/components/shadow_control/shadow_control.vue
@@ -0,0 +1,243 @@
+
+
+
+
+
+
+
diff --git a/src/components/status/status.js b/src/components/status/status.js
index ad6f4184..cb125e45 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -33,7 +33,8 @@ const Status = {
showingTall: false,
expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
? !this.$store.state.instance.collapseMessageWithSubject
- : !this.$store.state.config.collapseMessageWithSubject
+ : !this.$store.state.config.collapseMessageWithSubject,
+ betterShadow: this.$store.state.interface.browserSupport.cssFilter
}
},
computed: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 984884ff..c28c9473 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -9,7 +9,7 @@