From 96804d42f0f6aa6af85295933af6fd267b19e473 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 7 Oct 2018 19:59:22 +0300 Subject: Some themeing is working!! --- src/components/status/status.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index eb521280..57a007d9 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -284,8 +284,8 @@ margin-left: 0.2em; } a:hover i { - color: $fallback--fg; - color: var(--fg, $fallback--fg); + color: $fallback--text; + color: var(--text, $fallback--text); } } -- cgit v1.2.3-70-g09d2 From 621ab806e63e42e0495fa174fd64f8eaeeb46b91 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 21:23:07 +0300 Subject: more default shadows, replaced original shadows with generated ones. maybe gotta update fallbacks... --- src/App.scss | 17 +++-- src/components/status/status.vue | 1 + .../user_card_content/user_card_content.vue | 1 + src/i18n/en.json | 13 ++-- src/services/style_setter/style_setter.js | 76 ++++++++++++++++++++++ 5 files changed, 98 insertions(+), 10 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/App.scss b/src/App.scss index 30020722..a41140ef 100644 --- a/src/App.scss +++ b/src/App.scss @@ -58,9 +58,10 @@ button { border-radius: $fallback--btnRadius; border-radius: var(--btnRadius, $fallback--btnRadius); cursor: pointer; - border-top: 1px solid rgba(255, 255, 255, 0.2); - border-bottom: 1px solid rgba(0, 0, 0, 0.2); + /* border-top: 1px solid rgba(255, 255, 255, 0.2); */ + /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */ box-shadow: 0px 0px 2px black; + box-shadow: var(--buttonShadow); font-size: 14px; font-family: sans-serif; @@ -75,11 +76,12 @@ button { &:hover { box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3); + box-shadow: var(--buttonHoverShadow); } &:active { - border-bottom: 1px solid rgba(255, 255, 255, 0.2); - border-top: 1px solid rgba(0, 0, 0, 0.2); + /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */ + /* border-top: 1px solid rgba(0, 0, 0, 0.2); */ } &:disabled { @@ -104,9 +106,10 @@ input, textarea, .select { border: none; border-radius: $fallback--inputRadius; border-radius: var(--inputRadius, $fallback--inputRadius); - border-bottom: 1px solid rgba(255, 255, 255, 0.2); - border-top: 1px solid rgba(0, 0, 0, 0.2); + /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */ + /* border-top: 1px solid rgba(0, 0, 0, 0.2); */ box-shadow: 0px 0px 2px black inset; + box-shadow: var(--inputShadow); background-color: $fallback--fg; background-color: var(--input, $fallback--fg); color: $fallback--lightText; @@ -184,6 +187,7 @@ input, textarea, .select { border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2px black inset; + box-shadow: var(--inputShadow); margin-right: .5em; background-color: $fallback--fg; background-color: var(--input, $fallback--fg); @@ -365,6 +369,7 @@ main-router { background-color: $fallback--fg; background-color: var(--panel, $fallback--fg); align-items: baseline; + box-shadow: var(--panelHeaderShadow); .title { flex: 1 0 auto; diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 57a007d9..c4a268d0 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -146,6 +146,7 @@ border-radius: $fallback--tooltipRadius; border-radius: var(--tooltipRadius, $fallback--tooltipRadius); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); + box-shadow: var(--popupShadow); margin-top: 0.25em; margin-left: 0.5em; z-index: 50; diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index f1b54fad..a2bb99a1 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -155,6 +155,7 @@ width: 56px; height: 56px; box-shadow: 0px 1px 8px rgba(0,0,0,0.75); + box-shadow: var(--avatarShadow); object-fit: cover; &.animated::before { diff --git a/src/i18n/en.json b/src/i18n/en.json index 18b47ba7..3fcc6da2 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -212,11 +212,16 @@ "inset": "Inset", "components": { "panel": "Panel", + "panelHeader": "Panel header", + "topBar": "Top bar", + "avatar": "User avatar (in post display)", + "avatarStatus": "User avatar (in profile view)", + "popup": "Popups and tooltips", "button": "Button", - "button_hover": "Button (hover)", - "button_pressed": "Button (pressed)", - "button_pressed_hover": "Button (pressed+hover)", - "input_box": "Input field" + "buttonHover": "Button (hover)", + "buttonPressed": "Button (pressed)", + "buttonPressedHover": "Button (pressed+hover)", + "input": "Input field" } } } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 57bd2841..8142da8b 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -258,6 +258,40 @@ const generateRadii = (input) => { } const generateShadows = (input) => { + const buttonInsetFakeBorders = [{ + x: 0, + y: 101, + blur: 0, + spread: -100, + color: '#FFFFFF', + alpha: 0.2, + inset: true + }, { + x: 0, + y: -101, + blur: 0, + spread: -100, + color: '#000000', + alpha: 0.2, + inset: true + }] + const inputInsetFakeBorders = [{ + x: 0, + y: 101, + blur: 0, + spread: -100, + color: '#000000', + alpha: 0.2, + inset: true + }, { + x: 0, + y: -101, + blur: 0, + spread: -100, + color: '#FFFFFF', + alpha: 0.3, + inset: true + }] const shadows = { panel: [{ x: 1, @@ -267,6 +301,48 @@ const generateShadows = (input) => { color: '#000000', alpha: 0.6 }], + popup: [{ + x: 2, + y: 2, + blur: 3, + spread: 0, + color: '#000000', + alpha: 0.5 + }], + avatar: [{ + x: 0, + y: 1, + blur: 8, + spread: 0, + color: '#000000', + alpha: 0.7 + }], + panelHeader: [], + button: [{ + x: 0, + y: 0, + blur: 2, + spread: 0, + color: '#000000', + alpha: 1 + }, ...buttonInsetFakeBorders], + buttonHover: [{ + x: 0, + y: 0, + blur: 4, + spread: 0, + color: '--faint', + alpha: 1 + }, ...buttonInsetFakeBorders], + input: [{ + x: 0, + y: 0, + blur: 2, + inset: true, + spread: 0, + color: '#000000', + alpha: 1 + }, ...inputInsetFakeBorders], ...(input.shadows || {}) } -- cgit v1.2.3-70-g09d2 From 2f1070deb63af7f351fb3e33e44394160c689be4 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 25 Nov 2018 17:42:41 +0300 Subject: collateral fixes --- src/components/status/status.vue | 1 + src/components/user_card_content/user_card_content.vue | 12 +++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index c4a268d0..710f2027 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -533,6 +533,7 @@ a.unmute { .status-el:last-child { border-bottom-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;; border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); + border-bottom: none; } } diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 22f77ffc..9830f283 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -120,6 +120,7 @@ background-size: cover; border-radius: $fallback--panelRadius; border-radius: var(--panelRadius, $fallback--panelRadius); + overflow: hidden; .panel-heading { padding: 0.6em 0em; @@ -147,7 +148,6 @@ padding: 16px 10px 6px 10px; display: flex; max-height: 56px; - overflow: hidden; .avatar { border-radius: $fallback--avatarRadius; @@ -187,6 +187,16 @@ text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; + // This is so that text doesn't get overlapped by avatar's shadow if it has + // big one + z-index: 1; + + img { + width: 26px; + height: 26px; + vertical-align: middle; + object-fit: contain + } } .user-name{ -- cgit v1.2.3-70-g09d2 From 707441ffe684f662a9b99c261d61fe2da5b5140f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 25 Nov 2018 22:06:49 +0300 Subject: more fonts --- src/components/status/status.vue | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 710f2027..7d4ecbc7 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -324,6 +324,8 @@ .status-content { margin-right: 0.5em; + font-family: var(--postFont, sans-serif); + img, video { max-width: 100%; max-height: 400px; @@ -338,6 +340,7 @@ pre { overflow: auto; + font-family: var(--postCodeFont, sans-serif); } p { -- cgit v1.2.3-70-g09d2 From d7eec4c30d93b8a87fa912543889bd106398042d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 26 Nov 2018 00:23:07 +0300 Subject: more styles --- src/components/status/status.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 7d4ecbc7..8682d996 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -340,7 +340,10 @@ pre { overflow: auto; - font-family: var(--postCodeFont, sans-serif); + } + + code, samp, kbd, var, pre { + font-family: var(--postCodeFont, monospace); } p { -- cgit v1.2.3-70-g09d2 From 9a9dc47fc573af28429a641bf5408ead1c0d33ec Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 26 Nov 2018 03:19:04 +0300 Subject: better preview, collateral fixes --- src/App.scss | 27 ++++++++++ src/components/notifications/notifications.scss | 17 ------- src/components/notifications/notifications.vue | 2 +- src/components/status/status.vue | 1 + src/components/style_switcher/style_switcher.scss | 25 +++++++++- src/components/style_switcher/style_switcher.vue | 61 +++++++++++++++++++++-- src/components/timeline/timeline.vue | 5 +- src/i18n/en.json | 13 +++++ 8 files changed, 123 insertions(+), 28 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/App.scss b/src/App.scss index 50645ec8..8c9df0ba 100644 --- a/src/App.scss +++ b/src/App.scss @@ -381,6 +381,12 @@ main-router { font-size: 1.3em; } + .faint { + background-color: transparent; + color: $fallback--faint; + color: var(--panelFaint, $fallback--faint); + } + .alert { white-space: nowrap; text-overflow: ellipsis; @@ -509,6 +515,27 @@ nav { flex-grow: 0; } } +.badge { + display: inline-block; + border-radius: 99px; + min-width: 22px; + max-width: 22px; + min-height: 22px; + max-height: 22px; + font-size: 15px; + line-height: 22px; + text-align: center; + vertical-align: middle; + white-space: nowrap; + padding: 0; + + &.badge-notification { + background-color: $fallback--cRed; + background-color: var(--badgeNotification, $fallback--cRed); + color: white; + color: var(--badgeNotificationText, white); + } +} .alert { margin: 0.35em; diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 3f22b690..87c89f6a 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -4,23 +4,6 @@ // 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(--badgeNotification, $fallback--cRed); - border-radius: 99px; - min-width: 22px; - max-width: 22px; - min-height: 22px; - max-height: 22px; - color: white; - color: var(--badgeNotificationText, white); - font-size: 15px; - line-height: 22px; - text-align: center; - vertical-align: middle - } - .loadmore-error { color: $fallback--text; color: var(--text, $fallback--text); diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index eb6c4dd0..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')}} diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 8682d996..0edc7b71 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -471,6 +471,7 @@ .avatar { width: 48px; height: 48px; + box-shadow: var(--avatarStatusShadow); border-radius: $fallback--avatarRadius; border-radius: var(--avatarRadius, $fallback--avatarRadius); overflow: hidden; diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index 9c4f4ecd..2c33224b 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -163,11 +163,32 @@ background-size: cover; background-position: 50% 50%; + .separator { + margin: 1em; + border-bottom: 1px solid; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + } + + .panel-heading { + .badge, .alert, .btn, .faint { + margin-left: 1em; + } + .flex-spacer { + flex: 1; + } + } + .checkbox { + display: inline-flex; + align-items: baseline; + margin-right: 1em; + } + .btn { margin-left: 0; - margin-top: 1em; + padding: 0 1em; + min-width: 3em; min-height: 30px; - width: 10em; } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index a444c6a7..2a7756ed 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -46,27 +46,80 @@ v-model="keepRoundness"> + + + +

{{$t('settings.style.switcher.save_load_hint')}}

-
Preview
+
+ {{$t('settings.style.preview.header')}} + + 99 + + + {{$t('settings.style.preview.error')}} + + + + + {{$t('settings.style.preview.header_faint')}} + +
( ͡° ͜ʖ ͡°)

Content

+
- A bunch of more content and - a nice lil' link + + + + {{$t('settings.style.preview.link')}} + + + +
- +
+ + + + {{$t('settings.style.preview.error')}} + + +
+
+ + + + + + + +
+ + + + {{$t('settings.style.preview.faint_link')}} + +
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 39f1b5bc..b69a09fd 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -58,10 +58,7 @@ .timeline { .loadmore-text { - opacity: 0.8; - background-color: transparent; - color: $fallback--faint; - color: var(--panelFaint, $fallback--faint); + opacity: 1; } } diff --git a/src/i18n/en.json b/src/i18n/en.json index c70c488c..0530b66d 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -170,6 +170,7 @@ "keep_shadows": "Keep shadows", "keep_opacity": "Keep opacity", "keep_roundness": "Keep roundness", + "keep_fonts": "Keep fonts", "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme.", "reset": "Reset", "clear_all": "Clear all", @@ -250,6 +251,18 @@ "size": "Size (in px)", "weight": "Weight (boldness)", "custom": "Custom" + }, + "preview": { + "header": "Preview of header", + "error": "Example error", + "button": "Button", + "text": "A bunch of more content and {0}", + "input": "Just landed in L.A.", + "faint_link": "helpful manual", + "fine_print": "Read our {0} to learn nothing useful!", + "header_faint": "This is fine", + "checkbox": "I have skimmed over terms and conditions", + "link": "a nice lil' link" } } }, -- cgit v1.2.3-70-g09d2 From 406df4399b630268c1028664f3b818571d6f8e4f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 30 Nov 2018 16:39:07 +0300 Subject: avatars shadows, also allows drop-shadow use --- src/components/notification/notification.js | 3 ++- src/components/notification/notification.vue | 2 +- src/components/notifications/notifications.scss | 6 +++++ src/components/status/status.js | 3 ++- src/components/status/status.vue | 13 +++++++++- src/components/style_switcher/style_switcher.vue | 12 ++++++++++ .../user_card_content/user_card_content.js | 3 ++- .../user_card_content/user_card_content.vue | 7 +++++- src/i18n/en.json | 7 ++++++ src/modules/interface.js | 6 +++++ src/services/style_setter/style_setter.js | 28 ++++++++++++++++++++-- 11 files changed, 82 insertions(+), 8 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index c786f2cc..4dea63bb 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -6,7 +6,8 @@ import { highlightClass, highlightStyle } from '../../services/user_highlighter/ const Notification = { data () { return { - userExpanded: false + userExpanded: false, + betterShadow: this.$store.state.interface.browserSupport.cssFilter } }, props: [ diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 72c1ca69..f98afbe0 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -2,7 +2,7 @@
- +
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 87c89f6a..d17ae25d 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -49,11 +49,17 @@ .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: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } + &.animated::before { display: none; } diff --git a/src/components/status/status.js b/src/components/status/status.js index 10716583..725bc3f8 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 4541c560..26be335c 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -21,7 +21,7 @@
- +
@@ -464,8 +464,14 @@ .status .avatar-compact { width: 32px; height: 32px; + box-shadow: var(--avatarStatusShadow); border-radius: $fallback--avatarAltRadius; border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } } .avatar { @@ -477,6 +483,11 @@ overflow: hidden; position: relative; + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } + img { width: 100%; height: 100%; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index fa173b98..66fe0f6b 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -278,6 +278,18 @@
+
+ + filter: drop-shadow() + + + drop-shadow + spread-radius + inset + +

{{$t('settings.style.shadows.filter_hint.inset_ignored')}}

+

{{$t('settings.style.shadows.filter_hint.spread_zero')}}

+
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 254d1666..97cd4983 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -7,7 +7,8 @@ export default { return { hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined' ? this.$store.state.instance.hideUserStats - : this.$store.state.config.hideUserStats + : this.$store.state.config.hideUserStats, + betterShadow: this.$store.state.interface.browserSupport.cssFilter } }, computed: { diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 5529948e..cca418ff 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -10,7 +10,7 @@
- +
@@ -159,6 +159,11 @@ box-shadow: var(--avatarShadow); object-fit: cover; + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } + &.animated::before { display: none; } diff --git a/src/i18n/en.json b/src/i18n/en.json index 8847b11e..7f5a2a4f 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -236,6 +236,13 @@ "spread": "Spread", "inset": "Inset", "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.", + "filter_hint": { + "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.", + "text": "Please note that {0} does not support {1} parameter and {2} keyword.", + "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero", + "inset_ignored": "Inset shadows using will be ignored", + "inset_substituted": "Inset shadows will be substituted with {1} equivalent" + }, "components": { "panel": "Panel", "panelHeader": "Panel header", diff --git a/src/modules/interface.js b/src/modules/interface.js index 07489685..132fb08d 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -4,6 +4,12 @@ const defaultState = { settings: { currentSaveStateNotice: null, noticeClearTimeout: null + }, + browserSupport: { + cssFilter: window.CSS && window.CSS.supports && ( + window.CSS.supports('filter', 'drop-shadow(0 0)') || + window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)') + ) } } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 7c375206..cff81c40 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -110,6 +110,24 @@ const getCssShadow = (input) => { ]).join(' ')).join(', ') } +const getCssShadowFilter = (input) => { + if (input.length === 0) { + return 'none' + } + + return input + // drop-shadow doesn't support inset or spread + .filter((shad) => console.log(shad) || !shad.inset && Number(shad.spread) === 0) + .map((shad) => [ + shad.x, + shad.y, + // drop-shadow's blur is twice as strong compared to box-shadow + shad.blur / 2 + ].map(_ => _ + 'px').concat([ + getCssColor(shad.color, shad.alpha) + ]).join(' ')).join(', ') +} + const getCssColor = (input, a) => { let rgb = {} if (typeof input === 'object') { @@ -384,7 +402,12 @@ const generateShadows = (input) => { return { rules: { - shadows: Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';') + shadows: Object + .entries(shadows) + // TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally + // convert all non-inset shadows into filter: drop-shadow() to boost performance + .map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}; --${k}ShadowFilter: ${getCssShadowFilter(v)}`) + .join(';') }, theme: { shadows @@ -467,5 +490,6 @@ export { generateFonts, generatePreset, composePreset, - getCssShadow + getCssShadow, + getCssShadowFilter } -- cgit v1.2.3-70-g09d2 From 77ac42d9190934c8e4f1fa7dfef087c58ccd3990 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 1 Dec 2018 14:47:42 +0300 Subject: fix retweeter avatar not getting proper shadow --- src/components/status/status.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 26be335c..6597d56b 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -9,7 +9,7 @@