e-volusian · July 3, 2019 19:52
diff --git a/surfingkeys_rc.js b/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.