diff --git a/app/styles/azure.scss b/app/styles/azure.scss deleted file mode 100644 index ccf45b00f..000000000 --- a/app/styles/azure.scss +++ /dev/null @@ -1,77 +0,0 @@ -@import 'soapbox-light/variables'; - -$gab-brand-default: #0482d8; -$gab-background-base-light: #f2f3f6; -$gab-background: $gab-background-base-light; -$ui-base-color: #d9f2f9; -$ui-highlight-color: $gab-brand-default; -$nav-ui-highlight-color: #149dfb; -$ui-base-lighter-color: #b0c0cf; - -@import 'application'; -@import 'soapbox-light/diff'; - -.tabs-bar__link { - font-weight: bold; - transition: 0.1s; - outline: none; - - &::before { - bottom: auto; - opacity: 0; - height: 15px; - border-radius: 999px; - z-index: -1; - width: calc(100% + 20px); - margin-left: -12px; - - @media screen and (max-width: 895px) { - height: 0; - border-radius: 3px 3px 0 0; - bottom: 0; - } - } - - &.active::before, - &:hover::before { - height: 30px; - opacity: 1; - - @media screen and (max-width: 895px) { - height: 7px; - width: 36px; - margin: 0; - } - } - -} - -.tabs-bar__split--left:hover .tabs-bar__link { - &::before { - height: 15px; - opacity: 0; - - @media screen and (max-width: 895px) { - height: 0; - } - } - - &:hover::before { - height: 30px; - opacity: 1; - - @media screen and (max-width: 895px) { - height: 7px; - } - } -} - -.search__input { - border-radius: 999px; - border: 0; - padding-left: 15px; -} - -.search__icon .fa { - right: 8px; -} diff --git a/app/styles/soapbox/_mixins.scss b/app/styles/soapbox/_mixins.scss index ea2e30969..2d899e45d 100644 --- a/app/styles/soapbox/_mixins.scss +++ b/app/styles/soapbox/_mixins.scss @@ -39,13 +39,14 @@ outline: 0; box-sizing: border-box; width: 100%; - border: 1px $gab-placeholder-accent solid; box-shadow: none; font-family: inherit; background: var(--background-color); color: var(--highlight-text-color); margin: 0; - border-radius: 4px; + border-radius: 999px; + border: 0; + padding-left: 15px; // Chrome does not like these concatinated together &::placeholder {color: $gab-placeholder-accent;} diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss index a8cd66b90..ec417f727 100644 --- a/app/styles/soapbox/components.scss +++ b/app/styles/soapbox/components.scss @@ -3338,7 +3338,7 @@ a.status-card.compact:hover { display: inline-block; position: absolute; top: 8px; - right: 6px; + right: 8px; z-index: 2; width: 18px; height: 18px; diff --git a/app/styles/soapbox/components/tabs-bar.scss b/app/styles/soapbox/components/tabs-bar.scss index 5ef20c826..ce5e1888a 100644 --- a/app/styles/soapbox/components/tabs-bar.scss +++ b/app/styles/soapbox/components/tabs-bar.scss @@ -150,6 +150,9 @@ position: relative; align-items: center; padding-right: 4px; + font-weight: bold; + transition: 0.1s; + outline: none; @media screen and (max-width: 895px) { width: 36px; @@ -201,18 +204,35 @@ &::before { content: ""; display: block; - width: 100%; - height: 0; background: var(--accent-color); position: absolute; - bottom: 0; - left: 0; transition: 0.2s; + left: 0; + bottom: auto; + opacity: 0; + height: 15px; + border-radius: 999px; + z-index: -1; + width: calc(100% + 20px); + margin-left: -12px; + + @media screen and (max-width: 895px) { + height: 0; + border-radius: 3px 3px 0 0; + bottom: 0; + } } &.active::before, &:hover::before { - height: 7px; + height: 30px; + opacity: 1; + + @media screen and (max-width: 895px) { + height: 7px; + width: 36px; + margin: 0; + } } &--logo { @@ -247,10 +267,20 @@ .tabs-bar__split--left:hover .tabs-bar__link { &::before { - height: 0; + height: 15px; + opacity: 0; + + @media screen and (max-width: 895px) { + height: 0; + } } &:hover::before { - height: 7px; + height: 30px; + opacity: 1; + + @media screen and (max-width: 895px) { + height: 7px; + } } }