Tweaking some pixel values (#2673)

u-wave · Mar 11, 2023 · 7afbff9 · 7afbff9
1 parent 331fed2
commit 7afbff9
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;