blob: af302c5b24ebae8daea727a465a5ddf2773f1806 (
plain)
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
|
/* TOP BAR */
#navigator-toolbox {
--uc-navigationbar-width: 40vw;
}
/* Remove overflow button */
#nav-bar-overflow-button { display: none; }
/* remove alltabs button */
#alltabs-button { display: none; }
/* Change background color of toolbar */
#navigator-toolbox-background {
background: var(--toolbar-field-border-color) !important;
}
/* Fix vertical spacing of tabs */
#TabsToolbar {
margin-top: -1px;
}
/* Move new tab to far right */
#tabbrowser-arrowscrollbox-periphery {
margin-left: auto;
}
/* Fix spacing around tabs by removing nav bar top border */
#nav-bar {
border: none !important;
}
/* Media queries for width of nav bar */
@media screen and (max-width: 1000px) {
#navigator-toolbox {
--uc-navigationbar-width: 50vw;
}
}
@media screen and (max-width: 800px) {
#navigator-toolbox {
--uc-navigationbar-width: 60vw;
}
}
/* Change look of tabs in smaller view */
@media screen and (max-width: 800px) {
.tab-background {
margin-block: .2em !important;
}
#TabsToolbar {
margin-left: 5px;
}
}
/* COMBINE TOP BAR */
/* Combine top bar into single line if width >= 800px */
@media screen and (min-width: 800px) {
:root {
--uc-toolbar-height: 36px; /* Half height bar */
}
/* Modify these to change relative widths or default height */
#navigator-toolbox {
margin-bottom: 0px;
}
#titlebar {
margin-top: 2px;
}
#TabsToolbar {
margin-left: calc(var(--uc-navigationbar-width) + 2px); /* Resize tab bar */
margin-top: -4px;
margin-bottom: 2px;
}
/* Tabs extend to bottom of bar */
.tab-background {
margin-bottom: 0 !important;
margin-top: 2px !important; /* See above navbox rule */
}
/* Center tab buttons */
#tabs-newtab-button,
#alltabs-button
{
margin-top: 4px !important;
}
/* Integrate url / nav bar */
#nav-bar {
margin-right:calc(100vw - var(--uc-navigationbar-width));
margin-top: calc(0px - var(--uc-toolbar-height));
border-radius: 0 var(--tab-border-radius) var(--tab-border-radius) 0;
border-right: 1px solid ThreeDShadow !important;
box-shadow: 0 0 4px rgba(0,0,0,.4) !important;
}
/* 1px margin on touch density causes tabs to be too high */
.tab-close-button {
margin-top: 0 !important
}
/* Make opened urlbar overlay the toolbar */
#urlbar[open]:focus-within {
min-width: 50vw !important;
}
/* Remove min and max width of urlbar */
#urlbar-container {
width: 0 !important;
}
/* Fix customization view */
#customization-panelWrapper .panel-arrowbox .panel-arrow {
margin-inline-end: initial !important;
}
/* Shorten findbar */
findbar {
width: 600px !important;
border-radius: 0 0 0 5px;
border-bottom: none !important;
box-shadow: 0 2px 4px rgba(0,0,0,.4); /* Move down 2px so it doesn't go over the tab bar */
}
}
/* FINDBAR */
findbar {
width: 100vw;
position: absolute;
top: 0;
right: 0;
padding: 0 !important;
padding-top: 1px !important;
background: -moz-headerbar Field !important;
border-top-width: 0px !important;
border-bottom: 1px solid ThreeDShadow;
}
findbar .findbar-container {
padding-bottom: 5px !important; /* Move search bar closer to left edge */
padding-top: 2px !important; /* Move search bar closer to left edge */
height: max-content !important;
gap: 2px;
justify-content: space-between;
flex-wrap: wrap;
}
/* Force textbox to fill up first line */
findbar .findbar-textbox {
width: 100% !important;
background: Field !important; /* Set the background color to be consistent with found-matches label when unfocused */
}
/* Hide description showing wrap conditions etc. */
findbar description {
display: none;
}
/* Move found matches label (roughly) into the textbox */
findbar label.found-matches,
findbar description {
position: absolute;
top: 6.5px;
right: 110px;
color: color-mix(in srgb, -moz-headerbartext, transparent 46%) !important;
/* So this text overrides the text below, TODO find a more elegant solution */
padding-inline: 1ex;
background: Field;
}
/* Show description when it says "Phrase Not Found" */
findbar description[status=notfound] {
display: inline-block;
}
/* Force checkboxes onto second line */
findbar .findbar-container hbox {
width: 100%;
}
/* BOOKMARK BAR */
@-moz-document url(chrome://browser/content/browser.xhtml) {
#PersonalToolbar {
background: -moz-headerbar Field !important;
border-top: 1px solid ThreeDShadow !important;
}
/* Space out bookmark items */
.bookmark-item .toolbarbutton-text {
padding: 2.5px 4px;
}
}
|
