-
-
Notifications
You must be signed in to change notification settings - Fork 262
/
Copy pathvomnibar.html
99 lines (99 loc) · 5.95 KB
/
vomnibar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html data-version="1.73">
<head>
<meta charset="utf-8">
<title>Vomnibar of Vimium C</title>
<script defer src="vomnibar.js"></script>
<style>
body{border-radius:5px;box-shadow:0 2px 7px 0.5px rgba(0,0,0,0.8);contain:content;margin:9px 12px 10px;
overflow:hidden;padding:0;position:relative;white-space:nowrap;}
body::after{border:0.5px solid #555;border-radius:5px;bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;}
.inactive{opacity:0.6667;transition:opacity 167ms 33ms;}
#bar{background:#f1f1f1;border-bottom:1px dashed #ccc;border-radius:4px 4px 0 0;
contain:strict;font-size:0;height:34px;padding:10px;}#bar.empty{border-radius:4px;border:none;}
#toolbar{color:#999;opacity:0;padding-right:8px;position:absolute;right:9px;top:17px;transition:opacity 120ms 80ms;}
#toolbar,.label{-webkit-user-select:none;user-select:none;}#toolbar:hover,.inactive #toolbar{opacity:1;}
.button{contain:strict;cursor:default;display:inline-block;fill:currentColor;height:20px;margin-left:8px;
stroke:currentColor;width:20px;}.button:hover{background:rgba(255,255,255,0.8);color:#666;}
#input{background:#fff;border:0.5px solid #e8e8e8;border-radius:3px;box-shadow:0 0 1.5px #444;box-sizing:border-box;
color:#000;contain:strict;font-size:20px;height:34px;outline:none;padding:4px 9.5px;width:100%;}
#list{background:#fff;border-radius:0 0 4px 4px;contain:content;}
.item{border-bottom:0.5px solid #ddd;box-sizing:border-box;contain:strict;height:44px;padding:4px 20px 0;}
.b{border-bottom-style:none;border-radius:0 0 4px 4px;height:46px;}
.item:hover{background-color:#cddbef;border-style:none;}
.alt .alt-index::after{background:rgba(255,255,255,0.8);border-radius:21px;color:#333;
content:attr(data-alt-index);font-size:24px;
height:39px;line-height:39px;position:absolute;left:calc(50% - 20px);text-align:center;top:2px;width:39px}
.p{border-color:#bbcee9;}.item.s{background-color:#bed1ea;border-style:none;}
.top{height:20px;overflow:hidden;font:16px/20px "Helvetica Neue",Arial,"PingFang SC",
"Hiragino Sans GB","Microsoft YaHei","Heiti SC","WenQuanYi Micro Hei",sans-serif;}
.icon{background:20px 0/16px no-repeat;fill:#999;fill:var(--vc-c,#999);height:16px;
margin:1.5px 4px 0 0;padding-right:20px;width:16px;vertical-align:top;}
.tab,.math{stroke:#999;stroke:var(--vc-c,#999);stroke-width:4;fill:none;}
.no-favicon .icon{margin-right:-16px;background:none !important;}
.label,.time{color:#999;display:inline-block;font-size:14px;font-weight:normal;}
.undo{font-family:sans-serif,STIXGeneral;}
.bottom{height:18px;line-height:14px;margin-left:20px;overflow:hidden;}
a{color:#3b517d;cursor:default;font:14px/18px "Helvetica Neue",Arial,sans-serif;text-decoration:none;}
.mono-url a{font-family:Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
match{color:#000;font-weight:bold;}.title>match{text-decoration:underline;}
#toggle-dark{stroke-linecap:round;stroke-linejoin:bevel;}.i-moon{fill:none;stroke-width:1.4;}
.i-sun{stroke-width:2.1}#toggle-dark:not(.toggled) .i-sun,#toggle-dark.toggled .i-moon{visibility:hidden;}
#close{stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4;}
.level-2{padding-right:32px;}.level-3{padding-right:48px;}.level-4{padding-right:60px;}.level-5{padding-right:72px;}
.less-motion .inactive, .less-motion #toolbar{transition:none;}
.tab{d:path("M2 22v36h44V22zm8 0v-8h44v36h-6m8 -8h6V6H18v6");}
.math{d:path("M2 2h60v60H2zm8 8H54V22H10zm0 20h8v8h-8zm0 16h8v8h-8zm16 0h8v8h-8zm0-16h8v8h-8zm16 0h12v24H42z");}
.bookm{d:path("M32 0l8 20 24 2-20 14 6 26-18-14-20 14 8-26L0 22l24-2");}
.search{d:path("M46 41h-3l-1-1a24 24 1 1 0-2 2l1.1 1.1v3L59 64l5-5zm-10-4a18 18 0 1 1 1-1");}
.domain{d:path("M4,16v4h4l12,36h4L32,32l8,24h4L56,20h4v-4H46v4h4L42,48L34,24h-4l-8,24L14,20h4v-4");}
.history{d:path("M8 10.8A32 32 0 1 1 0 32h6a26 26 1 1 0 6.25-17L20 23H0V3zM28 18v21l15 8 4-5-13-7V18");}
</style>
<style data-media="(forced-colors: active)" id="high-contrast">
*{border-radius:0 !important;}body::after{content:"";border-radius:0;}
.inactive,#toolbar{opacity:1;}#toggle-dark{display:none;}.btn_svg{stroke:#999;}:hover>.btn_svg{stroke:currentColor;}
.s,.item:hover{border-bottom-style:solid;}.s>.top,:hover>.top{font-weight:bold;--vc-c:currentColor;}
</style>
<style id="dark">
body::after{content:"";}
#bar{background:#333;border-color:#666;}#list{background:#000;}
#input{background:#000;border-color:#171717;box-shadow:0 0 1.5px #ccc;color:#ccc;}
#toolbar{color:#666;opacity:1;}.button:hover{background:#000;color:#999;}
.item{border-color:#333;}.item:hover{background-color:#101e32;}
.p{border-color:#1b3355;}.item.s{background-color:#1b3355;}
.top,match{color:#c4c4c4;}a{color:#97aace;}
</style>
<style id="time">.time{float:right;}.time:hover{color:currentColor}</style>
<style id="filtered">
body::after{content:"";}body{box-shadow:none;}
#toolbar{opacity:0;}#bar{background:#ccc}.has-dark>#bar{background:#0e0e0e}
</style>
</head>
<body style="display: none;">
<div id="bar">
<input type="text" id="input" spellcheck="false" autocomplete="off" autocapitalize="off"
inputmode="search" enterkeyhint="Go" />
<div id="toolbar">
<span role="button" class="button" id="toggle-dark" title="Toggle Dark"><svg class="btn_svg" viewBox="0 0 20 20">
<path class="i-moon" d="M5.4 3A7.2 7.3 0 1 1 5.4 17A6.4 7 0 1 0 5.4 3z"></path>
<circle class="i-sun" cx="10" cy="10" r="3.2"></circle><path class="i-sun"
d="M2 10h2m6 6v2m6-8h2M10 2v2M4.3 4.3l1.4 1.4M15.7 4.3l-1.4 1.4M4.3 15.7l1.4-1.4M14.3 14.3l1.4 1.4"></path>
</svg></span><span role="button" class="button" id="close" title="Close"><svg class="btn_svg" viewBox="0 0 20 20">
<path d="M6 6l8 8zM6 14L14 6"></path></svg></span>
</div>
</div>
<div id="list">
<script type="text/x-template" id="template">
<div class="item" data-alt-index="{{altIndex}}">
<div class="top">
<svg class="icon{{level}}{{favIcon}}" viewBox="0 0 64 64">
<path class="{{typeIcon}}"></path>
</svg><span class="title">{{title}}</span>{{label}}{{time}}
</div>
<div class="bottom">
<a>{{textSplit}}</a>
</div>
</div></script>
</div>
</body>
</html>