Skip to content

Instantly share code, notes, and snippets.

@bennokress
Last active September 14, 2023 17:39
Show Gist options
  • Save bennokress/62591fd82713211d96a818bbbd3f001e to your computer and use it in GitHub Desktop.
Save bennokress/62591fd82713211d96a818bbbd3f001e to your computer and use it in GitHub Desktop.
Custom Cozy Theme for Kagi Search (based onthe version by James Lyons). Be sure to set the default Kagi themes to "Calm Blue" and "Moon Dark" for the themes to apply properly.
/* Remove Outline around selected items in the advanced search options */
.filter-item ._0_selected {
outline: 0px;
outline-offset: 0px;
}
/* Increase bottom below search result URLs */
.__sri-url-box {
padding-bottom: 4px;
}
/* Remove Preview Images in search results */
.__sri-body.--img .__sri-preview {
display: none;
}
.__sri-body.--img .__sri-desc:before {
height: 0px;
width: 0px;
}
/* Use IBM Plex Sans and Fira Code fonts when possible */
body {
font-family: IBMPlexSans, Inter, system-ui, sans-serif;
}
#help_modal .section-title,
.btn.--lg,
.button-primary,
.font-lufga,
.quick-settings-header__title,
.search-form #searchFormSubmitBtn,
.search-form .search-input-title,
.inlineHeader {
font-family: IBMPlexSans, Inter, system-ui, sans-serif;
}
:root {
--font-main: IBMPlexSans, Inter, system-ui, sans-serif;
--font-mono: FuraCodeNerdFontComplete-Light, FiraCode-Light, monospace;
}
/* Different Color for visited links */
div.app-content-box:not(.app-nav, .top-panel-box) a:visited,
div.main-content:not(.app-nav, .top-panel-box) a:visited {
color: var(--amber12);
}
/* The rest is taken from https://gist.github.com/jamesjlyons/26682982319ca84b7bee991eb158ce49 */
:root {
--sand1: hsl(50, 20%, 99%);
--sand2: hsl(60, 7.7%, 97.5%);
--sand3: hsl(59, 6.5%, 95.1%);
--sand4: hsl(58, 6.1%, 92.9%);
--sand5: hsl(57, 6%, 90.7%);
--sand6: hsl(56, 5.9%, 88.4%);
--sand7: hsl(55, 5.9%, 85.2%);
--sand8: hsl(51, 6%, 77.1%);
--sand9: hsl(50, 2%, 55.7%);
--sand10: hsl(55, 1.7%, 51.9%);
--sand11: hsl(50, 2%, 43.1%);
--sand12: hsl(50, 6%, 10%);
--amber1: hsl(39, 70%, 99%);
--amber2: hsl(40, 100%, 96.5%);
--amber3: hsl(44, 100%, 91.7%);
--amber4: hsl(43, 100%, 86.8%);
--amber5: hsl(42, 100%, 81.8%);
--amber6: hsl(38, 99.7%, 76.3%);
--amber7: hsl(36, 86.1%, 67.1%);
--amber8: hsl(35, 85.2%, 55.1%);
--amber9: hsl(39, 100%, 57%);
--amber10: hsl(35, 100%, 55.5%);
--amber11: hsl(30, 100%, 34%);
--amber12: hsl(20, 80%, 17%);
--background-color: var(--sand2);
--color-primary: var(--sand12);
--search-result-title: var(--color-primary);
--search-result-title-hover: var(--color-primary);
--result-item-title-border_hover: var(--color-primary);
--domain-rank-icon-color-normal: var(--sand7);
--search-result-date-bg: var(--sand3);
--search-result-content-text: var(--sand11);
--inline-domain-tag-bg: var(--sand3);
--result-item-title-border: var(--background-color);
--color-primary-dim_5: var(--sand11);
--inline-widget-bg: var(--sand3);
--search-result-date-new: var(--amber11);
--search-result-date-new-bg: var(--amber3);
--related-item-bg: var(--sand3);
--search-result-gap: 40px;
--m_sri_gap_color: var(--background-color);
}
@media (prefers-color-scheme: dark) {
:root {
--sand1: hsl(61, 2%, 8.3%);
--sand2: hsl(60, 3.7%, 10.6%);
--sand3: hsl(58, 3.7%, 13.1%);
--sand4: hsl(57, 3.6%, 15.3%);
--sand5: hsl(56, 3.7%, 17.4%);
--sand6: hsl(55, 3.7%, 19.9%);
--sand7: hsl(53, 3.7%, 23.6%);
--sand8: hsl(50, 3.8%, 30.6%);
--sand9: hsl(50, 4%, 42.7%);
--sand10: hsl(52, 3.1%, 48.3%);
--sand11: hsl(50, 4%, 61.8%);
--sand12: hsl(56, 4%, 92.8%);
--amber1: hsl(36, 100%, 6.1%);
--amber2: hsl(35, 100%, 7.6%);
--amber3: hsl(32, 100%, 10.2%);
--amber4: hsl(32, 100%, 12.4%);
--amber5: hsl(33, 100%, 14.6%);
--amber6: hsl(35, 100%, 17.1%);
--amber7: hsl(35, 91%, 21.6%);
--amber8: hsl(36, 100%, 25.5%);
--amber9: hsl(39, 100%, 57%);
--amber10: hsl(43, 100%, 64%);
--amber11: hsl(39, 90%, 49.8%);
--amber12: hsl(39, 97%, 93.2%);
}
}
._0_queryInfo {
margin-bottom: 24px;
}
.domain-favicon {
display: none;
}
.crisp-edges {
image-rendering: optimizespeed;
image-rendering: crisp_edges;
}
._0_img-results .item img.fade {
opacity: 0;
transition: none;
}
.quick-search-btn {
transition: transform 0.4s ease-in-out;
}
/* Hide the doggo mascot, clouds, beta tag, and footer */
.doggo-sit,
.cloud_1,
.cloud_2,
.app-beta-tag,
.footer {
display: none;
}
body {
color: var(--sand12);
background-color: var(--background-color);
}
.btn.--yellow {
background-color: var(--sand12);
border: 1px solid var(--sand12);
color: var(--sand1);
transition: ease 150ms;
}
.btn.--yellow:hover {
background-color: var(--sand11);
border: 1px solid var(--sand11);
}
#quickSettingsOpenBtn a {
color: var(--sand11);
background-color: var(--sand2);
border: 0px solid var(--sand7);
border-radius: 4px;
}
.search-form .search-input {
background-color: var(--sand3);
border-radius: 16px;
}
.search-form .search-input-container {
border: 1px solid var(--sand7);
background-color: var(--sand3);
box-shadow: 0 0 0 0px var(--sand4);
border-radius: 16px;
/* fix input text centering */
height: 50px;
transition: box-shadow 150ms;
}
.search-form .search-input-container:focus-within {
border: 1px solid var(--sand8);
box-shadow: 0 0 0 3px var(--sand4);
}
.search-form .search-form-icons {
background-color: var(--sand3);
}
.app-header .search-form .spt {
background: linear-gradient(90deg, transparent 0, var(--sand3) 100%);
}
.search-form .auto_suggestions {
border: 1px solid var(--sand8);
padding-top: 24px;
}
/* auto suggest on result page */
.auto_suggestions {
background-color: var(--sand3);
border-top: 0 !important;
}
.auto_suggestions .auto_item.highlighted {
background-color: var(--sand4);
}
.auto_suggestions .auto_suggestions_in {
border-top: 0px solid var(--sand7);
}
.auto_suggestions .auto_suggestions_lenses {
border-top: 1px solid var(--sand4);
}
/* auto suggest on landing page */
.search-form .autosugg-landing {
top: 108px;
}
.search-form {
align-items: center;
}
.landing-category-select {
width: auto;
position: absolute;
transform: translate(-50%, 50px);
left: 57%;
}
.landing_cat_buttons {
background-color: transparent;
}
._0_sri-highlight:before {
background: var(--amber9);
}
.related-items a {
color: var(--sand12);
}
.related-items a:hover {
background-color: var(--sand4);
color: var(--sand12);
}
._0_d_info_ranking.k_ui_btn_group input:checked + .box.k_ui_btn:before,
.box.--active:before,
.box._0_sri-w-highlight:before,
.box:hover:before {
border: 3px solid var(--amber7);
}
.k_ui_dropdown_data_list {
background-color: var(--sand3);
border: 1px solid var(--sand7);
}
.k_ui_dropdown_data_list a:hover {
background-color: var(--sand4);
}
/* menu button results page */
#accountContainer .menu-icon a {
color: var(--sand10);
border: 0px solid var(--sand7);
}
/* dropdown */
.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li.__hover,
.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:focus-visible,
.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover,
.k_ui_dropdown_data_list .list_items > a.__hover,
.k_ui_dropdown_data_list .list_items > a:focus-visible,
.k_ui_dropdown_data_list .list_items > a:hover,
.k_ui_dropdown_data_list .list_items > div.__hover,
.k_ui_dropdown_data_list .list_items > div:focus-visible,
.k_ui_dropdown_data_list .list_items > div:hover {
background-color: var(--sand5);
color: var(--dd-hover-color);
}
/* select button */
.k_ui_btn_group {
background-color: var(--sand3);
border: 1px solid var(--sand7);
border-radius: 8px;
display: flex;
font-size: 0.875rem;
}
.k_ui_btn_group .k_ui_btn:hover {
background-color: var(--sand4);
color: var(--sand12);
}
._0_d_info_ranking.k_ui_btn_group input:checked + .k_ui_btn,
.k_ui_btn_group .k_ui_btn.--active,
.k_ui_btn_group .k_ui_btn._0_sri-w-highlight.box {
background-color: var(--sand5);
color: var(--sand12);
}
.ranked-box-wrapper {
max-width: 420px;
background-color: var(--sand3);
border-radius: 5px;
width: 100vw;
box-shadow: 0 0 20px var(--ranked-box-shadow);
}
.d-info-box-title-header.--trackers {
background: linear-gradient(90deg, var(--amber10) 0.72%, var(--amber9) 100%);
}
.d-info-domain-title {
color: hsl(50, 6%, 10%);
text-shadow: none;
}
.d-info-body {
flex-wrap: wrap;
background-color: var(--sand2);
border-radius: 5px;
}
/* video */
.videoResultItem {
background-color: var(--sand2);
}
/* quick settings */
.quick-settings {
position: fixed;
transform: translateX(100%);
transition: transform 0.15s ease-in-out;
top: 0;
right: 0;
max-width: 450px;
height: 100%;
z-index: 102;
background-color: var(--sand2);
display: flex;
flex-direction: column;
border-left: 1px solid var(--sand6);
overflow: auto;
}
.quick-settings-region__dropdown {
width: 100%;
display: block;
background-color: var(--sand3);
border-radius: 5px;
}
.quick-settings-region__dropdown:hover {
background-color: var(--sand4);
}
.dropdown.dd-b .dd-list,
.dropdown.dd-b .dd-toggle-label,
.dropdown.dd-b .dd-toggle-label:before {
border: 1px solid var(--sand6);
}
.quick-settings-region__dropdown .dd-list {
background-color: var(--sand3) !important;
color: var(--color-primary) !important;
}
.quick-settings-region__dropdown .dd-list li.--hover,
.quick-settings-region__dropdown .dd-list li:hover {
background-color: var(--sand4) !important;
color: var(--color-primary) !important;
}
.dropdown .dd-list input[type="search"] {
background-color: var(--sand2);
border: 1px solid var(--sand4);
}
.dropdown .dd-list li.--hover,
.dropdown .dd-list li:hover {
color: var(--color-primary);
background-color: var(--sand3);
}
.dropdown .dd-toggle-label {
width: 100%;
height: inherit;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
color: var(--color-primary);
background-color: var(--sand4);
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
}
#mm-image .custom-date-range .input label input {
background-color: var(--sand3);
border: 1px solid var(--sand8);
border-radius: 8px;
}
.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar {
background-color: var(--color-primary);
}
.land_adv_search_btn {
text-decoration: none;
bottom: -4px;
right: 0;
transform: translateY(100%);
background-color: unset;
font-size: 0.875rem;
color: var(--sand8);
}
.search-form {
margin-left: auto;
margin-right: auto;
}
footer {
background-color: var(--sand4);
border-top: 1px solid var(--sand7);
}
/* assistant beta */
.search_mode_toggle i.oSea {
background-color: var(--sand12);
border: 1px solid var(--sand12);
color: var(--sand1);
transition: ease 150ms;
}
#search_mode_toggle:checked
+ .search-form
.search_mode_box
.search_mode_toggle
i.o2rb {
background-color: var(--sand12);
border: 1px solid var(--sand12);
color: var(--sand1);
transition: ease 150ms;
}
.search_mode_toggle i:hover {
background-color: var(--sand12) !important;
border: 1px solid var(--sand12) !important;
color: var(--sand1) !important;
}
/*transitions*/
.auto_suggestions {
transition: transform 300ms cubic-bezier(1, 0, 0, 1);
transform: scaleY(0);
}
.ranked-box-overlay {
position: absolute;
z-index: 1001;
visibility: hidden;
opacity: 0;
bottom: 0;
transform: scale(0.8);
transform-origin: left center;
transition: opacity 300ms cubic-bezier(1, 0, 0, 1),
transform 300ms cubic-bezier(1, 0, 0, 1),
left 300ms cubic-bezier(1, 0, 0, 1), top 300ms cubic-bezier(1, 0, 0, 1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment