From c0ea21299f357f592e449b224eb75398b0047a4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zoe=CC=88=20Bijl?= Date: Sun, 5 Oct 2025 01:36:12 +0200 Subject: [PATCH] [feature] refactor search box / add drawer outlines MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - add outlines to some UI elements like the timeline and drawers - search “clear” button is now an actual `
{options.length === 0 && ( <> diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss index 6643cd1aa..9579da8c0 100644 --- a/app/javascript/flavours/glitch/styles/_mixins.scss +++ b/app/javascript/flavours/glitch/styles/_mixins.scss @@ -52,17 +52,14 @@ } @mixin search-input() { - outline: 0; - box-sizing: border-box; width: 100%; - border: 0; - box-shadow: none; + border: 1px solid var(--color-accent-lines); + border-radius: var(--drawer-border-radius); + box-sizing: border-box; + color: var(--color-accent-fg); font-family: inherit; - background: $ui-base-color; - color: $darker-text-color; - border-radius: 4px; - font-size: 14px; - margin: 0; + font-size: inherit; + background: var(--color-accent-bg); } @mixin search-popout() { diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index c64f0758c..c08820e92 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -361,8 +361,9 @@ display: flex; gap: 8px; padding: 6px; + border: 1px solid var(--color-accent-lines); cursor: default; - background: darken($ui-base-color, 4%); + background: var(--color-accent-bg); a, button { diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index bf879d211..3e11b1620 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -343,6 +343,8 @@ $ui-header-height: 55px; .column-header { display: flex; + border: 1px solid var(--color-lines); + border-bottom: 0; border-radius: var(--drawer-border-radius) var(--drawer-border-radius) 0 0; color: $darker-text-color; font-size: 16px; @@ -371,13 +373,13 @@ $ui-header-height: 55px; gap: 15px; align-items: center; flex-grow: 1; - padding: 13px 0 13px 15px; + padding: 12px 0 13px 15px; } .column-header__buttons { display: flex; gap: 5px; - padding: 5px; + padding: 4px 5px 5px; } .column-header__button, @@ -418,9 +420,10 @@ $ui-header-height: 55px; } > .scrollable { + border: 1px solid var(--color-lines); + border-top: 0; + border-radius: 0 0 var(--drawer-border-radius) var(--drawer-border-radius); background: $ui-base-color; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; } } diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index c1f6d67d5..bcdbb1b8c 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -53,7 +53,8 @@ display: flex; gap: 10px; margin-bottom: 10px; - padding: 5px; + padding: 4px; + border: 1px solid var(--color-lines); border-radius: var(--drawer-border-radius); color: $darker-text-color; font-size: 16px; @@ -209,20 +210,21 @@ } .drawer__pager { - box-sizing: border-box; - padding: 0; - flex-grow: 1; position: relative; - overflow: hidden; display: flex; - border-radius: 4px; + flex-grow: 1; + padding: 0; + border: 1px solid var(--color-lines); + border-radius: var(--drawer-border-radius); + box-sizing: border-box; + overflow: hidden; } .drawer__inner { position: absolute; top: 0; inset-inline-start: 0; - background: lighten($ui-base-color, 13%); + background: lighten($ui-base-color, 4%); box-sizing: border-box; padding: 0; display: flex; @@ -238,8 +240,8 @@ } .drawer__inner__mastodon { - background: lighten($ui-base-color, 13%) - url('data:image/svg+xml;utf8,') + background: lighten($ui-base-color, 4%) + url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; flex: 1; min-height: 47px; @@ -293,7 +295,7 @@ bottom / 100% auto, - lighten($ui-base-color, 13%); + lighten($ui-base-color, 4%); } @else { background: url('~flavours/glitch/images/wave-drawer-glitched.png') @@ -301,7 +303,7 @@ bottom / 100% auto, - lighten($ui-base-color, 13%); + lighten($ui-base-color, 4%); } & > .mastodon { diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index aa54fc26d..bc4eaba9d 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -1,184 +1,154 @@ .search { - margin-bottom: 10px; position: relative; + margin-bottom: 10px; +} - &__popout { - box-sizing: border-box; - display: none; - position: absolute; - inset-inline-start: 0; - margin-top: -2px; - width: 100%; - background: $ui-base-color; - border-radius: 0 0 4px 4px; - box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); - z-index: 99; - font-size: 13px; - padding: 15px 5px; - - h4 { - text-transform: uppercase; - color: $dark-text-color; - font-weight: 500; - padding: 0 10px; - margin-bottom: 10px; - } - - &__menu { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } - - &__message { - color: $dark-text-color; - padding: 0 10px; - } - - &__item { - display: block; - box-sizing: border-box; - width: 100%; - border: 0; - font: inherit; - background: transparent; - color: $darker-text-color; - padding: 10px; - cursor: pointer; - border-radius: 4px; - text-align: start; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - - &--flex { - display: flex; - justify-content: space-between; - } - - .icon-button { - transition: none; - } - - &:hover, - &:focus, - &:active, - &.selected { - background: $ui-highlight-color; - color: $primary-text-color; - - .icon-button { - color: $primary-text-color; - } - } - - mark { - background: transparent; - font-weight: 700; - color: $primary-text-color; - } - - span { - overflow: inherit; - text-overflow: inherit; - } - } - } - } - - &.active { - .search__popout { - display: block; - } - } +.search__icon, +.search__icon.gts-icon { + position: absolute; + top: 13px; + left: 13px; + --size: 20px; } .search__input { @include search-input; display: block; - padding: 15px; - padding-inline-end: 30px; - line-height: 18px; + padding: 12px 40px; font-size: 16px; + line-height: 20px; &::placeholder { color: lighten($darker-text-color, 4%); - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; + font-weight: 500; } &:focus { - background: lighten($ui-base-color, 4%); + background: darken($ui-base-color, 4%); } } -.search__icon { - &::-moz-focus-inner { - border: 0; +.search__button { + position: absolute; + top: 7px; + right: 7px; + display: none; + padding: 6px; + border: 0; + border-radius: var(--button-border-radius); + color: inherit; + font: inherit; + background: transparent; + transition: all 0.3s; + + .gts-icon { + --size: 20px; + display: block; } - &::-moz-focus-inner, - &:focus { - outline: 0 !important; + &:focus-visible, + &:hover { + background: darken($ui-base-color, 10%); + } +} + +.search__button.active { + display: flex; +} + +.search__popout { + position: absolute; + display: none; + margin-top: 10px; + padding: 15px 5px; + width: 100%; + border: 1px solid var(--color-lines); + border-radius: var(--drawer-border-radius); + box-sizing: border-box; + background: $ui-base-color; + + inset-inline-start: 0; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + z-index: 99; + // font-size: 13px; + // padding: 15px 5px; + + h4 { + text-transform: uppercase; + color: $dark-text-color; + font-weight: 500; + padding: 0 10px; + margin-bottom: 10px; } - .fa { - position: absolute; - top: 16px; - inset-inline-end: 10px; - display: inline-block; - opacity: 0; - transition: all 100ms linear; - transition-property: color, transform, opacity; - font-size: 18px; - width: 18px; - height: 18px; - color: $secondary-text-color; - cursor: default; - pointer-events: none; + &__menu { + margin-bottom: 20px; - &.active { - pointer-events: auto; - opacity: 0.3; - } - } - - .fa-search { - transform: rotate(0deg); - - &.active { - pointer-events: auto; - opacity: 0.3; - } - } - - .fa-times-circle { - top: 17px; - transform: rotate(0deg); - color: $action-button-color; - cursor: pointer; - - &.active { - transform: rotate(90deg); - opacity: 1; + &:last-child { + margin-bottom: 0; } - &:hover { - color: lighten($action-button-color, 7%); + &__message { + color: $dark-text-color; + padding: 0 10px; + } + + &__item { + display: block; + box-sizing: border-box; + width: 100%; + border: 0; + font: inherit; + background: transparent; + color: $darker-text-color; + padding: 10px; + cursor: pointer; + border-radius: 4px; + text-align: start; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + + &--flex { + display: flex; + justify-content: space-between; + } + + .icon-button { + transition: none; + } + + &:hover, + &:focus, + &:active, + &.selected { + background: $ui-highlight-color; + color: $primary-text-color; + + .icon-button { + color: $primary-text-color; + } + } + + mark { + background: transparent; + font-weight: 700; + color: $primary-text-color; + } + + span { + overflow: inherit; + text-overflow: inherit; + } } } } +.search.active .search__popout { + display: block; +} + .search-results__header { color: $dark-text-color; background: lighten($ui-base-color, 2%); diff --git a/app/javascript/flavours/glitch/styles/gts.scss b/app/javascript/flavours/glitch/styles/gts.scss index 8f2d504e7..5623947aa 100644 --- a/app/javascript/flavours/glitch/styles/gts.scss +++ b/app/javascript/flavours/glitch/styles/gts.scss @@ -4,6 +4,14 @@ :root { --drawer-border-radius: 8px; --button-border-radius: 6px; + + --color-bg: #261f3c; + --color-fg: #d6d2e0; + --color-lines: #3d4455; + + --color-accent-bg: #1f232b; + --color-accent-fg: #ffffff; + --color-accent-lines: rgba(172, 172, 249, 0.3); } /* Diff */