～技术宅真可怕～ » 讨论
用 Stylish 在番组计划实现类似萌娘百科的指向即开黑条。

#1 - 2017-6-17 12:19

钛白 (参与i游戏开发设计中。昵称是种颜料。 ...)

标题的要求是有人私下向我求助的。我想到一个简单方法，认为公开在这里比较好。

假设你已经了解并安装了 Stylish。浏览器打开任意番组计划页面，点击 Stylish 按钮，至“编写新样式”，至“提供给 http://bgm.tv/”，加上如下一行：

span:hover[style="background-color:#555;color:#555;border:1px solid #555;"] {background-color:transparent!important; border:1px dashed #888!important; transition:all .1s;}

保存即可，鼠标指向下面这行黑条看看是否生效。

我认为番组计划应该用 class="mask" 而不是用 style 来呈现 mask 效果。

荧光黄效果：

span:hover[style^="background-color:#555"] {background-color:#ef9!important; color:unset!important; border:1px solid #efb!important; transition:all .1s}

如果对效果要求不高，还可以更简短：

span:hover[style^="background-color:#555"]{color:#fff!important}

#2 - 2017-6-17 12:37

Panzerance🀃 (いいんです)

#3 - 2017-6-17 13:04

菜叶 (你的爱还不够啊！)

“你知道得太多了” 去哪里了 (bgm38)

#3-1 - 2017-6-17 14:15

钛白

使用#7的样式即可。

#4 - 2017-6-17 13:19

Bantorra

确实方便不少，感谢lz。
没想到这个功能实现起来这么简单，感觉又开启了一扇新大门。

#5 - 2017-6-17 13:25

Hentyclopedia (Information doesn't harm)

nice

#6 - 2017-6-17 13:27

upsuper

不如用我当年的Mask模糊样式

#6-1 - 2017-6-17 14:11

钛白

style^="background-color:#555"

这样写不会误判？那么就可以更简短了。

#6-2 - 2017-12-20 14:50

狂犬榨汁姬艾莉丝

在Win10 15063.674，Edge 40.15063.674.0，EdgeHTML 15.15063上的显示效果十分不好
不是全黑条，但没点开就是这样，指向了之后也是如此

#7 - 2017-6-17 13:37

頂上ノ月🌙 (DD雷达搜寻中...?)

黑底白字+简单过渡:



span:hover[style="background-color:#555;color:#555;border:1px solid #555;"]{position:relative;color:#fff!important;transition:all .5s}



 /* 以下内容可选 */ 

span:hover[style="background-color:#555;color:#555;border:1px solid #555;"]::after{content:"你知道得太多了";position:absolute;right:0;color:#555;background-color:#fff;box-shadow:#555 2px 2px 1px;display:block}

#7-1 - 2017-6-17 14:55

钛白

我用过一个复杂的 content 样式，你可以参考和删除多余的：

.note::before {

    background-color: #fef4c5;

    border-radius: 2px;

    border: 1px solid #d4b943;

    box-shadow: 2px 2px 2px rgba(0, 0, 0, .15);

    color: #594c16;

    content: attr(data-title);

    display: none;

    font-size: 14px;

    margin-top: 22px;

    padding: 3px 4px;

    position: absolute;

    white-space: nowrap;

    z-index: 1;

}

#7-2 - 2017-6-17 15:06

頂上ノ月🌙

钛白说: 我用过一个复杂的 content 样式，你可以参考和删除多余的：
.note::before {
    background-color: #fef4c5;
  &nb...

嗯我认为加个

white-space: nowrap;

就好了

#7-3 - 2017-6-17 18:28

菜叶

span:hover[style="background-color:#555;color:#555;border:1px solid #555;"]::after{content:"你知道得太多了";position:absolute;right:0;color:#555;background-color:#fff;box-shadow:#555 2px 2px 1px;display:block}

第二个在我的 firefox 54 on archlinux 133% 下好像不管用啊 (bgm38)

#7-4 - 2017-6-17 19:14

菜叶

菜叶说: 第二个在我的 firefox 54 on archlinux 133% 下好像不管用啊

加了一个

top: 16px

好了

#7-5 - 2017-6-21 12:52

奈白不弍

感觉这个过渡时间长了点，改成

1s

或许好些。

#7-6 - 2017-6-21 13:21

頂上ノ月🌙

奈白不弍说: 感觉这个过渡时间长了点，改成 1s 或许好些。

是不是漏了个"." _(:зゝ∠)_
0.5s是我自己试过适合自己的
所以一切以适合自己为准想怎么改就怎么改吧w

#8 - 2017-6-17 14:23

東雲閑 (横剑听雨打叶萍，无上清凉花满席)

总不能要求所有用户都安装Stylish……

#8-1 - 2017-6-17 14:37

钛白

可以不装，比如有些浏览器是改自带的 custom.css，类似的改法网上可以查到，但用 Stylish 还是因为改 custom.css 太不方便了。

#9 - 2017-6-17 16:43

楼前夜听雨 (勇敢的少年啊，快去创造奇迹)

nice

#10 - 2017-6-17 16:45

林卯 (✨️VIP 8✨️)

@阿良良木翔这下我刮你喜欢加的那些黑条就不费力了。以前每次都要选中，拖，很费步骤，现在只要指向就行。

#10-1 - 2017-6-17 17:20

LunarShaddow🌙

Ctrl-A……

#10-2 - 2017-6-17 17:37

林卯

LunarShaddow 说: Ctrl-A……

全选的话我之前选定的定位就撤销了。长文我有时会选中一段作记号去另一页，此外的情况我也会直接全选。

#10-3 - 2017-6-17 18:34

Rくん

我倒是更喜欢从上到下刮黑条的感觉啊
这不就和喝酸奶要舔盖一样吗 (bgm38)

，对有些人来说，不要说“舔盖麻烦”。因为喝的就是那个舔盖的感觉啊 (bgm93)

#10-4 - 2017-6-17 19:22

LunarShaddow🌙

林卯说: 全选的话我之前选定的定位就撤销了。长文我有时会选中一段作记号去另一页，此外的情况我也会直接全选。

^A ^C ^V

#10-5 - 2017-6-17 19:22

LunarShaddow🌙

阿良良木翔说: 报告林卯老师，其实最近我有点儿意识到，有争议的内容不管加不加黑条，于敏感好斗之徒的眼中别无二致（暴风雨嘛，该来的总会来的）。我想，黑条的实际功效可能只剩俩个了，即刮开后的幽默效果（反差），还有就是剧透...

班固米需要尽早实现和萌百一样的点击擦除技能

#10-6 - 2017-6-18 02:03

林卯

我认识烈之斩很久了，他博客上应该还有我的留言。但我不知道你说的是烈之斩的什么，没印象。

#10-7 - 2017-6-18 02:06

林卯

LunarShaddow 说: ^A ^C ^V

全选复制粘贴？…这是什么操作？我的“选中一段”只是相当于书角折一下的那种操作。

#10-8 - 2017-6-18 11:47

LunarShaddow🌙

林卯说: LunarShaddow 说:  ^A ^C ^V全选复制粘贴？…这是什么操作？我的“选中一段”只是相当于书角折一下的那种操作。

长文嘛，粘到 onenote 里去掉格式慢慢看……

#10-9 - 2017-6-20 19:10

林卯

阿良良木翔说: 画师贴呀，烈之斩一楼那个

最近没见过有画师帖？

#10-10 - 2017-6-20 19:12

林卯

阿良良木翔说: 我被关注了的那个。

哪个？

#11 - 2017-6-17 17:18

粒织

我选择风骚的"你知道得太多了"

#12 - 2017-6-18 02:10

Thunder (noblesse oblige)

还是喜欢现在的黑条，完美预防手贱 (bgm38)

#13 - 2017-6-18 03:36

滾滾洗衣君

這修改功夫太簡單了，然而官方今天也沒有。

#13-1 - 2017-6-18 03:46

林卯

想预防手贱可以加个开关。

#14 - 2017-6-18 13:01

Franklin Yu (讓一切都自動化！)

Stylish 追蹤用户的所有瀏覽記錄，並且賣給廣告商。我已經切換到 Stylus。

#14-1 - 2017-6-19 12:57

林卯

前半是什么情况？

#14-2 - 2017-6-19 14:32

Franklin Yu

林卯说: 前半是什么情况？

https://github.com/StylishThemes/GitHub-Dark/issues/455

#14-3 - 2017-6-19 22:28

林卯

配置互通吗？没找到快速导出的手段。

#14-4 - 2017-6-19 23:22

菜叶

火狐上的 Stylish 一直停留在 16 年 8 月的版本，根据下面那个 issue 的回复来看似乎新版本不会通过 Mozilla 审核呢不过我也关掉自动更新了

#14-5 - 2017-6-20 00:19

Franklin Yu

林卯说: 配置互通吗？没找到快速导出的手段。

應該是有一個「備份」的功能

#14-6 - 2017-6-20 00:40

林卯

Franklin Yu 说: 應該是有一個「備份」的功能

火狐那个版本不行，老外也说了：

Not to be installed anymore 评分 1，满分5星
由 Ovidiu Zeicu 发表于 May 21, 2017 · 永久链接
It's over 10 years since this plugin was lauched and it still doesn't have an export option. So if you like to use your custom built styles, or alter downloaded styles, you basically have to copy/paste your code manually in order to move it to a new install. That if nothing critical happens and you're not able to do that.
Instead of adding this basic feature, the new owners of Stylish decided it's ok to collect "anonymous" user data and share/sell them with/to marketing companies. That's the biggest no no.
Bye bye, Stylish, it was fun, but you screwed up big time.

不过由于一直没更新（版本 2.0.7 发布 August 9, 2016），我不替换也没关系吧。

#14-7 - 2017-6-20 00:53

林卯

Stylus :: Firefox 附加组件

Unfortunately, due to security restrictions in the WebExtensions platform, styling of the browser UI and internal pages is prohibited.

等等，这个功能没法用？我是用Stylish改火狐界面字体的…呃。

#14-8 - 2017-6-20 01:05

菜叶

林卯说: 配置互通吗？没找到快速导出的手段。

Stylus 有个给 fx 的导出扩展，Stylus 第 5 节有讲

#14-9 - 2017-6-20 01:14

林卯

菜叶说: Stylus 有个给 fx 的导出扩展，Stylus 第 5 节有讲

（我刚才发现了新问题，#14-7）

#14-10 - 2017-6-20 05:51

Franklin Yu

林卯说: 火狐那个版本不行，老外也说了：Not to be installed anymore 评分 1，满分5星
由 Ovidiu Zeicu 发表于 May 21, 2017 · 永久链接
It's ove...

火狐好像確實不需要換，根據 #14-4。我是 Chrome 用戶，不清楚火狐的情況……

#14-11 - 2017-6-20 05:54

Franklin Yu

林卯说: Stylus :: Firefox 附加组件等等，这个功能没法用？我是用Stylish改火狐界面字体的…呃。

如果 Stylish 支持但 Stylus 不支持的話，大概是 Stylus 想直接用跨平臺的 WebExtensions，而 Stylish 直接每個平臺寫一次吧（這就是火狐的 Stylish 更新不頻繁的原因？）

畢竟 Stylus 沒有那麼多人手了，用戶好像主要是 Chrome 的

#14-12 - 2017-6-20 12:27

林卯

Franklin Yu 说: 如果 Stylish 支持但 Stylus 不支持的話，大概是 Stylus 想直接用跨平臺的 WebExtensions，而 Stylish 直接每個平臺寫一次吧（這就是火狐的 Stylish 更新...

好了，两个浏览器，火狐不动，Chromium那边改成Stylus（Chromium界面字体好像本来就改不了）。

#14-13 - 2017-6-21 16:40

菜叶

林卯说: 好了，两个浏览器，火狐不动，Chromium那边改成Stylus（Chromium界面字体好像本来就改不了）。

Firefox 也快要改不了啦

#14-14 - 2017-6-21 17:02

林卯

菜叶说: Firefox 也快要改不了啦

啊！两个浏览器还有什么方法改呢？
话说今天更新的火狐54.0说好像是支持多进程 https://www.mozilla.org/en-US/firefox/54.0/releasenotes/，但我更新后发现任务管理器里还是一个进程，是我理解错误？

#14-15 - 2017-6-21 18:57

菜叶

林卯说: 啊！两个浏览器还有什么方法改呢？
话说今天更新的火狐54.0说好像是支持多进程 https://www.mozilla.org/en-US/firefox/54.0/releasenotes/，但我更...

参考这篇文章

#15 - 2017-6-18 14:44

Aoi

你们用手机pad怎么看反白方便，尤其是ios这种渣渣暂时靠夜间模式

#15-1 - 2017-6-19 13:56

九八式衍射弹

我一直用选中然后“查询”这种笨办法看的。。。

#15-2 - 2017-6-19 14:01

九八式衍射弹

顺带一问 ios有夜间模式这种功能吗我死活找不到

#15-3 - 2017-6-19 14:09

Aoi

九八式衍射弹说: 顺带一问 ios有夜间模式这种功能吗我死活找不到

当然是第三方浏览器。虽然也不很方便，有时需要频繁切换。

#15-4 - 2017-6-20 01:06

菜叶

九八式衍射弹说: 顺带一问 ios有夜间模式这种功能吗我死活找不到

iOS 有个反相色的功能，你可以加到三次按 Home 键或者小白点里面去

#15-5 - 2017-6-20 10:26

Aoi

菜叶说: iOS 有个反相色的功能，你可以加到三次按 Home 键或者小白点里面去

[size=0]...............................................................................................那个不能看反白。单说夜间模式倒是可以算

#16 - 2018-1-1 15:21

ℰ𝓊𝓅𝒽𝓎 (ユーフェミア·リ·ブリタニア/Euphemia Li Britannia)

Mark

/ 返回～技术宅真可怕～小组

～技术宅真可怕～ » 讨论用 Stylish 在番组计划实现类似萌娘百科的指向即开黑条。

～技术宅真可怕～ » 讨论
用 Stylish 在番组计划实现类似萌娘百科的指向即开黑条。