search

gdh1995 / vimium-c

A keyboard shortcut browser extension for keyboard-based navigation and tab operations with an advanced omnibar
https://chrome.google.com/webstore/detail/vimium-c/hfjbmagddngcpeloejdejnfgbamkjaeg
Other
3.28k stars 252 forks source link

v2.11 for Chrome 下自定义 Vomnibar 主题不生效 #1170

Open lonelygo opened 1 month ago

lonelygo commented 1 month ago

接受权限警告后，重启浏览器，发现自定义的主题不生效了。 删除自定义 css 文件，重新复制进去还是不生效。 删除自定义主题，参考 Wiki 中de using custom CSS 的例子尝试验证问题在自己的 CSS 还是插件，发现无论如何修改都不生效。

ascodeasice commented 1 month ago

我自己是只有 omnibar 的主題不對，測試以後發現需要把 / #omni / 改成 / #omnibar */ 更改以後重開又會回到預設的主題

gdh1995 commented 1 month ago

没动什么叫做删除自定义 css 文件。 要不截图看看 自定义 css 里填的内容？

ZeusVS commented 1 month ago

I have the same issue, only the / omnibar / custom css isn't working/applying, the other custom css is applying as expected.

gdh1995 commented 1 month ago

Sorry it's indeed a bug of Vomnibar, and there's no way to work it around in v2.11 .

I'll fix it in days.

lonelygo commented 1 month ago

没动什么叫做删除自定义 css 文件。 要不截图看看 自定义 css 里填的内容？

我用的 Dracula vimium css，在这里Dracula Theme for Vimium

/*
Dracula theme for Vimium
by Trollwut (trollwut@trollwut.org). This code is in the public domain.
To use:
  1. Copy the code.
  2. Go to the Vimium options.
  3. Click Show Advanced Options.
  4. Under Advanced Options, scroll down to CSS for link hints.
  5. Paste the code in the text field.
  6. Click Save Changes.
  7. Go to the website of your choice (or, if you have it open already, reload it) and check out the results.
*/

/* Link hint boxes */
div > .vimiumHintMarker {
  background: #282a36;
  font-size: 12px;
  border: 0.25em solid #ffb86c;
  border-radius: 0.34em;
  box-shadow: 0em 0.1em 0.6em 0.1em rgba(0, 0, 0, 0.4);
}

/* Link hint text */
div > .vimiumHintMarker span {
  color: #f8f8f2;
  font-size: inherit;
  text-shadow: none;
}

/* Link hint matching characters */
div > .vimiumHintMarker > .matchingCharacter {
  color: #6272a4;
}

/* HUD ("heads-up display") bar */
div.vimiumHUD {
  background: #282a36;
  border: 1px solid #6272a4;
}

div.vimiumHUD .vimiumHUDSearchArea {
  background: #282a36;
}

div.vimiumHUD .hud-find {
  background: #282a36;
  border: none;
  color: #f8f8f2;
}

div.vimiumHUD span#hud-find-input{
  color: #f8f8f2;  /* 'Foreground' color */
}

div.vimiumHUD span#hud-match-count {
  color: #6272a4;  /* 'Comment' color */
}

div.vimiumHUD .vimiumHUDSearchAreaInner {
  color: #6272a4;  /* 'Comment' color */
}

#vomnibar{
    background-color: #44475A;
}

#vomnibar input {
  color: #f8f8f2;
  font: -moz-window;
  /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
  font-size: 20px;
  height: 34px;
  margin-bottom: 0;
  padding: 4px;
  background-color: #282a36;
  border-radius: 3px;
  border: 1px solid #6272a4;
  box-shadow: #bd93f9 0px 0px 1px;
  width: 100%;
  outline: none;
  box-sizing: border-box;
}

#vomnibar .vomnibarSearchArea {
  display: block;
  padding: 10px;
  background-color: #6272a4;
  border-radius: 4px 4px 0 0;
  border-bottom: 0px solid #bd93f9;
}

#vomnibar ul {
  background-color: #44475a;
  border-radius: 0 0 4px 4px;
  list-style: none;
  padding-top: 0;
  padding-bottom: 0;
  margin-block-start: 2px;
  margin-block-end: 0px;
}

#vomnibar li {
  border-bottom: 1px solid #6272a4;
  line-height: 1.1em;
  padding: 7px 10px;
  font-size: 16px;
  color: #f8f8f2;
  position: relative;
  display: list-item;
  margin: auto;
}

#vomnibar li .vomnibarBottomHalf {
  font-size: 15px;
  margin-top: 3px;
  padding: 2px 0;
}

#vomnibar li .vomnibarSource {
  color: #bd93f9;
  margin-right: 4px;
}
#vomnibar li .vomnibarRelevancy {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px;
  background-color: #282a36;
  color: #f8f8f2;
  font-family: monospace;
  width: 100px;
  overflow: hidden;
}

#vomnibar li .vomnibarUrl {
  white-space: nowrap;
  color: #50fa7b;
}

#vomnibar li .vomnibarMatch {
  font-weight: bold;
  color: #ffb86c;
}

