✨ feat(browser): surfing keys theme update; now uses catppuccin macchiato
This commit is contained in:
Sergio Laín
parent
9f633ee690
commit
6fbb677466
1 changed files with 261 additions and 17 deletions
|
|
@ -1,3 +1,29 @@
|
|||
// Compatibility Prefix
|
||||
const {
|
||||
Clipboard,
|
||||
Front,
|
||||
Hints,
|
||||
Normal,
|
||||
RUNTIME,
|
||||
Visual,
|
||||
aceVimMap,
|
||||
addSearchAlias,
|
||||
cmap,
|
||||
getClickableElements,
|
||||
imap,
|
||||
imapkey,
|
||||
iunmap,
|
||||
map,
|
||||
mapkey,
|
||||
readText,
|
||||
removeSearchAlias,
|
||||
tabOpenLink,
|
||||
unmap,
|
||||
unmapAllExcept,
|
||||
vmapkey,
|
||||
vunmap,
|
||||
} = api;
|
||||
|
||||
// an example to create a new mapping `ctrl-y`
|
||||
api.mapkey("<ctrl-y>", "Show me the money", function () {
|
||||
Front.showPopup(
|
||||
|
|
@ -5,6 +31,15 @@ api.mapkey("<ctrl-y>", "Show me the money", function () {
|
|||
);
|
||||
});
|
||||
|
||||
// toggle fullscreen, mainly because of YouTube
|
||||
mapkey("F", "Fullscreen", function () {
|
||||
if (window.fullScreen) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
});
|
||||
|
||||
// an example to replace `T` with `gt`, click `Default mappings` to see how `T` works.
|
||||
api.map("gt", "T");
|
||||
|
||||
|
|
@ -12,41 +47,250 @@ api.map("gt", "T");
|
|||
api.unmap("<ctrl-i>");
|
||||
|
||||
// set theme
|
||||
Hints.style(
|
||||
"border: solid 2px #6e738d; color:#c6a0f6; font-size: 12px; background: initial; background-color: #1e2030;",
|
||||
);
|
||||
Hints.style(
|
||||
"border: solid 2px #6e738d !important; padding: 1px !important; color: #939ab7 !important; background: #181926 !important;",
|
||||
"text",
|
||||
);
|
||||
Visual.style("marks", "background-color: #ed8796;");
|
||||
Visual.style("cursor", "background-color: #8aadf4;");
|
||||
|
||||
settings.theme = `
|
||||
/* Edit these variables for easy theme making */
|
||||
:root {
|
||||
/* Font */
|
||||
--font: 'JetBrainsMono Nerd Font';
|
||||
--font-size: 12;
|
||||
--font-weight: bold;
|
||||
|
||||
--fg: #cad3f5;
|
||||
--bg: #24273a;
|
||||
--bg-dark: #1e2030;
|
||||
--border: #6e738d;
|
||||
--main-fg: #cad3f5;
|
||||
--accent-fg: #b7bdf8;
|
||||
--info-fg: #ed8796;
|
||||
--select: #494d64;
|
||||
}
|
||||
|
||||
/* ---------- Generic ---------- */
|
||||
.sk_theme {
|
||||
font-family: JetBrainsMono Nerd Font;
|
||||
font-size: 10pt;
|
||||
background: #24273a;
|
||||
color: #cad3f5;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
background-color: var(--bg);
|
||||
border-color: var(--border);
|
||||
font-family: var(--font);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: var(--font);
|
||||
font-weight: var(--font-weight);
|
||||
}
|
||||
|
||||
.sk_theme tbody {
|
||||
color: #cad3f5;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.sk_theme input {
|
||||
color: #d0d0d0;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
/* Hints */
|
||||
#sk_hints .begin {
|
||||
color: var(--accent-fg) !important;
|
||||
}
|
||||
|
||||
#sk_tabs .sk_tab {
|
||||
background: var(--bg-dark);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
#sk_tabs .sk_tab_title {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
#sk_tabs .sk_tab_url {
|
||||
color: var(--main-fg);
|
||||
}
|
||||
|
||||
#sk_tabs .sk_tab_hint {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--accent-fg);
|
||||
}
|
||||
|
||||
.sk_theme #sk_frame {
|
||||
background: var(--bg);
|
||||
opacity: 0.2;
|
||||
color: var(--accent-fg);
|
||||
}
|
||||
|
||||
/* ---------- Omnibar ---------- */
|
||||
/* Uncomment this and use settings.omnibarPosition = 'bottom' for Pentadactyl/Tridactyl style bottom bar */
|
||||
/* .sk_theme#sk_omnibar {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
} */
|
||||
|
||||
.sk_theme .title {
|
||||
color: var(--accent-fg);
|
||||
}
|
||||
|
||||
.sk_theme .url {
|
||||
color: #61afef;
|
||||
color: var(--main-fg);
|
||||
}
|
||||
|
||||
.sk_theme .annotation {
|
||||
color: #56b6c2;
|
||||
color: var(--accent-fg);
|
||||
}
|
||||
|
||||
.sk_theme .omnibar_highlight {
|
||||
color: #528bff;
|
||||
color: var(--accent-fg);
|
||||
}
|
||||
|
||||
.sk_theme .omnibar_timestamp {
|
||||
color: #e5c07b;
|
||||
color: var(--info-fg);
|
||||
}
|
||||
|
||||
.sk_theme .omnibar_visitcount {
|
||||
color: #98c379;
|
||||
color: var(--accent-fg);
|
||||
}
|
||||
|
||||
.sk_theme #sk_omnibarSearchResult ul li:nth-child(odd) {
|
||||
background: #303030;
|
||||
background: var(--bg-dark);
|
||||
}
|
||||
|
||||
.sk_theme #sk_omnibarSearchResult ul li.focused {
|
||||
background: #3e4452;
|
||||
background: var(--border);
|
||||
}
|
||||
#sk_status, #sk_find {
|
||||
font-size: 20pt;
|
||||
}`;
|
||||
// click `Save` button to make above settings to take effect.</ctrl-i></ctrl-y>
|
||||
|
||||
.sk_theme #sk_omnibarSearchArea {
|
||||
border-top-color: var(--border);
|
||||
border-bottom-color: var(--border);
|
||||
}
|
||||
|
||||
.sk_theme #sk_omnibarSearchArea input,
|
||||
.sk_theme #sk_omnibarSearchArea span {
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
.sk_theme .separator {
|
||||
color: var(--accent-fg);
|
||||
}
|
||||
|
||||
/* ---------- Popup Notification Banner ---------- */
|
||||
#sk_banner {
|
||||
font-family: var(--font);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
background: var(--bg);
|
||||
border-color: var(--border);
|
||||
color: var(--fg);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* ---------- Popup Keys ---------- */
|
||||
#sk_keystroke {
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
.sk_theme kbd .candidates {
|
||||
color: var(--info-fg);
|
||||
}
|
||||
|
||||
.sk_theme span.annotation {
|
||||
color: var(--accent-fg);
|
||||
}
|
||||
|
||||
/* ---------- Popup Translation Bubble ---------- */
|
||||
#sk_bubble {
|
||||
background-color: var(--bg) !important;
|
||||
color: var(--fg) !important;
|
||||
border-color: var(--border) !important;
|
||||
}
|
||||
|
||||
#sk_bubble * {
|
||||
color: var(--fg) !important;
|
||||
}
|
||||
|
||||
#sk_bubble div.sk_arrow div:nth-of-type(1) {
|
||||
border-top-color: var(--border) !important;
|
||||
border-bottom-color: var(--border) !important;
|
||||
}
|
||||
|
||||
#sk_bubble div.sk_arrow div:nth-of-type(2) {
|
||||
border-top-color: var(--bg) !important;
|
||||
border-bottom-color: var(--bg) !important;
|
||||
}
|
||||
|
||||
/* ---------- Search ---------- */
|
||||
#sk_status,
|
||||
#sk_find {
|
||||
font-size: var(--font-size);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.sk_theme kbd {
|
||||
background: var(--bg-dark);
|
||||
border-color: var(--border);
|
||||
box-shadow: none;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.sk_theme .feature_name span {
|
||||
color: var(--main-fg);
|
||||
}
|
||||
|
||||
/* ---------- ACE Editor ---------- */
|
||||
#sk_editor {
|
||||
background: var(--bg-dark) !important;
|
||||
height: 50% !important;
|
||||
/* Remove this to restore the default editor size */
|
||||
}
|
||||
|
||||
.ace_dialog-bottom {
|
||||
border-top: 1px solid var(--bg) !important;
|
||||
}
|
||||
|
||||
.ace-chrome .ace_print-margin,
|
||||
.ace_gutter,
|
||||
.ace_gutter-cell,
|
||||
.ace_dialog {
|
||||
background: var(--bg) !important;
|
||||
}
|
||||
|
||||
.ace-chrome {
|
||||
color: var(--fg) !important;
|
||||
}
|
||||
|
||||
.ace_gutter,
|
||||
.ace_dialog {
|
||||
color: var(--fg) !important;
|
||||
}
|
||||
|
||||
.ace_cursor {
|
||||
color: var(--fg) !important;
|
||||
}
|
||||
|
||||
.normal-mode .ace_cursor {
|
||||
background-color: var(--fg) !important;
|
||||
border: var(--fg) !important;
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
.ace_marker-layer .ace_selection {
|
||||
background: var(--select) !important;
|
||||
}
|
||||
|
||||
.ace_editor,
|
||||
.ace_dialog span,
|
||||
.ace_dialog input {
|
||||
font-family: var(--font);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue