blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web/CustomInstanceInput: fix colors & overflow in firefox and safari

Browse source
This commit is contained in:
wukko 2024-08-30 22:01:14 +06:00
parent 3d631b6c30
commit 744842cc3d
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
web/src/components/settings/CustomInstanceInput.svelte
View file

@ -96,7 +96,6 @@
<style> <style>
#custom-instance-holder { #custom-instance-holder {
width: 100%;
display: flex; display: flex;
gap: 6px; gap: 6px;
} }
@ -104,7 +103,7 @@
#input-container { #input-container {
padding: 0 18px; padding: 0 18px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: var(--white); color: var(--secondary);
background-color: var(--button); background-color: var(--button);
box-shadow: var(--button-box-shadow); box-shadow: var(--button-box-shadow);
display: flex; display: flex;
@ -114,7 +113,7 @@
#input-container, #input-container,
#custom-instance-input { #custom-instance-input {
font-size: 14px; font-size: 13.5px;
font-weight: 500; font-weight: 500;
min-width: 0; min-width: 0;
} }
@ -122,7 +121,7 @@
#custom-instance-input { #custom-instance-input {
flex: 1; flex: 1;
background-color: transparent; background-color: transparent;
color: var(--white); color: var(--secondary);
border: none; border: none;
padding-block: 0; padding-block: 0;
padding-inline: 0; padding-inline: 0;
@ -130,8 +129,9 @@
} }
#custom-instance-input::placeholder { #custom-instance-input::placeholder {
color: var(--white); color: var(--gray);
opacity: 0.5; /* fix for firefox */
opacity: 1;
} }
#custom-instance-input:focus-visible { #custom-instance-input:focus-visible {
@ -139,7 +139,7 @@
} }
#input-container.focused { #input-container.focused {
box-shadow: 0 0 0 2px var(--white) inset; box-shadow: 0 0 0 2px var(--secondary) inset;
} }
#custom-instance-buttons { #custom-instance-buttons {
@ -149,9 +149,9 @@
} }
.custom-instance-button { .custom-instance-button {
height: 100%; height: 42px;
aspect-ratio: 1 / 1; width: 42px;
padding: 0px 8px; padding: 0;
} }
.custom-instance-button :global(svg) { .custom-instance-button :global(svg) {