Style selects for consistency

Signed-off-by: Axel Boberg <[email protected]>
svt · Mar 8, 2024 · bb73670 · bb73670
1 parent 181c7ec
commit bb73670
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/app/bridge.css b/app/bridge.css
@@ -72,8 +72,7 @@ button {
 .Button--primary,
 .Button--secondary,
 .Button--tertiary,
-.Button--ghost,
-select {
+.Button--ghost {
   padding: 0.8em 1.5em;
 
   font-size: 1em;
@@ -122,25 +121,6 @@ select {
   justify-content: center;
 }
 
-select {
-  color: inherit;
-  border: 1px solid var(--base-color--shade);
-  background: url('./assets/icons/arrow-down.svg') no-repeat right 10px center transparent;
-
-  -webkit-appearance: none;
-  appearance: none;
-
-  box-sizing: border-box;
-}
-
-.Select--small {
-  padding: 0.4em 1em;
-}
-
-select:focus {
-  background: url('./assets/icons/arrow-down.svg') no-repeat right 10px center var(--base-color--background);
-}
-
 /* Headings */
 
 h1, .u-heading--1 {
@@ -258,6 +238,32 @@ input[type="checkbox"]:checked::before {
   transform: translate(100%, -50%);
 }
 
+select {
+  padding: 0.8em 1.3em 0.8em 1em;
+
+  color: inherit;
+  font-size: 1em;
+  font-family: var(--base-fontFamily--primary);
+
+  border: 1px solid var(--base-color--shade);
+  border-radius: 8px;
+
+  background: url('./assets/icons/arrow-down.svg') no-repeat right 10px center var(--base-color--shade2);
+
+  -webkit-appearance: none;
+  appearance: none;
+
+  box-sizing: border-box;
+}
+
+.Select--small {
+  padding: 0.4em 0.75em;
+}
+
+select:focus {
+  background: url('./assets/icons/arrow-down.svg') no-repeat right 10px center var(--base-color--background);
+}
+
 /* Labels */
 
 .u-text--label {

diff --git a/plugins/caspar/app/components/LibraryHeader/style.css b/plugins/caspar/app/components/LibraryHeader/style.css
@@ -4,6 +4,8 @@
 
 .LibraryHeader-serverSelector {
   width: 100%;
+  padding: 0 5px 5px;
+  box-sizing: border-box;
 }
 
 .LibraryHeader-refresh {

diff --git a/plugins/caspar/app/components/ServerSelector/style.css b/plugins/caspar/app/components/ServerSelector/style.css
@@ -1,6 +1,5 @@
 .ServerSelector {
   width: 100%;
-  padding: 0 5px 5px;
   box-sizing: border-box;
 }