From d2a74ea1a2965eb38609bb8029a41b45beab89ce Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 7 Feb 2024 15:53:49 +0200 Subject: add .input class to all inputs --- src/components/settings_modal/tabs/theme_tab/preview.vue | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/components/settings_modal/tabs/theme_tab') diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue index d755279a..5230f3e9 100644 --- a/src/components/settings_modal/tabs/theme_tab/preview.vue +++ b/src/components/settings_modal/tabs/theme_tab/preview.vue @@ -95,6 +95,7 @@
@@ -103,6 +104,7 @@ id="preview_checkbox" checked="very yes" type="checkbox" + class="input" > -- cgit v1.2.3-70-g09d2 From c16f1d4e35f2d885d2aa4e5f1ee51af9e95c6bdc Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 13 Feb 2024 02:27:53 +0200 Subject: more fixes --- src/App.scss | 3 ++ src/components/attachment/attachment.scss | 6 +-- src/components/chat_list_item/chat_list_item.scss | 5 -- src/components/conversation/conversation.vue | 10 ++-- src/components/nav_panel/nav_panel.vue | 23 -------- src/components/poll/poll.vue | 7 +-- .../post_status_form/post_status_form.vue | 7 ++- src/components/report/report.scss | 8 +-- .../settings_modal/tabs/profile_tab.scss | 3 +- .../settings_modal/tabs/theme_tab/theme_tab.scss | 2 - src/components/timeline_menu/timeline_menu.vue | 61 ---------------------- src/components/user_profile/user_profile.vue | 7 ++- 12 files changed, 20 insertions(+), 122 deletions(-) (limited to 'src/components/settings_modal/tabs/theme_tab') diff --git a/src/App.scss b/src/App.scss index 8efa1328..e4cfb561 100644 --- a/src/App.scss +++ b/src/App.scss @@ -379,6 +379,9 @@ nav { font-family: inherit; cursor: pointer; color: inherit; + position: relative; + border-bottom: 1px solid; + border-color: var(--border); &:first-child { border-top-right-radius: var(--roundness); diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index 681bab29..b1a3fa5e 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -9,10 +9,8 @@ height: 100%; border-style: solid; border-width: 1px; - border-radius: $fallback--attachmentRadius; - border-radius: var(--attachmentRadius, $fallback--attachmentRadius); - border-color: $fallback--border; - border-color: var(--border, $fallback--border); + border-radius: var(--roundness); + border-color: var(--border); .attachment-wrapper { flex: 1 1 auto; diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss index 3a84672b..af28e1c0 100644 --- a/src/components/chat_list_item/chat_list_item.scss +++ b/src/components/chat_list_item/chat_list_item.scss @@ -73,11 +73,6 @@ } } - .Avatar { - border-radius: $fallback--avatarAltRadius; - border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); - } - .chat-preview-body { --emoji-size: 1.4em; diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 7577129e..aa5d041c 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -275,11 +275,11 @@ /* expanded conversation in timeline */ &.status-fadein.-expanded .thread-body { - border-left: 4px solid $fallback--cRed; - border-left-color: var(--cRed, $fallback--cRed); - border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; - border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); - border-bottom: 1px solid var(--border, $fallback--border); + border-left: 4px solid var(--cRed); + border-radius: var(--roundness); + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom: 1px solid var(--border); } &.-expanded.status-fadein { diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index a07a8795..074d9f83 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -117,29 +117,6 @@ padding: 0; } - li { - position: relative; - border-bottom: 1px solid; - border-color: $fallback--border; - border-color: var(--border, $fallback--border); - } - - > li { - &:first-child.menu-item { - border-top-right-radius: var(--roundness); - border-top-left-radius: var(--roundness); - } - - &:last-child.menu-item { - border-bottom-right-radius: var(--roundness); - border-bottom-left-radius: var(--roundness); - } - } - - li:last-child { - border: none; - } - .navigation-chevron { margin-left: 0.8em; margin-right: 0.8em; diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue index 1d01f941..087822e1 100644 --- a/src/components/poll/poll.vue +++ b/src/components/poll/poll.vue @@ -140,12 +140,7 @@ .result-fill { height: 100%; position: absolute; - color: $fallback--text; - color: var(--pollText, $fallback--text); - background-color: $fallback--lightBg; - background-color: var(--poll, $fallback--lightBg); - border-radius: $fallback--panelRadius; - border-radius: var(--panelRadius, $fallback--panelRadius); + border-radius: var(--roundness); top: 0; left: 0; transition: width 0.5s; diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index a5300083..1ece3c42 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -171,7 +171,7 @@ :disabled="posting && !optimisticPosting" v-bind="propsToNative(inputProps)" size="1" - class="form-post-subject" + class="input form-post-subject" > @@ -198,7 +198,7 @@ rows="1" cols="1" :disabled="posting && !optimisticPosting" - class="form-post-body" + class="input form-post-body" :class="{ 'scrollable-form': !!maxHeight }" v-bind="propsToNative(inputProps)" @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)" @@ -555,7 +555,7 @@ line-height: 1.85; } - .form-post-body { + .input.form-post-body { // TODO: make a resizable textarea component? box-sizing: content-box; // needed for easier computation of dynamic size overflow: hidden; @@ -566,7 +566,6 @@ height: calc(var(--post-line-height) * 1em); min-height: calc(var(--post-line-height) * 1em); resize: none; - text: inherit; background: transparent; &.scrollable-form { diff --git a/src/components/report/report.scss b/src/components/report/report.scss index 9762400b..1fe11fd9 100644 --- a/src/components/report/report.scss +++ b/src/components/report/report.scss @@ -10,12 +10,8 @@ } .reported-status { - border: 1px solid $fallback--faint; - border-color: var(--faint, $fallback--faint); - border-radius: $fallback--inputRadius; - border-radius: var(--inputRadius, $fallback--inputRadius); - color: $fallback--text; - color: var(--text, $fallback--text); + border: 1px solid var(--border); + border-radius: var(--roundness); display: block; padding: 0.5em; margin: 0.5em 0; diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss index efc52335..52ae6c8b 100644 --- a/src/components/settings_modal/tabs/profile_tab.scss +++ b/src/components/settings_modal/tabs/profile_tab.scss @@ -50,8 +50,7 @@ position: absolute; top: 0.2em; right: 0.2em; - border-radius: $fallback--tooltipRadius; - border-radius: var(--tooltipRadius, $fallback--tooltipRadius); + border-radius: var(--roundness); background-color: rgb(0 0 0 / 60%); opacity: 0.7; width: 1.5em; diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss index 9935c2e7..246f9a13 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss @@ -227,8 +227,6 @@ min-width: 20px; min-height: 20px; line-height: 20px; - border-radius: $fallback--avatarAltRadius; - border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); } .avatar { diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue index 5f1da1f7..91739216 100644 --- a/src/components/timeline_menu/timeline_menu.vue +++ b/src/components/timeline_menu/timeline_menu.vue @@ -60,65 +60,6 @@ margin: 0; padding: 0; } - - a { - display: block; - padding: 0 0.65em; - height: 3.5em; - line-height: 3.5em; - - &:hover { - background-color: $fallback--lightBg; - background-color: var(--selectedMenu, $fallback--lightBg); - color: $fallback--link; - color: var(--selectedMenuText, $fallback--link); - - --faint: var(--selectedMenuFaintText, $fallback--faint); - --faintLink: var(--selectedMenuFaintLink, $fallback--faint); - --lightText: var(--selectedMenuLightText, $fallback--lightText); - --icon: var(--selectedMenuIcon, $fallback--icon); - } - - &.router-link-active { - font-weight: bolder; - background-color: $fallback--lightBg; - background-color: var(--selectedMenu, $fallback--lightBg); - color: $fallback--text; - color: var(--selectedMenuText, $fallback--text); - - --faint: var(--selectedMenuFaintText, $fallback--faint); - --faintLink: var(--selectedMenuFaintLink, $fallback--faint); - --lightText: var(--selectedMenuLightText, $fallback--lightText); - --icon: var(--selectedMenuIcon, $fallback--icon); - - &:hover { - text-decoration: underline; - } - } - - svg { - margin-right: 0.4em; - margin-left: -0.2em; - } - } - - li { - border-bottom: 1px solid; - border-color: $fallback--border; - border-color: var(--border, $fallback--border); - padding: 0; - - &:last-child a { - border-bottom-right-radius: $fallback--panelRadius; - border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius); - border-bottom-left-radius: $fallback--panelRadius; - border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius); - } - - &:last-child { - border: none; - } - } } .TimelineMenu { @@ -159,8 +100,6 @@ } &.open .timeline-menu-title svg { - color: $fallback--text; - color: var(--panelText, $fallback--text); transform: rotate(180deg); } diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index c63a303c..46aef990 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -181,9 +181,8 @@ .user-profile-field { display: flex; margin: 0.25em; - border: 1px solid var(--border, $fallback--border); - border-radius: $fallback--inputRadius; - border-radius: var(--inputRadius, $fallback--inputRadius); + border: 1px solid var(--border); + border-radius: var(--roundness); .user-profile-field-name { flex: 0 1 30%; @@ -191,7 +190,7 @@ text-align: right; color: var(--lightText); min-width: 120px; - border-right: 1px solid var(--border, $fallback--border); + border-right: 1px solid var(--border); } .user-profile-field-value { -- cgit v1.2.3-70-g09d2 From 7c77809ff9a4d365ec17fb2ed43f3795382940a9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 16 Feb 2024 00:29:16 +0200 Subject: badge, alert(dot) improvements --- src/App.scss | 54 +++++++--------------- src/components/alert.style.js | 9 +++- src/components/badge.style.js | 3 +- src/components/chat/chat.vue | 2 +- src/components/chat_list_item/chat_list_item.vue | 2 +- src/components/menu_item.style.js | 3 +- src/components/mobile_nav/mobile_nav.vue | 25 ++-------- src/components/navigation/navigation_entry.vue | 6 ++- src/components/navigation/navigation_pins.vue | 13 +----- src/components/notifications/notifications.vue | 2 +- .../settings_modal/tabs/theme_tab/preview.vue | 2 +- src/components/side_drawer/side_drawer.vue | 6 +-- src/components/timeline/timeline.scss | 11 ----- src/services/style_setter/style_setter.js | 3 -- 14 files changed, 44 insertions(+), 97 deletions(-) (limited to 'src/components/settings_modal/tabs/theme_tab') diff --git a/src/App.scss b/src/App.scss index 6080b0e5..0af05a54 100644 --- a/src/App.scss +++ b/src/App.scss @@ -634,11 +634,21 @@ option { overflow: hidden; text-overflow: ellipsis; - &.badge-notification { - background-color: $fallback--cRed; - background-color: var(--badgeNotification, $fallback--cRed); - color: white; - color: var(--badgeNotificationText, white); + &.-dot { + border-radius: 100%; + min-height: 8px; + max-height: 8px; + min-width: 8px; + max-width: 8px; + padding: 0; + line-height: 0; + margin: 0; + font-size: 0; + position: absolute; + left: calc(50% - 4px); + top: calc(50% - 4px); + margin-left: 6px; + margin-top: -6px; } } @@ -646,39 +656,7 @@ option { margin: 0 0.35em; padding: 0 0.25em; border-radius: var(--roundness); - - &.error { - background-color: $fallback--alertError; - background-color: var(--alertError, $fallback--alertError); - color: $fallback--text; - color: var(--alertErrorText, $fallback--text); - - .panel-heading & { - color: $fallback--text; - color: var(--alertErrorPanelText, $fallback--text); - } - } - - &.warning { - background-color: $fallback--alertWarning; - background-color: var(--alertWarning, $fallback--alertWarning); - color: $fallback--text; - color: var(--alertWarningText, $fallback--text); - - .panel-heading & { - color: $fallback--text; - color: var(--alertWarningPanelText, $fallback--text); - } - } - - &.success { - background-color: var(--alertSuccess, $fallback--alertWarning); - color: var(--alertSuccessText, $fallback--text); - - .panel-heading & { - color: var(--alertSuccessPanelText, $fallback--text); - } - } + border: 1px solid var(--border); } .faint { diff --git a/src/components/alert.style.js b/src/components/alert.style.js index 081031d7..5881e833 100644 --- a/src/components/alert.style.js +++ b/src/components/alert.style.js @@ -17,9 +17,16 @@ export default { { directives: { background: '--text', - opacity: 0.8 + opacity: 0.5 } }, + { + parent: { + component: 'Alert' + }, + component: 'Border', + textColor: '--parent' + }, { variant: 'error', directives: { diff --git a/src/components/badge.style.js b/src/components/badge.style.js index 3ac7d8c0..37833cdb 100644 --- a/src/components/badge.style.js +++ b/src/components/badge.style.js @@ -6,8 +6,7 @@ export default { 'Icon' ], variants: { - normal: '.neutral', - notification: '.notification' + notification: '.-notification' }, defaultRules: [ { diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue index b1e5468c..fc94cc71 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -61,7 +61,7 @@
{{ newMessageCount }}
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue index 69ad609b..cbae2d11 100644 --- a/src/components/chat_list_item/chat_list_item.vue +++ b/src/components/chat_list_item/chat_list_item.vue @@ -36,7 +36,7 @@ />
{{ chat.unread }}
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js index 6475395a..3c70bd9f 100644 --- a/src/components/menu_item.style.js +++ b/src/components/menu_item.style.js @@ -6,7 +6,8 @@ export default { 'Icon', 'Input', 'Border', - 'ButtonUnstyled' + 'ButtonUnstyled', + 'Badge' ], states: { hover: ':hover', diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index 489f3866..2e7590b9 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -20,7 +20,7 @@ />
@@ -37,14 +37,14 @@ />