blob: 7ec4588b00fcd762df97f8bb47e6fdb4c27de283 (
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
|
/* TODO create separate repo for this */
/* TOP BAR */
#navigator-toolbox {
--uc-navigationbar-width: 40vw;
#TabsToolbar {
/* Move new tab to far right */
#tabbrowser-arrowscrollbox-periphery { margin-left: auto }
/* remove alltabs button */
#alltabs-button { display: none }
}
#nav-bar {
/* Remove overflow button */
#nav-bar-overflow-button { display: none }
}
#PersonalToolbar {
/* Change background color of bookmarks toolbar */
background: var(--toolbox-bgcolor) !important;
/* Adjust spacing of toolbar items */
#PlacesToolbarItems { gap: .35rem; margin-block: .2rem }
}
}
/* 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) {
#TabsToolbar-customization-target {
/* TODO fix w/o. Don't allow tabbar to move up when moving tabs */
height: 37px;
/* Make tabs fill more vertical space */
.tab-background { margin-block: 1px !important }
}
}
/* COMBINE TOP BAR */
/* Combine top bar into single line if width >= 800px */
@media screen and (min-width: 800px) {
/* Half height bar */
:root { --uc-toolbar-height: 36px }
/* Modify these to change relative widths or default height */
#navigator-toolbox {
margin-bottom: 0px;
padding-top: 1px; /* Top bar is cut off otherwise */
#TabsToolbar {
margin-left: calc(var(--uc-navigationbar-width) + 2px); /* Resize tab bar */
margin-top: -4px;
margin-bottom: 2px;
#TabsToolbar-customization-target {
height: var(--uc-toolbar-height);
/* Tabs extend to bottom of bar */
.tab-background {
margin-bottom: 0 !important;
margin-top: 3px !important; /* See above navigator-toolbox rule. Avoid cutting off top */
}
/* 1px margin on touch density causes tabs to be too high */
.tab-close-button { margin-top: 0 !important }
}
/* 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;
/* Fix spacing around tabs by removing nav bar top border */
border: none !important;
#urlbar-container {
/* Remove min and max width of urlbar */
width: 0 !important;
/* Make opened urlbar overlay the toolbar */
#urlbar[open]:focus-within { min-width: 50vw !important }
}
}
/* Bottom of tags is cut off by 1px without this */
#PersonalToolbar { margin-top: 1px }
}
/* 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-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-textbox {
width: 100% !important;
background: Field !important; /* Set the background color to be consistent with found-matches label when unfocused */
}
description {
/* Hide description showing wrap conditions etc. */
display: none;
/* Show description when it says "Phrase Not Found" */
&[status=notfound] { display: inline-block }
}
/* Move found matches label (roughly) into the textbox */
label.found-matches,
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;
}
/* Force checkboxes onto second line */
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;
z-index: 1000; /* To not be affected by shadow from navbar */
/* Space out bookmark items */
.bookmark-item .toolbarbutton-text { padding: 2.5px 4px }
}
}
|
