klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 05:39:12 +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> <h1>Khoj</h1>
<!--Add Text Box To Enter Query, Trigger Incremental Search OnChange --> <!--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"> <div id="options">
<!--Add Dropdown to Select Query Type --> <!--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 --> <!--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 --> <!--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)"> <input type="number" id="results-count" min="1" max="100" value="6" placeholder="results count" onchange="setCountFieldInUrl(this)">
@@ -216,8 +216,8 @@
body { body {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
background: #eee; background: #f8fafc;
color: #888; color: #475569;
text-align: center; text-align: center;
font-family: roboto, karma, segoe ui, sans-serif; font-family: roboto, karma, segoe ui, sans-serif;
font-size: 20px; font-size: 20px;
@@ -230,7 +230,7 @@
} }
h1 { h1 {
font-weight: 200; font-weight: 200;
color: #888; color: #017eff;
} }
#options { #options {
@@ -241,7 +241,11 @@
#options > * { #options > * {
padding: 15px; padding: 15px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #ccc; border: 1px solid #475569;
background: #f9fafc
}
.option:hover {
box-shadow: 0 0 11px #aaa;
} }
#options > select { #options > select {
margin-right: 10px; margin-right: 10px;
@@ -268,7 +272,7 @@
.image { .image {
width: 20vw; width: 20vw;
border-radius: 10px; border-radius: 10px;
border: 1px solid #ccc; border: 1px solid #475569;
} }
#json { #json {
white-space: pre-wrap; white-space: pre-wrap;
@@ -296,16 +300,16 @@
padding: 3.5px 3.5px 0; padding: 3.5px 3.5px 0;
margin-right: 5px; margin-right: 5px;
border-radius: 5px; border-radius: 5px;
background-color: #ed6f00; background-color: #eab308;
font-size: medium; font-size: medium;
} }
span.music-task-status.todo, span.music-task-status.todo,
span.task-status.todo { span.task-status.todo {
background-color: #048ba8 background-color: #3b82f6
} }
span.music-task-status.done, span.music-task-status.done,
span.task-status.done { span.task-status.done {
background-color: #06a77d; background-color: #22c55e;
} }
span.music-task-tag, span.music-task-tag,
span.task-tag { span.task-tag {
@@ -313,7 +317,8 @@
padding: 3.5px 3.5px 0; padding: 3.5px 3.5px 0;
margin-right: 5px; margin-right: 5px;
border-radius: 5px; border-radius: 5px;
background-color: #bbb; border: 1px solid #475569;
background-color: #ef4444;
font-size: small; font-size: small;
} }
</style> </style>