diff --git a/app/javascript/flavours/glitch/styles/mastodon/containers.scss b/app/javascript/flavours/glitch/styles/mastodon/containers.scss index 57c62a29e3..5e199273e0 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/containers.scss +++ b/app/javascript/flavours/glitch/styles/mastodon/containers.scss @@ -13,28 +13,28 @@ .logo-container { margin: 50px auto; - h1 { + a { display: flex; justify-content: center; align-items: center; + width: min-content; + margin: 0 auto; + padding: 12px 16px; + color: var(--color-text-primary); + text-decoration: none; + outline: 0; + line-height: 32px; + font-weight: 500; + font-size: 14px; - .logo { - height: 42px; - margin-inline-end: 10px; + &:focus-visible { + outline: var(--outline-focus-default); } + } - a { - display: flex; - justify-content: center; - align-items: center; - color: var(--color-text-primary); - text-decoration: none; - outline: 0; - padding: 12px 16px; - line-height: 32px; - font-weight: 500; - font-size: 14px; - } + .logo { + height: 42px; + margin-inline-end: 10px; } } diff --git a/app/javascript/flavours/glitch/styles/mastodon/forms.scss b/app/javascript/flavours/glitch/styles/mastodon/forms.scss index 09a5f9721e..b96ecca18a 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/forms.scss +++ b/app/javascript/flavours/glitch/styles/mastodon/forms.scss @@ -77,7 +77,6 @@ code { .input { margin-bottom: 16px; - overflow: hidden; &:last-child { margin-bottom: 0; @@ -472,13 +471,19 @@ code { } } - .input.radio_buttons .radio label { - margin-bottom: 5px; - font-family: inherit; - font-size: 14px; - color: var(--color-text-primary); - display: block; - width: auto; + .input.radio_buttons .radio { + label { + margin-bottom: 5px; + font-family: inherit; + font-size: 14px; + color: var(--color-text-primary); + display: block; + width: auto; + } + + input[type='radio'] { + accent-color: var(--color-text-brand); + } } .check_boxes { @@ -504,6 +509,12 @@ code { } } + label.checkbox { + input[type='checkbox'] { + accent-color: var(--color-text-brand); + } + } + .input.static .label_input__wrapper { font-size: 14px; padding: 10px; @@ -524,13 +535,20 @@ code { color: var(--color-text-primary); display: block; width: 100%; - outline: 0; font-family: inherit; resize: vertical; background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: 4px; padding: 10px 16px; + outline: var(--outline-focus-default); + outline-offset: -2px; + outline-color: transparent; + transition: outline-color 0.15s ease-out; + + &:focus { + outline: var(--outline-focus-default); + } &:invalid { box-shadow: none; @@ -614,6 +632,11 @@ code { margin-inline-end: 0; } + &:focus-visible { + outline: var(--outline-focus-default); + outline-offset: 2px; + } + &:active, &:focus, &:hover { @@ -654,6 +677,11 @@ code { padding-inline-end: 30px; height: 41px; + &:focus-visible { + outline: var(--outline-focus-default); + outline-offset: 2px; + } + @media screen and (width <= 600px) { font-size: 16px; }