From 7dc22774532872fc99aa7768cf299ab623e9d155 Mon Sep 17 00:00:00 2001 From: tusooa Date: Mon, 9 Jan 2023 13:02:16 -0500 Subject: Use stylelint --- src/components/about/about.vue | 3 - src/components/account_actions/account_actions.vue | 3 +- src/components/announcement/announcement.vue | 8 +- .../announcements_page/announcements_page.vue | 3 +- .../async_component_error.vue | 5 +- src/components/attachment/attachment.scss | 47 +++---- src/components/autosuggest/autosuggest.vue | 4 +- src/components/avatar_list/avatar_list.vue | 2 +- src/components/basic_user_card/basic_user_card.vue | 2 +- src/components/block_card/block_card.vue | 1 + src/components/chat/chat.scss | 4 +- src/components/chat/chat.vue | 4 +- src/components/chat_list/chat_list.vue | 2 +- src/components/chat_list_item/chat_list_item.scss | 9 +- src/components/chat_list_item/chat_list_item.vue | 4 +- src/components/chat_message/chat_message.scss | 94 +++++++------- src/components/chat_message/chat_message.vue | 4 +- src/components/chat_new/chat_new.scss | 2 +- src/components/chat_new/chat_new.vue | 4 +- src/components/chat_title/chat_title.vue | 2 +- src/components/checkbox/checkbox.vue | 16 +-- src/components/color_input/color_input.scss | 19 +-- src/components/contrast_ratio/contrast_ratio.vue | 1 - src/components/conversation/conversation.vue | 31 ++--- src/components/desktop_nav/desktop_nav.scss | 39 +++--- src/components/dialog_modal/dialog_modal.vue | 10 +- .../edit_status_modal/edit_status_modal.vue | 1 + src/components/emoji_input/emoji_input.vue | 24 ++-- src/components/emoji_picker/emoji_picker.scss | 35 +++--- src/components/emoji_reactions/emoji_reactions.vue | 5 +- src/components/extra_buttons/extra_buttons.vue | 13 +- src/components/favorite_button/favorite_button.vue | 4 +- src/components/flash/flash.vue | 5 +- src/components/follow_card/follow_card.vue | 3 +- .../follow_request_card/follow_request_card.vue | 4 +- src/components/font_control/font_control.vue | 5 +- src/components/gallery/gallery.vue | 100 ++++++++------- .../global_notice_list/global_notice_list.vue | 5 +- src/components/link-preview/link-preview.vue | 5 +- src/components/list/list.vue | 2 +- src/components/lists_card/lists_card.vue | 11 +- src/components/lists_edit/lists_edit.vue | 2 +- .../lists_user_search/lists_user_search.vue | 4 +- src/components/login_form/login_form.vue | 7 +- src/components/media_modal/media_modal.vue | 57 +++++---- src/components/media_upload/media_upload.vue | 2 +- src/components/mention_link/mention_link.scss | 7 +- src/components/mentions_line/mentions_line.scss | 2 +- src/components/mobile_nav/mobile_nav.vue | 8 +- .../mobile_post_status_button.vue | 5 +- src/components/modal/modal.vue | 7 +- .../moderation_tools/moderation_tools.vue | 7 +- .../mrf_transparency_panel.scss | 14 ++- .../mrf_transparency_panel.vue | 4 +- src/components/mute_card/mute_card.vue | 1 + src/components/nav_panel/nav_panel.vue | 7 +- src/components/navigation/navigation_entry.vue | 4 +- src/components/navigation/navigation_pins.vue | 3 +- src/components/notification/notification.scss | 17 +-- src/components/notifications/notifications.scss | 9 +- src/components/panel_loading/panel_loading.vue | 3 +- src/components/password_reset/password_reset.vue | 2 +- src/components/poll/poll.vue | 12 +- src/components/poll/poll_form.vue | 3 +- src/components/popover/popover.vue | 37 +++--- .../post_status_form/post_status_form.vue | 67 +++++----- src/components/react_button/react_button.vue | 24 ++-- src/components/registration/registration.vue | 6 +- .../remote_user_resolver/remote_user_resolver.vue | 3 - src/components/reply_button/reply_button.vue | 5 +- src/components/report/report.scss | 2 +- src/components/retweet_button/retweet_button.vue | 4 +- src/components/rich_content/rich_content.scss | 6 +- src/components/scope_selector/scope_selector.vue | 3 +- src/components/search/search.vue | 14 +-- src/components/search_bar/search_bar.vue | 2 +- src/components/select/select.vue | 7 +- src/components/selectable_list/selectable_list.vue | 3 +- .../settings_modal/helpers/choice_setting.vue | 5 - .../settings_modal/helpers/size_setting.vue | 9 +- src/components/settings_modal/settings_modal.scss | 51 ++++---- .../settings_modal/settings_modal_content.scss | 8 +- src/components/settings_modal/tabs/general_tab.vue | 1 + .../settings_modal/tabs/mutes_and_blocks_tab.scss | 44 +++---- .../settings_modal/tabs/profile_tab.scss | 7 +- .../settings_modal/tabs/security_tab/mfa.vue | 11 +- .../tabs/security_tab/mfa_backup_codes.vue | 3 +- .../settings_modal/tabs/theme_tab/preview.vue | 15 +-- .../settings_modal/tabs/theme_tab/theme_tab.scss | 120 ++++++++++-------- src/components/shadow_control/shadow_control.vue | 40 +++--- src/components/shout_panel/shout_panel.vue | 2 +- src/components/side_drawer/side_drawer.vue | 18 +-- src/components/staff_panel/staff_panel.vue | 1 - src/components/status/status.scss | 10 +- src/components/status/status.vue | 2 +- src/components/status_body/status_body.scss | 13 +- .../status_history_modal/status_history_modal.vue | 1 + src/components/status_popover/status_popover.vue | 3 +- src/components/sticker_picker/sticker_picker.vue | 7 +- src/components/still-image/still-image.vue | 6 +- src/components/tab_switcher/tab_switcher.scss | 50 +++++--- .../terms_of_service_panel.vue | 2 +- src/components/thread_tree/thread_tree.vue | 4 +- src/components/timeline/timeline.scss | 7 +- src/components/timeline_menu/timeline_menu.vue | 139 +++++++++++---------- .../update_notification/update_notification.scss | 14 ++- src/components/user_avatar/user_avatar.vue | 5 +- src/components/user_card/user_card.scss | 114 +++++++++-------- .../user_list_popover/user_list_popover.vue | 2 +- src/components/user_note/user_note.vue | 2 +- src/components/user_popover/user_popover.vue | 4 +- src/components/user_profile/user_profile.vue | 6 +- .../user_reporting_modal/user_reporting_modal.vue | 4 +- src/components/who_to_follow/who_to_follow.vue | 3 - .../who_to_follow_panel/who_to_follow_panel.vue | 16 ++- 115 files changed, 883 insertions(+), 781 deletions(-) (limited to 'src/components') diff --git a/src/components/about/about.vue b/src/components/about/about.vue index 33586c97..8a551485 100644 --- a/src/components/about/about.vue +++ b/src/components/about/about.vue @@ -9,6 +9,3 @@ - - diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index 218aa6b3..973a5935 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -80,7 +80,8 @@ diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index b2dea98d..cf38d45b 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -1,4 +1,4 @@ -@import '../../_variables.scss'; +@import "../../variables"; .Attachment { display: inline-flex; @@ -102,14 +102,13 @@ padding-top: 0.5em; } - .play-icon { position: absolute; font-size: 64px; top: calc(50% - 32px); left: calc(50% - 32px); - color: rgba(255, 255, 255, 0.75); - text-shadow: 0 0 2px rgba(0, 0, 0, 0.4); + color: rgb(255 255 255 / 75%); + text-shadow: 0 0 2px rgb(0 0 0 / 40%); &::before { margin: 0; @@ -135,18 +134,32 @@ margin-left: 0.5em; font-size: 1.25em; // TODO: theming? hard to theme with unknown background image color - background: rgba(230, 230, 230, 0.7); + background: rgb(230 230 230 / 70%); .svg-inline--fa { - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); } &:hover .svg-inline--fa { - color: rgba(0, 0, 0, 0.9); + color: rgb(0 0 0 / 90%); } } } + &.-contain-fit { + img, + canvas { + object-fit: contain; + } + } + + &.-cover-fit { + img, + canvas { + object-fit: cover; + } + } + .oembed-container { line-height: 1.2em; flex: 1 0 100%; @@ -160,8 +173,9 @@ .image { flex: 1; + img { - border: 0px; + border: 0; border-radius: 5px; height: 100%; object-fit: cover; @@ -172,9 +186,10 @@ flex: 2; margin: 8px; word-break: break-all; + h1 { font-size: 1rem; - margin: 0px; + margin: 0; } } } @@ -251,18 +266,4 @@ &.-loading { cursor: progress; } - - &.-contain-fit { - img, - canvas { - object-fit: contain; - } - } - - &.-cover-fit { - img, - canvas { - object-fit: cover; - } - } } diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue index f283ab82..7b7102fd 100644 --- a/src/components/autosuggest/autosuggest.vue +++ b/src/components/autosuggest/autosuggest.vue @@ -24,7 +24,7 @@ diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue index 1248c4c8..27a475ed 100644 --- a/src/components/chat_list/chat_list.vue +++ b/src/components/chat_list/chat_list.vue @@ -45,7 +45,7 @@ diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index 1913479f..fd5b7aa4 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -1,12 +1,12 @@ -@import '../../_variables.scss'; +@import "../../variables"; .chat-message-wrapper { - &.hovered-message-chain { .animated.Avatar { canvas { display: none; } + img { visibility: visible; } @@ -28,7 +28,8 @@ .menu-icon { cursor: pointer; - &:hover, .extra-button-popover.open & { + &:hover, + .extra-button-popover.open & { color: $fallback--text; color: var(--text, $fallback--text); } @@ -54,27 +55,11 @@ width: 32px; } - .link-preview, .attachments { + .link-preview, + .attachments { margin-bottom: 1em; } - .chat-message-inner { - display: flex; - flex-direction: column; - align-items: flex-start; - max-width: 80%; - min-width: 10em; - width: 100%; - - &.with-media { - width: 100%; - - .status { - width: 100%; - } - } - } - .status { border-radius: $fallback--chatMessageRadius; border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius); @@ -86,7 +71,7 @@ position: relative; float: right; font-size: 0.8em; - margin: -1em 0 -0.5em 0; + margin: -1em 0 -0.5em; font-style: italic; opacity: 0.8; } @@ -103,18 +88,54 @@ } .pending { - .status-content.media-body, .created-at { + .status-content.media-body, + .created-at { color: var(--faint); } } .error { - .status-content.media-body, .created-at { + .status-content.media-body, + .created-at { color: $fallback--cRed; color: var(--badgeNotification, $fallback--cRed); } } + .chat-message-inner { + display: flex; + flex-direction: column; + align-items: flex-start; + max-width: 80%; + min-width: 10em; + width: 100%; + } + + .outgoing { + display: flex; + flex-flow: row wrap; + align-content: end; + justify-content: flex-end; + + a { + color: var(--chatMessageOutgoingLink, $fallback--link); + } + + .status { + color: var(--chatMessageOutgoingText, $fallback--text); + background-color: var(--chatMessageOutgoingBg, $fallback--lightBg); + border: 1px solid var(--chatMessageOutgoingBorder, --lightBg); + } + + .chat-message-inner { + align-items: flex-end; + } + + .chat-message-menu { + right: 0.4rem; + } + } + .incoming { a { color: var(--chatMessageIncomingLink, $fallback--link); @@ -137,36 +158,17 @@ } } - .outgoing { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-content: end; - justify-content: flex-end; - - a { - color: var(--chatMessageOutgoingLink, $fallback--link); - } + .chat-message-inner.with-media { + width: 100%; .status { - color: var(--chatMessageOutgoingText, $fallback--text); - background-color: var(--chatMessageOutgoingBg, $fallback--lightBg); - border: 1px solid var(--chatMessageOutgoingBorder, --lightBg); - } - - .chat-message-inner { - align-items: flex-end; - } - - .chat-message-menu { - right: 0.4rem; + width: 100%; } } .visible { opacity: 1; } - } .chat-message-date-separator { diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue index d635c47e..381574c3 100644 --- a/src/components/chat_message/chat_message.vue +++ b/src/components/chat_message/chat_message.vue @@ -33,7 +33,7 @@
@@ -98,6 +98,6 @@ diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss index 240e1a38..b145ecf9 100644 --- a/src/components/chat_new/chat_new.scss +++ b/src/components/chat_new/chat_new.scss @@ -1,7 +1,7 @@ .chat-new { .input-wrap { display: flex; - margin: 0.7em 0.5em 0.7em 0.5em; + margin: 0.7em 0.5em; input { width: 100%; diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue index bf09a379..52306c1d 100644 --- a/src/components/chat_new/chat_new.vue +++ b/src/components/chat_new/chat_new.vue @@ -46,6 +46,6 @@ diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue index ab7491fa..93db4fa7 100644 --- a/src/components/chat_title/chat_title.vue +++ b/src/components/chat_title/chat_title.vue @@ -26,7 +26,7 @@ diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss index 3de31fde..ca46199a 100644 --- a/src/components/color_input/color_input.scss +++ b/src/components/color_input/color_input.scss @@ -1,4 +1,4 @@ -@import '../../_variables.scss'; +@import "../../variables"; .color-input { display: inline-flex; @@ -8,7 +8,7 @@ flex: 0 0 0; max-width: 9em; align-items: stretch; - padding: .2em 8px; + padding: 0.2em 8px; input { background: none; @@ -31,6 +31,7 @@ min-height: 100%; } } + .computedIndicator, .transparentIndicator { flex: 0 0 2em; @@ -38,22 +39,27 @@ align-self: stretch; min-height: 100%; } + .transparentIndicator { // forgot to install counter-strike source, ooops - background-color: #FF00FF; + background-color: #f0f; position: relative; - &::before, &::after { + + &::before, + &::after { display: block; - content: ''; - background-color: #000000; + content: ""; + background-color: #000; position: absolute; height: 50%; width: 50%; } + &::after { top: 0; left: 0; } + &::before { bottom: 0; right: 0; @@ -64,5 +70,4 @@ .label { flex: 1 1 auto; } - } diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue index 374cb9ba..bbd6fd4a 100644 --- a/src/components/contrast_ratio/contrast_ratio.vue +++ b/src/components/contrast_ratio/contrast_ratio.vue @@ -87,7 +87,6 @@ export default { .contrast-ratio { display: flex; justify-content: flex-end; - margin-top: -4px; margin-bottom: 5px; diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index afa04db0..7577129e 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -210,17 +210,16 @@ diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index b2fad1c9..a84d47f6 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -172,15 +172,10 @@ diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue index c919b11a..eff69fb2 100644 --- a/src/components/follow_card/follow_card.vue +++ b/src/components/follow_card/follow_card.vue @@ -39,9 +39,8 @@ &-content-container { flex-shrink: 0; display: flex; - flex-direction: row; + flex-flow: row wrap; justify-content: space-between; - flex-wrap: wrap; line-height: 1.5em; } diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue index 1b12ba4b..eb222cc7 100644 --- a/src/components/follow_request_card/follow_request_card.vue +++ b/src/components/follow_request_card/follow_request_card.vue @@ -22,8 +22,8 @@ diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue index d828b819..0e58476f 100644 --- a/src/components/global_notice_list/global_notice_list.vue +++ b/src/components/global_notice_list/global_notice_list.vue @@ -25,7 +25,7 @@ diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue index 6521aba6..eec0f978 100644 --- a/src/components/lists_edit/lists_edit.vue +++ b/src/components/lists_edit/lists_edit.vue @@ -164,7 +164,7 @@ diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue index a538a5ed..2799495b 100644 --- a/src/components/media_upload/media_upload.vue +++ b/src/components/media_upload/media_upload.vue @@ -29,7 +29,7 @@ diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index 8535ef27..b708cdc8 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -166,18 +166,21 @@ diff --git a/src/components/mute_card/mute_card.vue b/src/components/mute_card/mute_card.vue index ca33c6c5..97e91cbc 100644 --- a/src/components/mute_card/mute_card.vue +++ b/src/components/mute_card/mute_card.vue @@ -37,6 +37,7 @@ .mute-card-content-container { margin-top: 0.5em; text-align: right; + button { width: 10em; } diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index d628c380..1a826cc4 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -102,7 +102,7 @@ diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue index f4d53836..411ca536 100644 --- a/src/components/navigation/navigation_entry.vue +++ b/src/components/navigation/navigation_entry.vue @@ -63,7 +63,7 @@ diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue index dada511b..6e3964b7 100644 --- a/src/components/reply_button/reply_button.vue +++ b/src/components/reply_button/reply_button.vue @@ -51,8 +51,8 @@ diff --git a/src/components/report/report.scss b/src/components/report/report.scss index 578b4eb1..9762400b 100644 --- a/src/components/report/report.scss +++ b/src/components/report/report.scss @@ -1,4 +1,4 @@ -@import '../../_variables.scss'; +@import "../../variables"; .Report { .report-content { diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index 240828e3..7700ee0d 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -65,8 +65,8 @@ diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue index 199a7500..3969d8de 100644 --- a/src/components/search_bar/search_bar.vue +++ b/src/components/search_bar/search_bar.vue @@ -56,7 +56,7 @@ diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue index 1f7683ab..14910fc5 100644 --- a/src/components/selectable_list/selectable_list.vue +++ b/src/components/selectable_list/selectable_list.vue @@ -51,7 +51,7 @@ diff --git a/src/components/settings_modal/helpers/size_setting.vue b/src/components/settings_modal/helpers/size_setting.vue index 90c9f538..5a78f100 100644 --- a/src/components/settings_modal/helpers/size_setting.vue +++ b/src/components/settings_modal/helpers/size_setting.vue @@ -45,10 +45,11 @@ diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index 13cb0e65..f5861229 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -1,4 +1,5 @@ -@import 'src/_variables.scss'; +@import "src/variables"; + .settings-modal { overflow: hidden; @@ -6,32 +7,13 @@ .option-list { list-style-type: none; padding-left: 2em; + li { margin-bottom: 0.5em; } - .suboptions { - margin-top: 0.3em - } - } - - &.peek { - .settings-modal-panel { - /* Explanation: - * Modal is positioned vertically centered. - * 100vh - 100% = Distance between modal's top+bottom boundaries and screen - * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen - * + 100% - we move modal completely off-screen, it's top boundary touches - * bottom of the screen - * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible - */ - transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); - @media all and (max-width: 800px) { - /* For mobile, the modal takes 100% of the available screen. - This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible. - */ - transform: translateY(calc(100% - 50px)); - } + .suboptions { + margin-top: 0.3em; } } @@ -63,6 +45,7 @@ .settings-footer { display: flex; + >* { margin-right: 0.5em; } @@ -72,4 +55,26 @@ flex-grow: 1; } } + + &.peek { + .settings-modal-panel { + /* Explanation: + * Modal is positioned vertically centered. + * 100vh - 100% = Distance between modal's top+bottom boundaries and screen + * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen + * + 100% - we move modal completely off-screen, it's top boundary touches + * bottom of the screen + * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible + */ + transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); + + @media all and (max-width: 800px) { + /* For mobile, the modal takes 100% of the available screen. + This ensures the minimized modal is always 50px above the browser bottom + bar regardless of whether or not it is visible. + */ + transform: translateY(calc(100% - 50px)); + } + } + } } diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss index 81ab434b..87df7982 100644 --- a/src/components/settings_modal/settings_modal_content.scss +++ b/src/components/settings_modal/settings_modal_content.scss @@ -1,4 +1,5 @@ -@import 'src/_variables.scss'; +@import "src/variables"; + .settings_tab-switcher { height: 100%; @@ -10,7 +11,8 @@ > div, > label { display: block; - margin-bottom: .5em; + margin-bottom: 0.5em; + &:last-child { margin-bottom: 0; } @@ -21,7 +23,7 @@ .option-list { margin: 0; - padding-left: .5em; + padding-left: 0.5em; } } diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 8561647b..582cb288 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -464,6 +464,7 @@ justify-content: space-evenly; flex-wrap: wrap; } + .column-settings .size-label { display: block; margin-bottom: 0.5em; diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss index 2adff847..5fa3a27b 100644 --- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss +++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss @@ -1,29 +1,29 @@ .mutes-and-blocks-tab { - height: 100%; + height: 100%; - .usersearch-wrapper { - padding: 1em; - } + .usersearch-wrapper { + padding: 1em; + } - .bulk-actions { - text-align: right; - padding: 0 1em; - min-height: 2em; - } + .bulk-actions { + text-align: right; + padding: 0 1em; + min-height: 2em; + } - .bulk-action-button { - width: 10em - } + .bulk-action-button { + width: 10em; + } - .domain-mute-form { - padding: 1em; - display: flex; - flex-direction: column - } + .domain-mute-form { + padding: 1em; + display: flex; + flex-direction: column; + } - .domain-mute-button { - align-self: flex-end; - margin-top: 1em; - width: 10em - } + .domain-mute-button { + align-self: flex-end; + margin-top: 1em; + width: 10em; + } } diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss index 201f1a76..73879192 100644 --- a/src/components/settings_modal/tabs/profile_tab.scss +++ b/src/components/settings_modal/tabs/profile_tab.scss @@ -1,4 +1,5 @@ -@import '../../../_variables.scss'; +@import "../../../variables"; + .profile-tab { .bio { margin: 0; @@ -8,7 +9,7 @@ padding-top: 5px; } - input[type=file] { + input[type="file"] { padding: 5px; height: auto; } @@ -52,7 +53,7 @@ right: 0.2em; border-radius: $fallback--tooltipRadius; border-radius: var(--tooltipRadius, $fallback--tooltipRadius); - background-color: rgba(0, 0, 0, 0.6); + background-color: rgb(0 0 0 / 60%); opacity: 0.7; width: 1.5em; height: 1.5em; diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue index 455d17b6..ee5b6b13 100644 --- a/src/components/settings_modal/tabs/security_tab/mfa.vue +++ b/src/components/settings_modal/tabs/security_tab/mfa.vue @@ -137,9 +137,11 @@ diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue index c6fffc71..04727278 100644 --- a/src/components/thread_tree/thread_tree.vue +++ b/src/components/thread_tree/thread_tree.vue @@ -119,7 +119,8 @@ diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss index ce8129d0..4337acc4 100644 --- a/src/components/update_notification/update_notification.scss +++ b/src/components/update_notification/update_notification.scss @@ -1,4 +1,5 @@ -@import 'src/_variables.scss'; +@import "src/variables"; + .UpdateNotification { overflow: hidden; } @@ -21,7 +22,8 @@ @media all and (max-width: 800px) { /* For mobile, the modal takes 100% of the available screen. - This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible. + This ensures the minimized modal is always 50px above the browser + bottom bar regardless of whether or not it is visible. */ width: 100vw; } @@ -44,7 +46,7 @@ } .panel-body { - border-width: 0 0 1px 0; + border-width: 0 0 1px; border-style: solid; border-color: var(--border, $fallback--border); } @@ -67,7 +69,7 @@ z-index: 20; position: relative; shape-margin: 0.5em; - filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5)); + filter: drop-shadow(5px 5px 10px rgb(0 0 0 / 50%)); pointer-events: none; } @@ -94,7 +96,7 @@ } &.-peek { - /* Explanation: + /* Explanation: * 100vh - 100% = Distance between modal's top+bottom boundaries and screen * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen */ @@ -103,7 +105,7 @@ .pleroma-tan { float: right; z-index: 10; - shape-image-threshold: 0.7; + shape-image-threshold: 70%; } .extra-info-group { diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue index f4d294df..91c17611 100644 --- a/src/components/user_avatar/user_avatar.vue +++ b/src/components/user_avatar/user_avatar.vue @@ -27,7 +27,7 @@ diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index cdb8cb57..942673c4 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -1,4 +1,4 @@ -@import '../../_variables.scss'; +@import "../../variables"; .user-card { position: relative; @@ -11,7 +11,7 @@ } .panel-heading { - padding: .5em 0; + padding: 0.5em 0; text-align: center; box-shadow: none; background: transparent; @@ -35,17 +35,19 @@ left: 0; right: 0; bottom: 0; - mask: linear-gradient(to top, white, transparent) bottom no-repeat, - linear-gradient(to top, white, white); + mask: + linear-gradient(to top, white, transparent) bottom no-repeat, + linear-gradient(to top, white, white); // Autoprefixer seem to ignore this one, and also syntax is different - -webkit-mask-composite: xor; + mask-composite: xor; mask-composite: exclude; background-size: cover; mask-size: 100% 60%; - border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px); - border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px); - border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px); - border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px); + border-radius: + calc(var(--__roundnessTop, --panelRadius) - 1px) + calc(var(--__roundnessTop, --panelRadius) - 1px) + calc(var(--__roundnessBottom, --panelRadius) - 1px) + calc(var(--__roundnessBottom, --panelRadius) - 1px); background-color: var(--profileBg); z-index: -2; @@ -159,17 +161,17 @@ top: 0; right: 0; bottom: 0; - background-color: rgba(0, 0, 0, 0.3); + background-color: rgb(0 0 0 / 30%); display: flex; justify-content: center; align-items: center; border-radius: $fallback--avatarRadius; border-radius: var(--avatarRadius, $fallback--avatarRadius); opacity: 0; - transition: opacity .2s ease; + transition: opacity 0.2s ease; svg { - color: #FFF; + color: #fff; } } @@ -178,7 +180,8 @@ } } - .external-link-button, .edit-profile-button { + .external-link-button, + .edit-profile-button { cursor: pointer; width: 2.5em; text-align: center; @@ -191,34 +194,6 @@ } } - .user-summary { - display: block; - margin-left: 0.6em; - text-align: left; - 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; - line-height: 2em; - - --emoji-size: 1.7em; - - .top-line, - .bottom-line { - display: flex; - } - } - - .user-name { - text-overflow: ellipsis; - overflow: hidden; - flex: 1 1 auto; - margin-right: 1em; - font-size: 1.1em; - } - .bottom-line { font-weight: light; font-size: 1.1em; @@ -253,8 +228,36 @@ } } + .user-summary { + display: block; + margin-left: 0.6em; + text-align: left; + 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; + line-height: 2em; + + --emoji-size: 1.7em; + + .top-line, + .bottom-line { + display: flex; + } + } + + .user-name { + text-overflow: ellipsis; + overflow: hidden; + flex: 1 1 auto; + margin-right: 1em; + font-size: 1.1em; + } + .user-meta { - margin-bottom: .15em; + margin-bottom: 0.15em; display: flex; align-items: baseline; line-height: 22px; @@ -263,7 +266,7 @@ .following { flex: 1 0 auto; margin: 0; - margin-bottom: .25em; + margin-bottom: 0.25em; text-align: left; } @@ -271,7 +274,7 @@ flex: 0 1 auto; display: flex; flex-wrap: wrap; - margin-right: -.5em; + margin-right: -0.5em; align-self: start; .userHighlightCl { @@ -294,19 +297,20 @@ .userHighlightText, .userHighlightSel { vertical-align: top; - margin-right: .5em; - margin-bottom: .25em; + margin-right: 0.5em; + margin-bottom: 0.25em; } } } + .user-interactions { position: relative; display: flex; flex-flow: row wrap; - margin-right: -.75em; + margin-right: -0.75em; > * { - margin: 0 .75em .6em 0; + margin: 0 0.75em 0.6em 0; white-space: nowrap; min-width: 95px; } @@ -317,7 +321,7 @@ } .user-note { - margin: 0 .75em .6em 0; + margin: 0 0.75em 0.6em 0; } } @@ -327,8 +331,8 @@ .user-counts { display: flex; - line-height:16px; - padding: .5em 1.5em 0em 1.5em; + line-height: 16px; + padding: 0.5em 1.5em 0; text-align: center; justify-content: space-between; color: $fallback--lightText; @@ -338,14 +342,16 @@ .user-count { flex: 1 0 auto; - padding: .5em 0 .5em 0; - margin: 0 .5em; + padding: 0.5em 0; + margin: 0 0.5em; h5 { - font-size:1em; + font-size: 1em; font-weight: bolder; margin: 0 0 0.25em; } + + /* stylelint-disable-next-line no-descending-specificity */ a { text-decoration: none; } diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue index 635dc7f6..8307cc8a 100644 --- a/src/components/user_list_popover/user_list_popover.vue +++ b/src/components/user_list_popover/user_list_popover.vue @@ -48,7 +48,7 @@ diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index d5e8d230..2720f052 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -140,7 +140,7 @@ diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue index c1ba6fb1..0fecec0b 100644 --- a/src/components/who_to_follow_panel/who_to_follow_panel.vue +++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue @@ -33,24 +33,28 @@ .who-to-follow * { vertical-align: middle; } + .who-to-follow img { width: 32px; height: 32px; } + .who-to-follow { - padding: 0em 1em; - margin: 0px; + padding: 0 1em; + margin: 0; } + .who-to-follow-items { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - padding: 0px; - margin: 1em 0em; + padding: 0; + margin: 1em 0; } + .who-to-follow-more { - padding: 0px; - margin: 1em 0em; + padding: 0; + margin: 1em 0; text-align: center; } -- cgit v1.2.3-70-g09d2 From a28032fa58ff341b8815a0651d621ed358efd168 Mon Sep 17 00:00:00 2001 From: tusooa Date: Fri, 13 Jan 2023 00:37:42 -0500 Subject: Disable no-shorthand for certain props for better readability --- .stylelintrc.json | 17 ++++++++++++++++- src/App.scss | 2 -- src/components/desktop_nav/desktop_nav.scss | 2 -- src/components/user_card/user_card.scss | 9 ++++----- 4 files changed, 20 insertions(+), 10 deletions(-) (limited to 'src/components') diff --git a/.stylelintrc.json b/.stylelintrc.json index 7517362c..d6689cc0 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -21,6 +21,21 @@ "import-notation": null, "custom-property-pattern": null, "keyframes-name-pattern": null, - "scss/operator-no-newline-after": null + "scss/operator-no-newline-after": null, + "declaration-block-no-redundant-longhand-properties": [ + true, + { + "ignoreShorthands": [ + "grid-template", + "margin", + "padding", + "border", + "border-width", + "border-style", + "border-color", + "border-radius" + ] + } + ] } } diff --git a/src/App.scss b/src/App.scss index 0d2daa7d..be5dce9d 100644 --- a/src/App.scss +++ b/src/App.scss @@ -214,10 +214,8 @@ nav { grid-template-columns: var(--effectiveSidebarColumnWidth) var(--effectiveContentColumnWidth); - /* stylelint-disable declaration-block-no-redundant-longhand-properties */ grid-template-areas: "sidebar content"; grid-template-rows: 1fr; - /* stylelint-enable declaration-block-no-redundant-longhand-properties */ box-sizing: border-box; margin: 0 auto; align-content: flex-start; diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss index 00f434bf..c7e02936 100644 --- a/src/components/desktop_nav/desktop_nav.scss +++ b/src/components/desktop_nav/desktop_nav.scss @@ -14,11 +14,9 @@ .inner-nav { display: grid; - /* stylelint-disable declaration-block-no-redundant-longhand-properties */ grid-template-rows: var(--navbar-height); grid-template-columns: 2fr auto 2fr; grid-template-areas: "sitename logo actions"; - /* stylelint-enable declaration-block-no-redundant-longhand-properties */ box-sizing: border-box; padding: 0 1.2em; margin: auto; diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 942673c4..d56b6672 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -43,11 +43,10 @@ mask-composite: exclude; background-size: cover; mask-size: 100% 60%; - border-radius: - calc(var(--__roundnessTop, --panelRadius) - 1px) - calc(var(--__roundnessTop, --panelRadius) - 1px) - calc(var(--__roundnessBottom, --panelRadius) - 1px) - calc(var(--__roundnessBottom, --panelRadius) - 1px); + border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px); + border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px); + border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px); + border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px); background-color: var(--profileBg); z-index: -2; -- cgit v1.2.3-70-g09d2