e-volusian/surfingkeys_rc.js

## surfingkeys_rc.js
// ================================================== Hint styles
var hints_css = `
border: 2px solid black;
background: initial;
background-color: red; /* test */
color: black;
padding-top: 2px;
padding-right: 3px;
padding-left: 3px;
letter-spacing: 1px;
font-family: Inconsolata, Cousine, Fira Code, Consolas;
font-size: 2em;
`;
/*
var hints_css = `
border: 1px solid black;
color: black;
background: initial;
background-color: yellow;
padding: 1px 1px 1px 3px;
font-size: 13px;
letter-spacing: 1.5px;
`;
*/
Hints.style(hints_css);

// ================================================== General settings
settings.hintAlign="left";
// settings.focusFirstCandidate=true;
map('F', 'gf');
settings.clickableSelector = 'summary';
settings.omnibarMaxResults = 9;
settings.startToShowEmoji = 99; // effectively turns this feature off

// ================================================== Keymaps
mapkey(';j', '#12Close Downloads Shelf', () => {
    RUNTIME("closeDownloadsShelf",
    {clearHistory: true});
});

// an example to create a new mapping `ctrl-y`
mapkey('<Ctrl-y>', 'Show me the money', () => {
    Front.showPopup('It works. ESC to close');
});

// an example to replace `T` with `gt`
// Check `Default mappings` to see how `T` works.
map('gt', 'T');

// an example to remove mapkey `Ctrl-i`
unmap('<Ctrl-i>');

/*
general structure of surfingkeys elements
tested against https://blank.org

<html>                    <!-- of original url -->
  <head>                  <!-- of original url -->
  <body>                  <!-- of original url -->
  <div>                   <! -- surfingkeys -->
    #shadow-root          <! --      |      -->
    <iframe>              <! --      |      -->
      #document           <! --      |      -->
      <html>              <! --      ∨      -->
        <head>
        <body>
          <div id="sk_omnibar">
          <div id="sk_status">
          <div id="sk_usage">
          <div id="sk_popup">
          <div id="sk_editor">
          <div id="sk_tabs">
          <div id="sk_banner">
          <div id="sk_bubble">
          <div id="sk_keystroke">
*/

