-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathuserChrome.css
124 lines (105 loc) · 3.3 KB
/
userChrome.css
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
:root {
/**
* The number of buttons (back, forward, stop, etc) to the left of the URL bar
* Add 1px here for each button 3 buttons = 3px
*/
--buttons-left-of-urlbar: 3;
/**
* Width of `https://` text in your font as an m and a / may not be proportional in all fonts
* Adjust this until only `https://` is hidden in the URL bar
* +/-0.1 should work for most fonts
*/
--https-text-offset-amount: -3.7em;
}
#navigator-toolbox {
display: flex;
}
#urlbar-container {
min-width: 18.2em !important;
}
#nav-bar {
order: 0;
}
#titlebar {
order: 1;
width: 100%;
}
#page-action-buttons {
margin-right: -100em;
transition: all 0.3s ease-in;
}
:root[customizing] #nav-bar-customization-target,
#nav-bar:focus-within #nav-bar-customization-target,
popupset:hover ~ #navigator-toolbox-background #nav-bar-customization-target,
#nav-bar:hover #nav-bar-customization-target {
margin-left: 0em;
width: 50vw;
transition-delay: 0s;
}
#urlbar-input-container .urlbar-input-box #urlbar-input {
margin-left: var(--https-text-offset-amount) !important;
transition: all 0.3s ease-in;
}
#urlbar-input-container .urlbar-input-box #urlbar-input:placeholder-shown {
margin-left: 0 !important;
transition-delay: 0.1s;
}
#nav-bar:hover .urlbar-input-box #urlbar-input,
#nav-bar:focus-within #urlbar-input-container .urlbar-input-box #urlbar-input {
margin-left: 0em !important;
}
#urlbar-input-container:after {
display: block;
position: relative;
pointer-events: none;
float: right;
width: 4em;
margin-right: -0.2em;
background: linear-gradient(to right, transparent, Field);
z-index: 1;
height: 1em;
content: " ";
transition: width 0.3s ease-in;
}
#nav-bar:hover #urlbar-input-container:after,
#nav-bar:focus-within #urlbar-input-container:after {
width: 0;
}
#urlbar-input-container > box {
position: relative;
background-color: Field;
z-index: 1;
}
#urlbar-input-container > box:hover {
background-color: SelectedItem;
}
:root[customizing] #navigator-toolbox-background #nav-bar-customization-target,
popupset:hover ~ #navigator-toolbox-background #nav-bar-customization-target,
#nav-bar:hover #nav-bar-customization-target #page-action-buttons {
margin-right: 0;
}
#nav-bar-customization-target {
margin-left: calc(0px - calc(var(--buttons-left-of-urlbar) * 34px));
min-width: 24em;
width: 24em;
transition: all 0.3s ease-in;
transition-delay: 0.1s;
}
#nav-bar-customization-target ~ toolbarbutton,
#nav-bar-customization-target ~ toolbaritem {
opacity: 0;
transition: opacity 0.3s ease-in;
}
:root[customizing] #nav-bar-customization-target ~ toolbaritem,
:root[customizing] #nav-bar-customization-target ~ toolbarbutton,
popupset:hover ~ #navigator-toolbox-background #nav-bar-customization-target ~ toolbaritem,
#nav-bar:focus-within #nav-bar-customization-target ~ toolbaritem,
#nav-bar:hover #nav-bar-customization-target ~ toolbaritem,
popupset:hover ~ #navigator-toolbox-background #nav-bar-customization-target ~ toolbarbutton,
#nav-bar:hover #nav-bar-customization-target ~ toolbarbutton {
opacity: 1 !important;
}
#identity-box.notSecure ~ .urlbar-input-box #urlbar-input,
#identity-box.chromeUI ~ .urlbar-input-box #urlbar-input {
margin-left: 0em !important;
}