brookhong · Evilur · May 4, 2025 · May 4, 2025 · May 3, 2025 · May 3, 2025
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -100,6 +100,10 @@ module.exports = (env, argv) => {
     const module1Plugins = [
         new CopyWebpackPlugin({
             patterns: [
+                { from: 'src/custom_css/iframe', to: 'custom_css' },
+                { from: 'src/custom_css/colors.css', to: 'custom_css' },
+                { from: 'src/custom_css/iframe.css', to: 'custom_css' },
+                { from: 'src/custom_css/master_body', to: 'custom_css' },
                 { from: 'src/pages', to: 'pages', globOptions: pagesCopyOptions },
                 { from: 'src/content_scripts/ui/frontend.html', to: 'pages' },
                 { from: 'src/content_scripts/ui/frontend.css', to: 'pages' },

diff --git a/src/content_scripts/common/hints.js b/src/content_scripts/common/hints.js
@@ -44,32 +44,30 @@ function createRegionalHints(clipboard) {
     regionalHintsHost.className = "surfingkeys_hints_host";
     regionalHintsHost.attachShadow({ mode: 'open' });
     const hintsStyle = createElementWithContent('style', `
-div.menu {
-    font-size: 14px;
-    color: #fff;
-}
-div.menu-item {
-    display: inline-block;
-    padding: 4px;
-    margin: 4px;
-    background: #454545;
-    box-shadow: inset 0 -1px 0 #bbb;
-    border-radius: 3px;
-    font-size: 14px;
+div {
+    position: absolute;
+    display: block;
+    font-family: 'Noto Sans Mono', monospace;
+    font-weight: 600;
+    font-style: normal;
+    font-size: 15.25px;
+    color: #f8f8f2;
+    background: #282a36;
+    border: solid 2px #44475a;
+    border-radius: 5px;
+    padding: 0 0.3em 0.05em;
+    user-select: none;
+    letter-spacing: 1px;
+    width: auto;
+    height: auto;
+    box-shadow: 1px 1px 10px 2px #0005;
 }
-kbd {
-    white-space: nowrap;
-    display: inline-block;
-    padding: 3px 5px;
-    font: 14px Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    line-height: 10px;
-    vertical-align: middle;
-    border: solid 1px #ccc;
-    border-bottom-color: #bbb;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #bbb;
-    margin-right: 4px;
+div > span {
+    opacity: 1 !important;
+    color: #6272a4 !important;
 }
+div:empty {
+    display: none;
 `);
     regionalHintsHost.shadowRoot.appendChild(hintsStyle);
 

diff --git a/src/content_scripts/ui/frontend.html b/src/content_scripts/ui/frontend.html
@@ -4,6 +4,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <link rel="stylesheet" href="frontend.css">
     <link rel="stylesheet" href="../content.css">
+    <link rel="stylesheet" href="../custom_css/iframe.css">
 </head>
 <body>
     <style id="sk_theme">

diff --git a/src/custom_css/colors.css b/src/custom_css/colors.css
@@ -0,0 +1,10 @@
+html {
+    --sk-foreground: #f8f8f2;
+    --sk-background: #282a36;
+    --sk-selection:  #44475a;
+    --sk-comment:    #6272a4;
+    --sk-red:        #ff4064;
+    --sk-blue:       #5389fc;
+    --sk-green:      #23e863;
+    --sk-purple:     #cd29ff;
+}
diff --git a/src/custom_css/iframe.css b/src/custom_css/iframe.css
@@ -0,0 +1,8 @@
+@import url('colors.css');
+@import url('general.css');
+@import url('omnibar.css');
+@import url('status.css');
+@import url('banner.css');
+@import url('popup.css');
+@import url('keystroke.css');
+@import url('usage.css');
diff --git a/src/custom_css/iframe/banner.css b/src/custom_css/iframe/banner.css
@@ -0,0 +1,4 @@
+#sk_banner {
+    border-top: none !important;
+    border-radius: 0 0 5px 5px !important;
+}
diff --git a/src/custom_css/iframe/general.css b/src/custom_css/iframe/general.css
@@ -0,0 +1,36 @@
+body * {
+    background-color: transparent !important;
+    color: var(--sk-foreground) !important;
+    user-select: none !important;
+    padding: 0 !important;
+    outline: none !important;
+    margin: 0 !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    font-family: 'Noto Sans', sans-serif !important;
+    font-style: normal !important;
+}
+body kbd {
+    border-radius: 4px !important;
+    background-color: var(--sk-selection) !important;
+    padding: 0 0.3em 0.1em !important;
+    line-height: unset !important;
+    font-size: 16px !important;
+}
+body > div {
+    --border: 4px solid var(--sk-selection);
+    border: 4px solid var(--sk-selection) !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    box-shadow: #000c 0 2px 10px !important;
+    box-sizing: border-box !important;
+    opacity: 1 !important;
+    position: fixed !important;
+    background-color: var(--sk-background) !important;
+}
+
+#sk_status, #sk_popup, #sk_banner {
+    font-size: 20px !important;
+    padding: 0 0.3em 0.1em !important;
+}
diff --git a/src/custom_css/iframe/keystroke.css b/src/custom_css/iframe/keystroke.css
@@ -0,0 +1,15 @@
+#sk_keystroke {
+    border-radius: 5px 5px 0 0 !important;
+    border-bottom: 0 !important;
+    right: 15px !important;
+}
+#sk_keystroke:not(.expandRichHints) {
+    padding: 0 0.3em 0.1em !important;
+}
+#sk_keystroke > div {
+    margin: 5px 12px 5px 0 !important;
+}
+#sk_keystroke .kbd-span {
+    margin-right: 5px !important;
+    width: 45px !important;
+}
diff --git a/src/custom_css/iframe/omnibar.css b/src/custom_css/iframe/omnibar.css
@@ -0,0 +1,73 @@
+/* General */
+#sk_omnibar {
+    max-height: none !important;
+}
+#sk_omnibar.sk_omnibar_middle {
+    border-radius: 10px !important;
+}
+#sk_omnibar.sk_omnibar_bottom {
+    border-radius: 10px 10px 0 0 !important;
+    border-bottom: 0 !important;
+}
+
+/* Search Area */
+#sk_omnibarSearchArea {
+    padding: 5px 0 !important;
+}
+#sk_omnibarSearchArea > * {
+    font-size: 20px !important;
+}
+#sk_omnibarSearchArea > span {
+    margin: 0 5px !important;
+}
+#sk_omnibarSearchArea .prompt::first-letter {
+    text-transform: uppercase !important;
+}
+#sk_omnibarSearchArea .prompt:has(.separator)::after {
+    content: ':' !important;
+}
+#sk_omnibarSearchArea .prompt img {
+    display: block !important;
+    margin: 0 3px !important;
+}
+#sk_omnibarSearchArea .separator {
+    display: none !important;
+}
+
+/* Search Result */
+#sk_omnibar.sk_omnibar_middle #sk_omnibarSearchResult {
+    border-top: var(--border) !important;
+}
+#sk_omnibar.sk_omnibar_bottom #sk_omnibarSearchResult {
+    border-bottom: var(--border) !important;
+}
+#sk_omnibarSearchResult {
+    max-height: none !important;
+}
+#sk_omnibarSearchResult li {
+    padding: 7px 7px !important;
+    cursor: pointer !important;
+}
+#sk_omnibarSearchResult li:hover,
+#sk_omnibarSearchResult .focused {
+    background-color: var(--sk-selection) !important;
+}
+#sk_omnibarSearchResult .icon {
+    margin-left: 6px !important;
+    margin-right: 17px !important;
+}
+#sk_omnibarSearchResult .url {
+    font-weight: 400 !important;
+}
+#sk_omnibar .omnibar_timestamp {
+    display: none !important;
+}
+#sk_omnibar .omnibar_highlight {
+    color: var(--sk-red) !important;
+}
+#sk_omnibar .omnibar_folder {
+    color: var(--sk-green) !important;
+}
+#sk_omnibar .omnibar_visitcount {
+    color: var(--sk-blue) !important;
+}
diff --git a/src/custom_css/iframe/popup.css b/src/custom_css/iframe/popup.css
@@ -0,0 +1,4 @@
+#sk_popup {
+    border-radius: 5px !important;
+    text-align: center !important;
+}
diff --git a/src/custom_css/iframe/status.css b/src/custom_css/iframe/status.css
@@ -0,0 +1,13 @@
+#sk_status {
+    bottom: 0 !important;
+    right: 150px !important;
+    border-bottom: 0 !important;
+    border-radius: 5px 5px 0 0 !important;
+}
+#sk_status::first-letter {
+    text-transform: uppercase !important;
+}
+#sk_status input {
+    font-size: 20px !important;
+    width: 350px !important;
+}
diff --git a/src/custom_css/iframe/usage.css b/src/custom_css/iframe/usage.css
@@ -0,0 +1,44 @@
+/* General */
+#sk_usage {
+    display: flex;
+    flex-wrap: wrap !important;
+    gap: 4px;
+    border-radius: 10px !important;
+    background-color: var(--sk-selection) !important;
+}
+#sk_usage * {
+    font-size: 16px !important;
+}
+#sk_usage::-webkit-scrollbar {
+    display: none !important;
+}
+
+/* Info Block */
+#sk_usage > div {
+    background-color: var(--sk-background) !important;
+    min-width: 600px !important;
+    flex-basis: 0;
+    flex-grow: 1 !important;
+    padding: 10px 0 15px 0 !important;
+    box-sizing: border-box !important;
+}
+#sk_usage > div > div:not(.feature_name) {
+    display: grid !important;
+    grid-template-columns: 120px 1fr !important;
+    column-gap: 5px !important;
+    margin: 5px 50px 0 0 !important;
+}
+#sk_usage .annotation {
+    user-select: text !important;
+}
+#sk_usage .kbd-span {
+    width: 100% !important;
+}
+#sk_usage .feature_name * {
+    font-size: 20px !important;
+}
+
+/* More Help */
+#sk_usage > p {
+    display: none !important;
+}
diff --git a/src/custom_css/master_body/frame.css b/src/custom_css/master_body/frame.css
@@ -0,0 +1,8 @@
+#sk_frame {
+    border: none !important;
+    box-sizing: border-box !important;
+    background: var(--sk-background) !important;
+    opacity: 0.75 !important;
+    color: transparent !important;
+    font-size: 0 !important;
+}
diff --git a/src/manifest.json b/src/manifest.json
@@ -62,7 +62,9 @@
                 "content.js"
             ],
             "css": [
-                "content.css"
+                "content.css",
+                "custom_css/colors.css",
+                "custom_css/frame.css"
             ],
             "run_at": "document_start",
             "all_frames": true

diff --git a/src/pages/l10n.json b/src/pages/l10n.json
@@ -316,6 +316,7 @@
         "Enter ephemeral PassThrough mode to temporarily suppress SurfingKeys": "Включить временный режим PassThrough для отключения SurfingKeys",
         "Enter ephemeral normal mode to temporarily enable SurfingKeys": "Включить временный нормальный режим для активации SurfingKeys",
         "Enter normal mode": "Переключиться в нормальный режим",
+        "Enter regional Hints mode": "Войти в режим региональных подсказок",
         "Enter visual mode, and select whole element": "Переключиться в визуальный режим и выделить целый элемент",
         "Exit insert mode": "Выйти из режима вставки",
         "Expand selection to parent element": "Расширить выделение до родительского элемента",