#vomnibar li em, #vomnibar li .vomnibarTitle {
  color: #f8f8f2;
  margin-left: 4px;
  font-weight: normal;
}
#vomnibar li em { font-style: italic; }
#vomnibar li em .vomnibarMatch, #vomnibar li .vomnibarTitle .vomnibarMatch {
  color: #ffb86c;
}

#vomnibar li.vomnibarSelected {
  background-color: #6272a4;
  font-weight: normal;
}

#vomnibarInput::selection {
  background-color: #8be9fd;
}
gdh1995 commented 1 month ago

@lonelygo 也许你某个地方理解错了。你给出的 CSS 样式代码都是 Vimium 的，不是 Vimium C 的，所以不会生效。

如果你浏览器同时安装了 Vimium 和 Vimium C，那可能是扩展加载顺序变了，比如你之前一直在用 Vimium 的功能，但最近由于什么导致 Vimium C 更早加载、按 F 和 O 显示出了 Vimium C 的界面。

ascodeasice commented 1 month ago

這是我的 css https://github.com/ascodeasice/vimium-c-one-dark-pro

/* #ui */
* {
/*insertroot*/
  --font-size: 17px;
  --font-size-link: 14px;
  --font-weight: normal;
  --font: "Source Code Pro",Consolas, sans;
  --padding: 0px;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  /* ----------  DAY THEME  ---------- */
  --bg: #fdf0ee;
  --fg: #000000;
  --accent-fg: #ececec;
  --border: #ececec;
  --title: #000000;
  --title-accent: #E5C07B;
  --link: #BE5046;
  --link-accent: #C678DD;

  /* ---------- NIGHT THEME ---------- */
  --nbg: #282C34;
  --nfg: #ABB2BF;
  --naccent-fg: #404859; /* not actual color in one dark pro, just bg with slightly more blue */
  --nborder: #E5C07B;
  --nlhbg: #D19A66; /* night link hint background */
  --nlhfg: #000000; /* night link hint foreground */
  --ntitle: #ABB2BF;
  --ntitle-accent: #D19A66;
  --nlink: #BE5046;
  --nlink-accent: #C678DD;

  font-family: var(--font);
  font-size: var(--font-size-link);
}

/* HUD */
.HUD {
  border-radius: 3px;
  text-transform: lowercase;
  color: var(--title);
  max-width: 420px;
  min-width: unset;
  line-height: 20px;
  align-items: center;
  padding: 10px;
}

.HUD.D {
  color: var(--ntitle);
}

.HUD:after {
  background: var(--bg);
  border: var(--border);
}

.HUD.D:after {
  background: var(--nbg);
  border: var(--nborder);
}

.HUD.UI {
  min-width: 380px;
  align-items: unset;
}

/* HINTS */
.LH {
  color: var(--fg);
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: var(--shadow);
}

.D .LH {
  color: var(--nlhfg);
  border: 1px solid var(--nborder);
  background: var(--nlhbg);
  box-shadow: var(--shadow);
}

.MC {
  color: var(--title);
}

.D .MC {
  color: var(--ntitle);
}

/* #omni */
* {
/*insertroot*/
  --font-size: 17px;
  --font-size-link: 14px;
  --font-weight: normal;
  --font: "Source Code Pro",Consolas, sans;
  --padding: 0px;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  /* ----------  DAY THEME  ---------- */
  --bg: #fdf0ee;
  --fg: #000000;
  --accent-fg: #ececec;
  --border: #ececec;
  --title: #000000;
  --title-accent: #E5C07B;
  --link: #BE5046;
  --link-accent: #C678DD;

  /* ---------- NIGHT THEME ---------- */
  --nbg: #282C34;
  --nfg: #ABB2BF;
  --naccent-fg: #404859; /* not actual color in one dark pro, just bg with slightly more blue */
  --nborder: #E5C07B;
  --nlhbg: #D19A66; /* night link hint background */
  --nlhfg: #000000; /* night link hint foreground */
  --ntitle: #ABB2BF;
  --ntitle-accent: #D19A66;
  --nlink: #BE5046;
  --nlink-accent: #C678DD;

  font-family: var(--font);
  /*font-size: var(--font-size);*/
}

body {
  animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
  box-shadow: var(--shadow);
}

body.has-dark{

}

/* Animate Slide in */
@keyframes show {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#toolbar {
  top: 10px;
  right: 14px;
  opacity: 0;
}

#toolbar:hover {
  opacity: 1;
}

#bar, #input, #list {
  background: var(--bg);
  font-weight: var(--font-weight);
}

.has-dark #bar, .has-dark #input, .has-dark #list {
  background: var(--nbg);
}

#bar{
  padding: 10px;
/*padding: var(--padding);*/
  border-bottom: none;
}

#bar::before{
/*for hint or content icon before typing*/
  content: "➤";
  position: absolute;
  left: 20px;
  z-index: 300;
  padding: 6px 0;
  font-weight: bold;
  font-size: var(--font-size);
  color: var(--fg);
}

.has-dark #bar::before{
  color: var(--nfg);
}

