diff --git a/src/components/Chat/Input/Suggestion.css b/src/components/Chat/Input/Suggestion.css index 8c7685d79..80131aaa7 100644 --- a/src/components/Chat/Input/Suggestion.css +++ b/src/components/Chat/Input/Suggestion.css @@ -1,6 +1,3 @@ -.SuggestionItem { - &:hover, - &.is-focused { - background-color: var(--chat-suggestion-selected); - } +.SuggestionItem:where(:hover, .is-focused) { + background-color: var(--chat-suggestion-selected); } diff --git a/src/components/Chat/Input/index.css b/src/components/Chat/Input/index.css index ec0e7436c..3e02e4097 100644 --- a/src/components/Chat/Input/index.css +++ b/src/components/Chat/Input/index.css @@ -6,28 +6,38 @@ } .ChatInput { + font-size: .875rem; height: 100%; width: 100%; + padding: 0 1rem; + display: grid; + align-content: center; + justify-content: stretch; +} + +/* Awkward wrapper */ +.ChatInput > span { + width: 100%; } .ChatInput-suggestions { position: absolute; bottom: 100%; - width: 100%; + inset-inline: 0; } .ChatInput-input { - margin: 15px 15px 16px; - height: 28px; - width: calc(100% - 32px); - padding: 0 6px; + height: 2rem; + padding: 0 .5rem; border: 1px solid var(--chat-border-color); + border-radius: .25rem; background: #222; color: var(--text-color); - font-size: 10pt; + font-size: .875rem; + width: 100%; +} - &.is-focused { - border-color: var(--highlight-color); - outline: none; - } +.ChatInput-input.is-focused { + border-color: var(--highlight-color); + outline: none; } diff --git a/src/components/Chat/Message.css b/src/components/Chat/Message.css index f9cd433f7..a907bc6ae 100644 --- a/src/components/Chat/Message.css +++ b/src/components/Chat/Message.css @@ -15,7 +15,7 @@ position: absolute; top: 0; inset-inline-end: 0; - padding: 0 6px; + padding: 0 .25rem; display: none; font-size: 80%; z-index: 2; @@ -39,14 +39,14 @@ width: 1.5rem; height: 1.5rem; top: 0; - inset-inline-start: 12px; + inset-inline-start: .75rem; margin: .25rem 0; } .ChatMessage-content { position: relative; - padding-inline-start: 48px; - padding-inline-end: 3px; + padding-inline-start: 3rem; + padding-inline-end: .25rem; width: 100%; display: inline-block; word-wrap: break-word; @@ -66,7 +66,7 @@ } .ChatMessage-text { - margin-inline-start: 5px; + margin-inline-start: .25rem; } .ChatMessage--loading { diff --git a/src/components/Chat/NotificationMessages/NowPlayingMessage.css b/src/components/Chat/NotificationMessages/NowPlayingMessage.css index 4c89da621..5dd4c015b 100644 --- a/src/components/Chat/NotificationMessages/NowPlayingMessage.css +++ b/src/components/Chat/NotificationMessages/NowPlayingMessage.css @@ -9,7 +9,7 @@ top: 0; right: 0; background: var(--background-color); - padding: 0 6px; + padding: 0 .25rem; height: 100%; display: none; @@ -32,8 +32,8 @@ flex-grow: 1; } - &::before { margin-right: 6px; } - &::after { margin-left: 6px; } + &::before { margin-right: .5rem; } + &::after { margin-left: .5rem; } } .NowPlayingMessage-media { diff --git a/src/components/Form/TextField.css b/src/components/Form/TextField.css index 117254743..ebb97ebc2 100644 --- a/src/components/Form/TextField.css +++ b/src/components/Form/TextField.css @@ -3,6 +3,7 @@ border: 1px solid #2c2c2c; border-top-color: #3e3e3e; border-right-color: #3e3e3e; + border-radius: .25rem; height: var(--forms-textfield-size); font-size: 12pt; } @@ -19,6 +20,7 @@ padding-right: var(--forms-textfield-size); font-size: 12pt; color: var(--text-color); + border-radius: .25rem; &::placeholder { color: #9f9d9e; @@ -34,8 +36,8 @@ width: var(--forms-textfield-size); height: var(--forms-textfield-size); margin-left: calc(var(--forms-textfield-size) * -1); - padding: 13px; - display: block; float: left; - text-align: center; + display: flex; + justify-content: center; + align-items: center; } diff --git a/src/components/PlaylistManager/Panel/PlaylistFilter.css b/src/components/PlaylistManager/Panel/PlaylistFilter.css index 6c742b6fb..0ceee4ccc 100644 --- a/src/components/PlaylistManager/Panel/PlaylistFilter.css +++ b/src/components/PlaylistManager/Panel/PlaylistFilter.css @@ -8,7 +8,7 @@ .PlaylistMediaFilter-input { width: 180px; - border-radius: 2px; + border-radius: .25rem; background: #252727; border: 1px solid #252727; color: var(--text-color); diff --git a/src/components/SearchBar/index.css b/src/components/SearchBar/index.css index 1bbb868a5..f151b2f8a 100644 --- a/src/components/SearchBar/index.css +++ b/src/components/SearchBar/index.css @@ -2,7 +2,7 @@ cursor: text; background: #252727; border: 1px solid #252727; - border-radius: 2px; + border-radius: .25rem; width: 100%; height: 38px; margin: 8px 0;