// set theme
settings.theme = `
body {
    float: left;
    position: relative;
    left: 50%;
}
.sk_theme {
    font-family: Inconsolata, Cousine, Fira Code, Consolas;
    font-size: 1.25em;
    background: rgba(0,0,0,0.9);
    color: white;
    --main-fg-highlight-color: yellow;
}
.sk_theme kbd {
    font-size: 1.25em;
    padding: 7px 4px 10px 7px;
    margin: 3px 6px;
    border-radius: 5px;
    background: rgba(0,0,0,0);
    color: white;
    letter-spacing: 3px;
}
.sk_theme .annotation {
    color: white;
}
#sk_keystroke {
    float: left;
    position: relative;
    left: -50%;
    /* border: 9px groove DeepPink; */
}
#sk_keystroke > div {
    border-bottom: 1px solid rgb(33,33,33);
}
#sk_popup {
    /* as created by Front.showPopup() */
    width: 50%;
    left: 25%;
    top: 33%;
    background: yellow;
    border: 9px groove DeepPink;
}
.sk_theme #sk_omnibarSearchResult>ul>li:nth-child(odd) {
    background: rgba(0,0,0,0);
}

#sk_omnibarSearchResult li div.url {
    color: gray;
}
.sk_theme .separator {
    color: yellow;
}
.sk_theme input {
    background: rgba(0,0,0,0);
    color: gainsboro;
    padding-left: 5px;
}
.sk_theme #sk_omnibarSearchResult>ul>li.focused {
    background: rgba(119,136,153,0.4);
}
.sk_theme .omnibar_folder {
    color: SteelBlue;
}
.sk_theme .omnibar_highlight {
    color: gold;
}
#sk_keystroke > div > span.kbd-span > kbd > span {
    color: coral;
}
#sk_status {
    color: gold;
    font-size: 1.25em;
    padding-top: .25em;
    padding-right: 7px;
    padding-bottom: .25em;
    padding-left: 2px;
    bottom: unset;
    float: left;
    position: relative;
    left: -50%;
    border-radius: 0px 0px 4px 4px;
}
#sk_status > span:nth-child(1) {
    padding-right: 11px !important;
    font-size: 1.35em;
}
#sk_status > span:nth-child(2) {
    padding-left: 0px !important;
}
#sk_find {
    width: 400px;
}
`;
// click `Save` button to make above settings to take effect.
	// ================================================== Hint styles
	var hints_css = `
	border: 2px solid black;
	background: initial;
	background-color: red; /* test */
	color: black;
	padding-top: 2px;
	padding-right: 3px;
	padding-left: 3px;
	letter-spacing: 1px;
	font-family: Inconsolata, Cousine, Fira Code, Consolas;
	font-size: 2em;
	`;
	/*
	var hints_css = `
	border: 1px solid black;
	color: black;
	background: initial;
	background-color: yellow;
	padding: 1px 1px 1px 3px;
	font-size: 13px;
	letter-spacing: 1.5px;
	`;
	*/
	Hints.style(hints_css);

	// ================================================== General settings
	settings.hintAlign="left";
	// settings.focusFirstCandidate=true;
	map('F', 'gf');
	settings.clickableSelector = 'summary';
	settings.omnibarMaxResults = 9;
	settings.startToShowEmoji = 99; // effectively turns this feature off

	// ================================================== Keymaps
	mapkey(';j', '#12Close Downloads Shelf', () => {
	RUNTIME("closeDownloadsShelf",
	{clearHistory: true});
	});

	// an example to create a new mapping `ctrl-y`
	mapkey('<Ctrl-y>', 'Show me the money', () => {
	Front.showPopup('It works. ESC to close');
	});

	// an example to replace `T` with `gt`
	// Check `Default mappings` to see how `T` works.
	map('gt', 'T');

	// an example to remove mapkey `Ctrl-i`
	unmap('<Ctrl-i>');

	/*
	general structure of surfingkeys elements
	tested against https://blank.org

	<html> <!-- of original url -->
	<head> <!-- of original url -->
	<body> <!-- of original url -->
	<div> <! -- surfingkeys -->
	#shadow-root <! -- \| -->
	<iframe> <! -- \| -->
	#document <! -- \| -->
	<html> <! -- ∨ -->
	<head>
	<body>
	<div id="sk_omnibar">
	<div id="sk_status">
	<div id="sk_usage">
	<div id="sk_popup">
	<div id="sk_editor">
	<div id="sk_tabs">
	<div id="sk_banner">
	<div id="sk_bubble">
	<div id="sk_keystroke">
	*/

	// set theme
	settings.theme = `
	body {
	float: left;
	position: relative;
	left: 50%;
	}
	.sk_theme {
	font-family: Inconsolata, Cousine, Fira Code, Consolas;
	font-size: 1.25em;
	background: rgba(0,0,0,0.9);
	color: white;
	--main-fg-highlight-color: yellow;
	}
	.sk_theme kbd {
	font-size: 1.25em;
	padding: 7px 4px 10px 7px;
	margin: 3px 6px;
	border-radius: 5px;
	background: rgba(0,0,0,0);
	color: white;
	letter-spacing: 3px;
	}
	.sk_theme .annotation {
	color: white;
	}
	#sk_keystroke {
	float: left;
	position: relative;
	left: -50%;
	/* border: 9px groove DeepPink; */
	}
	#sk_keystroke > div {
	border-bottom: 1px solid rgb(33,33,33);
	}
	#sk_popup {
	/* as created by Front.showPopup() */
	width: 50%;
	left: 25%;
	top: 33%;
	background: yellow;
	border: 9px groove DeepPink;
	}
	.sk_theme #sk_omnibarSearchResult>ul>li:nth-child(odd) {
	background: rgba(0,0,0,0);
	}

	#sk_omnibarSearchResult li div.url {
	color: gray;
	}
	.sk_theme .separator {
	color: yellow;
	}
	.sk_theme input {
	background: rgba(0,0,0,0);
	color: gainsboro;
	padding-left: 5px;
	}
	.sk_theme #sk_omnibarSearchResult>ul>li.focused {
	background: rgba(119,136,153,0.4);
	}
	.sk_theme .omnibar_folder {
	color: SteelBlue;
	}
	.sk_theme .omnibar_highlight {
	color: gold;
	}
	#sk_keystroke > div > span.kbd-span > kbd > span {
	color: coral;
	}
	#sk_status {
	color: gold;
	font-size: 1.25em;
	padding-top: .25em;
	padding-right: 7px;
	padding-bottom: .25em;
	padding-left: 2px;
	bottom: unset;
	float: left;
	position: relative;
	left: -50%;
	border-radius: 0px 0px 4px 4px;
	}
	#sk_status > span:nth-child(1) {
	padding-right: 11px !important;
	font-size: 1.35em;
	}
	#sk_status > span:nth-child(2) {
	padding-left: 0px !important;
	}
	#sk_find {
	width: 400px;
	}
	`;
	// click `Save` button to make above settings to take effect.