Update CSS Styling #186
Update CSS Styling #186
Conversation
death7654
force-pushed
the
darkmode
branch
2 times, most recently
from
b3d059c to
99b9098
Compare
|
Is it possible to bypass Lint checks for this PR as, it is only a CSS update, and not added content |
|
Checks dont block merge |
-Make Dark Mode Darker -Add A Placeholder To The Search Bar In `Supported Devices` -Match Search Bar Styling to Nav Search Bar in `Supported Devices` -Make Danger Tip Have Better Contrast -Make Nav Items Larger for better Accessibility -Change Code Snippet Colors for better contrast
| @@ -40,7 +40,7 @@ If you're on a smaller screen, scroll sideways to see whole table. | |||
| ::: | |||
|
|
|||
| <AddScript script-url="../../supported-devices.js"/> | |||
| <p>Search: <input type="text" class="deviceSearch"></p> | |||
| <p><input type="text" class="deviceSearch" placeholder="Enter Your Boardname Or Device Name"></p> | |||
There was a problem hiding this comment.
removing the 'Search' prefix, coupled with the css color changes, makes it almost impossible to tell that there is a search bar there now:
the old version was much better:
There was a problem hiding this comment.
I can change the bg and make it pop more
There was a problem hiding this comment.
it's one example of a larger problem IMO. I don't know what issue this PR is trying to solve
There was a problem hiding this comment.
The field and text are a accessibility issue aswell due to missing contrast
|
the CSS changes here overall reduce the contrast between elements in dark mode, making things harder to see. I can't say I'm a fan at all. |
|
Is this a reference to the search bar or the website as a whole? |
both. What is the goal of the CSS changes in this PR? |
| .sidebar::-webkit-scrollbar { | ||
| width: 0%; | ||
| height: 0%; | ||
|
|
There was a problem hiding this comment.
Why no scrollbar (in the first place)? This is a accessibility issue...
| @@ -40,7 +40,7 @@ If you're on a smaller screen, scroll sideways to see whole table. | |||
| ::: | |||
|
|
|||
| <AddScript script-url="../../supported-devices.js"/> | |||
| <p>Search: <input type="text" class="deviceSearch"></p> | |||
| <p><input type="text" class="deviceSearch" placeholder="Enter Your Boardname Or Device Name"></p> | |||
There was a problem hiding this comment.
The field and text are a accessibility issue aswell due to missing contrast
|
Closing because author declared absence in Discord |
-Make Dark Mode Darker
-Add A Placeholder To The Search Bar In
Supported Devices-Match Search Bar Styling to Nav Search Bar in
Supported Devices-Make Danger Tip Have Better Contrast
-Make Nav Items Larger for better Accessibility