klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-03 13:19:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve colors, fix contrast for accessability on web interface

Browse Source 
- Changes
  - Use blue color for khoj heading font
    - This fixes the title color issue

  - Update background to lighter shade
    - This fixes the body text color issue

  - Update colors for todo, done, miscellaneous todo state, tag color
    - This does not fix the color contrast issue but seems like an acceptable solution
    - Using white text rather than black text on blue background
      better even though the black text on blue background passes the
      WCAG acceptable contrast score
    - For details see blog post:
      https://uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/

  - Add border to tags to give them tag pills look and differntiate
    from todo states

  - Buttons and inputs
    - Change background color of input fields like type dropdown,
      update button and results count counter, to match background
      color of page
    - Add shadow on hover over button, dropdowns

Resolves #111
This commit is contained in:
Debanjum Singh Solanky
2023-01-12 21:59:50 -03:00
parent f0213d0a82
commit 34014635d0
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/interface/web/index.html
View File

@@ -173,14 +173,14 @@
<h1>Khoj</h1>
<!--Add Text Box To Enter Query, Trigger Incremental Search OnChange -->
<input type="text" id="query" onkeyup=incrementalSearch(event) autofocus="autofocus" placeholder="What is the meaning of life?">
<input type="text" id="query" class="option" onkeyup=incrementalSearch(event) autofocus="autofocus" placeholder="What is the meaning of life?">
<div id="options">
<!--Add Dropdown to Select Query Type -->
<select id="type" onchange="setTypeFieldInUrl(this)"></select>
<select id="type" class="option" onchange="setTypeFieldInUrl(this)"></select>
<!--Add Button To Regenerate -->
<button id="update" onclick="updateIndex()">Update</button>
<button id="update" class="option" onclick="updateIndex()">Update</button>
<!--Add Results Count Input To Set Results Count -->
<input type="number" id="results-count" min="1" max="100" value="6" placeholder="results count" onchange="setCountFieldInUrl(this)">
@@ -216,8 +216,8 @@
body {
padding: 0px;
margin: 0px;
background: #eee;
color: #888;
background: #f8fafc;
color: #475569;
text-align: center;
font-family: roboto, karma, segoe ui, sans-serif;
font-size: 20px;
@@ -230,7 +230,7 @@
}
h1 {
font-weight: 200;
color: #888;
color: #017eff;
}
#options {
@@ -241,7 +241,11 @@
#options > * {
padding: 15px;
border-radius: 5px;
border: 1px solid #ccc;
border: 1px solid #475569;
background: #f9fafc
}
.option:hover {
box-shadow: 0 0 11px #aaa;
}
#options > select {
margin-right: 10px;
@@ -268,7 +272,7 @@
.image {
width: 20vw;
border-radius: 10px;
border: 1px solid #ccc;
border: 1px solid #475569;
}
#json {
white-space: pre-wrap;
@@ -296,16 +300,16 @@
padding: 3.5px 3.5px 0;
margin-right: 5px;
border-radius: 5px;
background-color: #ed6f00;
background-color: #eab308;
font-size: medium;
}
span.music-task-status.todo,
span.task-status.todo {
background-color: #048ba8
background-color: #3b82f6
}
span.music-task-status.done,
span.task-status.done {
background-color: #06a77d;
background-color: #22c55e;
}
span.music-task-tag,
span.task-tag {
@@ -313,7 +317,8 @@
padding: 3.5px 3.5px 0;
margin-right: 5px;
border-radius: 5px;
background-color: #bbb;
border: 1px solid #475569;
background-color: #ef4444;
font-size: small;
}
</style>