make placeholder text less visible

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
This commit is contained in:
Ronni Skansing
2025-11-22 10:44:42 +01:00
parent 490aec02df
commit bbd7397c14
9 changed files with 21 additions and 10 deletions
+16 -1
View File
@@ -223,7 +223,7 @@ body {
.dark input,
.dark textarea,
.dark select {
@apply bg-gray-700 border-gray-600 text-white placeholder-gray-400;
@apply bg-gray-700 border-gray-600 text-white placeholder-gray-500;
}
.dark input:focus,
@@ -334,3 +334,18 @@ body {
.no-transition *::after {
transition: none !important;
}
/* global placeholder styling for consistency */
input::placeholder,
textarea::placeholder,
select::placeholder {
color: #9ca3af; /* gray-400 */
opacity: 0.6;
}
.dark input::placeholder,
.dark textarea::placeholder,
.dark select::placeholder {
color: #6b7280; /* gray-500 */
opacity: 0.6;
}
@@ -14,7 +14,6 @@
export let multiple = false;
export let name = 'files';
export let accept = '*';
export let bgColor = '';
// bind to parent form element, if there is one
let parentForm = null;
// listen to parent form reset event, if one exists
+1 -1
View File
@@ -34,6 +34,6 @@
{type}
id={fieldName}
name={fieldName}
class="w-full p-2 rounded bg-pc-lightblue dark:bg-gray-900/60 dark:border-gray-700/60 dark:text-gray-300 dark:placeholder-gray-500 focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-highlight-blue/80 focus:border-2 transition-colors duration-200"
class="w-full p-2 rounded bg-pc-lightblue dark:bg-gray-900/60 dark:border-gray-700/60 dark:text-gray-300 focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-highlight-blue/80 focus:border-2 transition-colors duration-200"
/>
</div>
+1 -1
View File
@@ -39,7 +39,7 @@
setSearch();
}
}}
class="bg-grayblue-light dark:bg-gray-900/60 w-56 border text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-700/60 pl-8 py-2 relative rounded-lg focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-highlight-blue/80 focus:border transition-colors duration-200 dark:placeholder-gray-500"
class="bg-grayblue-light dark:bg-gray-900/60 w-56 border text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-700/60 pl-8 py-2 relative rounded-lg focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-highlight-blue/80 focus:border transition-colors duration-200"
placeholder="Search"
/>
</div>
@@ -305,7 +305,6 @@
class="w-full relative rounded-md py-2 pr-10 text-gray-600 dark:text-gray-300 border border-transparent focus:outline-none focus:border-solid focus:border focus:border-slate-400 dark:focus:border-highlight-blue/80 focus:bg-gray-100 dark:focus:bg-gray-700/60 bg-grayblue-light dark:bg-gray-900/60 font-normal cursor-pointer focus:cursor-text transition-colors duration-200"
class:pl-10={showDropdown}
class:pl-4={!showDropdown}
class:text-gray-400={!hasValue && !showDropdown && value.length === 0}
placeholder={!hasValue && !showDropdown && value.length === 0
? placeholder
: showDropdown
@@ -302,7 +302,6 @@
class="w-full relative rounded-md py-2 pr-10 text-gray-600 dark:text-gray-300 border border-transparent focus:outline-none focus:border-solid focus:border focus:border-slate-400 dark:focus:border-highlight-blue/80 focus:bg-gray-100 dark:focus:bg-gray-700/60 bg-grayblue-light dark:bg-gray-900/60 font-normal cursor-pointer focus:cursor-text transition-colors duration-200"
class:pl-10={showDropdown}
class:pl-4={!showDropdown}
class:text-gray-400={!hasValue && !showDropdown}
placeholder={!hasValue && !showDropdown ? placeholder : ''}
{required}
/>
@@ -312,7 +312,6 @@
class:pl-10={isFocused && showDropdown}
class:pl-20={!isFocused}
class:pl-4={isFocused && !showDropdown}
class:text-gray-400={!hasValue && !showDropdown}
placeholder={!hasValue && !showDropdown ? placeholder : ''}
{required}
/>
@@ -249,7 +249,7 @@
bind:value={searchQuery}
type="text"
placeholder="search pages..."
class="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200"
class="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200"
/>
</div>
+2 -2
View File
@@ -275,7 +275,7 @@
type="text"
id="Username"
name="Username"
class="w-full p-2 rounded bg-pc-lightblue dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-highlight-blue/80 focus:border-2 transition-colors duration-200"
class="w-full p-2 rounded bg-pc-lightblue dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-highlight-blue/80 focus:border-2 transition-colors duration-200"
/>
</div>
<div class="flex flex-col w-full p-4 h-24">
@@ -322,7 +322,7 @@
type={inputType}
id="Password"
name="Password"
class="relative w-full p-2 rounded bg-pc-lightblue dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-highlight-blue/80 focus:border-2 transition-colors duration-200"
class="relative w-full p-2 rounded bg-pc-lightblue dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-highlight-blue/80 focus:border-2 transition-colors duration-200"
/>
</div>
</div>