#input {
  padding: var(--padding) 38px;
  color: var(--title);
  border: none;
  box-shadow: none;
}

.has-dark #input {
  color: var(--ntitle);
}

.item .icon {
  width: 24px;
  height: 24px;
  padding-right: unset;
  margin-right: 10px;
  margin-top: 5px;
  background-position: bottom right;
}

.item .icon path {
  opacity: 0.25;
  position: absolute;
  z-index: -1;
  transform-origin: 0px 0px;
  transform: scale(0.75);
}

.item.s,
.item:hover {
  background-color: var(--accent-fg);
  border: 3px rgba(0, 0, 0, 0.02) solid;
  cursor: pointer;
}

.has-dark .item.s,
.has-dark .item:hover {
  background-color: var(--naccent-fg);
}

.item .top {
  color: var(--title);
  position: relative;
  height: 30px;
}

.has-dark .item .top {
  color: var(--ntitle);
}

.item .top .title {
  font-size: var(--font-size);
  line-height: 10px;
  margin-top: 2px;
}

.item .top .title match {
  color: var(--title-accent);
}

.has-dark .item .top .title match {
  color: var(--ntitle-accent);
}

.item .top .title:empty::after {
  content: "<blank>";
}

.item .bottom {
  margin-top: -14px;
  padding-left: 14px;
}

.item .bottom a {
  color: var(--link);
  font-size: var(--font-size-link);
}

.has-dark .item .bottom a {
  color: var(--nlink);
}

.item .bottom a match {
  color: var(--nlink-accent);
  text-decoration: none;
}

.has-dark .item .bottom a match {
  color: var(--nlink-accent);
}

/* #find */
* {
/*insertroot*/
  --font-size: 17px;
  --font-size-link: 14px;
  --font-weight: normal;
  --font: "Source Code Pro",Consolas, sans;
  --padding: 0px;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  /* ----------  DAY THEME  ---------- */
  --bg: #fdf0ee;
  --fg: #000000;
  --accent-fg: #ececec;
  --border: #ececec;
  --title: #000000;
  --title-accent: #E5C07B;
  --link: #BE5046;
  --link-accent: #C678DD;

  /* ---------- NIGHT THEME ---------- */
  --nbg: #282C34;
  --nfg: #ABB2BF;
  --naccent-fg: #404859; /* not actual color in one dark pro, just bg with slightly more blue */
  --nborder: #E5C07B;
  --nlhbg: #D19A66; /* night link hint background */
  --nlhfg: #000000; /* night link hint foreground */
  --ntitle: #ABB2BF;
  --ntitle-accent: #D19A66;
  --nlink: #BE5046;
  --nlink-accent: #C678DD;

  font-family: var(--font);
  /*font-size: var(--font-size);*/
}

.r {
  color: var(--title-accent);
  background: var(--bg);
  border: none;
  box-shadow: none;
}

.r.D {
  color: var(--ntitle-accent);
  background: var(--nbg);
}

#i {
  color: var(--link-accent);
}

.D #i {
  color: var(--nlink-accent);
}

/* #find:host */

/* #find:selection */
lonelygo commented 1 month ago

@lonelygo 也许你某个地方理解错了。你给出的 CSS 样式代码都是 Vimium 的，不是 Vimium C 的，所以不会生效。

如果你浏览器同时安装了 Vimium 和 Vimium C，那可能是扩展加载顺序变了，比如你之前一直在用 Vimium 的功能，但最近由于什么导致 Vimium C 更早加载、按 F 和 O 显示出了 Vimium C 的界面。

1、我禁用了 Vimium，所以不会存在Vimium C冲突的问题。 2、尝试了 @ascodeasice comment的ascodeasice/vimium-c-one-dark-pro，依然不生效还是默认样式 3、卸载Vimium C，重新安装，步骤2中的css还是不生效 4、参考 @ZeusVS https://github.com/gdh1995/vimium-c/issues/1170#issuecomment-2233478685 提及的 / omnibar / 问题，删除了css中所有 / omnibar / 有关的代码，其余部分依然不生效

gdh1995 commented 1 month ago

v2.11 版本里，步骤 2 的“大部分”样式应该都能正常生效，而只有作用于 Vomnibar 的那些不行。

如果你确定不生效，能不能给个“你编辑好 自定义界面样式 并保存”的截图，我看看可能是哪儿问题。

lonelygo commented 1 month ago

v2.11 版本里，步骤 2 的“大部分”样式应该都能正常生效，而只有作用于 Vomnibar 的那些不行。

如果你确定不生效，能不能给个“你编辑好 自定义界面样式 并保存”的截图，我看看可能是哪儿问题。

以下是完整复制 @ascodeasice 的 one dark pro css截图（没有修改任何内容）： image image image image image image image

保存后的效果： image image

lonelygo commented 1 month ago

升级到v2.11.1后问题解决。 image

gdh1995 commented 1 month ago

修复了就好。

顺带说一句，上边这个 css 里有很多 * { ... } 的写法，理论上不如 :root {...} 计算得快（实际没可见影响，可能也就差几到几十微秒吧）

ascodeasice commented 1 month ago

升級後問題解決

image