diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index a0124b7f6a..77835ce823 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -346,7 +346,6 @@ $ui-header-height: 55px; position: relative; z-index: 2; outline: 0; - overflow: hidden; & > button { display: flex; @@ -363,6 +362,10 @@ $ui-header-height: 55px; overflow: hidden; white-space: nowrap; flex: 1; + + &:focus-visible { + outline: $ui-button-icon-focus-outline; + } } & > .column-header__back-button { @@ -427,6 +430,10 @@ $ui-header-height: 55px; font-size: 16px; padding: 0 15px; + &:last-child { + border-start-end-radius: 4px; + } + &:hover { color: lighten($darker-text-color, 7%); } diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss index a2ce4336b9..d5dc9d8b6e 100644 --- a/app/javascript/flavours/glitch/styles/components/compose_form.scss +++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss @@ -526,7 +526,7 @@ .privacy-dropdown__dropdown { border-radius: 4px; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + box-shadow: var(--dropdown-shadow); background: $simple-background-color; overflow: hidden; transform-origin: 50% 0; @@ -603,7 +603,7 @@ .language-dropdown { &__dropdown { background: $simple-background-color; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + box-shadow: var(--dropdown-shadow); border-radius: 4px; overflow: hidden; z-index: 2; diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss index 86d4354cab..8dbe4f343e 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji.scss @@ -14,7 +14,7 @@ .emoji-picker-dropdown__menu { background: $simple-background-color; position: relative; - box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + box-shadow: var(--dropdown-shadow); border-radius: 4px; margin-top: 5px; z-index: 2; @@ -98,7 +98,7 @@ } } - &:focus { + &:focus-visible { img { outline: $ui-button-icon-focus-outline; } diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss index eab9f1172d..5b1292eec8 100644 --- a/app/javascript/flavours/glitch/styles/components/misc.scss +++ b/app/javascript/flavours/glitch/styles/components/misc.scss @@ -202,8 +202,8 @@ &:hover, &:active, &:focus { - color: lighten($action-button-color, 20%); - background-color: $ui-button-icon-hover-background-color; + color: lighten($action-button-color, 7%); + background-color: rgba($action-button-color, 0.15); } &:focus-visible { @@ -236,7 +236,7 @@ &:active, &:focus { color: darken($lighter-text-color, 7%); - background-color: $ui-button-icon-hover-background-color; + background-color: rgba($lighter-text-color, 0.15); } &:focus-visible { @@ -251,6 +251,13 @@ &.active { color: $highlight-text-color; + &:hover, + &:active, + &:focus { + color: $highlight-text-color; + background-color: transparent; + } + &.disabled { color: lighten($highlight-text-color, 13%); } @@ -293,16 +300,12 @@ cursor: pointer; padding: 0 3px; white-space: nowrap; - transition: all 100ms ease-in; - transition-property: background-color, color; &:hover, &:active, &:focus { color: darken($lighter-text-color, 7%); - background-color: $ui-button-icon-hover-background-color; - transition: all 200ms ease-out; - transition-property: background-color, color; + background-color: rgba($lighter-text-color, 0.15); } &:focus { @@ -317,6 +320,13 @@ &.active { color: $highlight-text-color; + + &:hover, + &:active, + &:focus { + color: $highlight-text-color; + background-color: transparent; + } } } @@ -561,7 +571,7 @@ body > [data-popper-placement] { font-size: inherit; line-height: inherit; - &:focus { + &:focus-visible { outline: 1px dotted; }