Skip to content

Commit 88d27af

Browse files
KiKaraageKiKaraage
authored
Lean v3
New name, preferences, functionality 0. Tidy up extension menu by default (no checkbox) 1. Apply grid view in extension menu 2. Hide Zoom button in URL bar 3. WIP: Show translation button when hovering URL bar in Single Toolbar mode 4. Show page action button for extensions when hovering URL bar in Single Toolbar mode 5. Hide top workspace indicator unless editing space name 6. Hide bottom buttons area unless tab sidebar is hovered 7. Ninja top buttons on Single Toolbar mode (You can hover slightly above URL bar to access the top buttons, but you can't see it) 8. Only show bookmarks when hovering top navigation bar on Multiple & Collapsed Toolbar mode (Mimicking mechanism from Single Toolbar) 9. WIP: Bottom buttons as "pinned extensions" on Single Toolbar mode (Also hide the workspace buttons, and the separator below tabs area) 10. WIP: Show workspace icons when "pinned extensions" is enabled
1 parent 5edba75 commit 88d27af

1 file changed

Lines changed: 309 additions & 23 deletions

File tree

  • themes/1e86cf37-a127-4f24-b919-d265b5ce29a0

‎themes/1e86cf37-a127-4f24-b919-d265b5ce29a0/chrome.css‎

Lines changed: 309 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
/*
2+
* github.com/KiKaraage/
3+
* ZenMods/Lean
4+
* Show things only when you need it: Top & bottom buttons, workspace indicator, bookmarks bar and more
5+
*/
6+
7+
/* 0 - Tidy up extension menu by default */
8+
/* Reduce icon size in extension menu */
9+
:root {
10+
--uei-icon-size: 20px !important;
11+
}
12+
113
@media not (-moz-bool-pref: "mod.extension.viewgrid") {
214
/* Hide header, description, extension captions */
315
#unified-extensions-view box.panel-header,
@@ -11,12 +23,18 @@
1123
#unified-extensions-view {
1224
width: var(--menu-panel-width) !important;
1325
}
26+
#overflowed-extensions-list {
27+
padding-block-start: 2px !important;
28+
}
29+
#unified-extensions-area {
30+
padding-block-end: 1px !important;
31+
}
1432
panelview .unified-extensions-item-action-button {
15-
padding-inline: 10px !important;
16-
padding-block: 0px !important;
33+
padding-inline: 8px !important;
34+
padding-block: 4px !important;
1735
}
1836
#unified-extensions-manage-extensions {
19-
margin-inline: 4px !important;
37+
margin-inline: 3px !important;
2038
padding: 8px 10px !important;
2139
margin-block-end: 4px !important;
2240
}
@@ -48,17 +66,18 @@
4866
}
4967
#unified-extensions-view .subviewbutton-iconic {
5068
& > .toolbarbutton-icon {
51-
width: 1.2em !important;
52-
height: 1.2em !important;
53-
padding: 0.7em !important;
69+
width: 1em !important;
70+
height: 1em !important;
71+
padding: 0.6em !important;
5472
}
5573
}
5674
}
5775

76+
/* 1 - Apply grid view in extension menu */
5877
@media (-moz-bool-pref: "mod.extension.viewgrid") {
5978
/* Set width of Unified Extension View */
6079
#unified-extensions-view {
61-
width: calc(var(--menu-panel-width) - 75px) !important;
80+
width: calc(var(--menu-panel-width) - 118px) !important;
6281
}
6382

6483
/* Hide the header as well as texts and settings icon for each extension, so only icons are visible */
@@ -81,26 +100,27 @@
81100
align-items: center !important;
82101
margin-inline: 7px !important;
83102
width: 0px !important;
84-
gap: 7px 0px;
85103
}
86104

105+
#overflowed-extensions-list {
106+
padding-block-start: 5px !important;
107+
}
87108
#unified-extensions-area {
88-
padding-block: 7px !important;
109+
padding-block-end: 10px !important;
89110
}
90111

91112
/* Ensure the extensions are fully centered with squircle hover shape, and reduce unneeded margins/paddings */
92113
.unified-extensions-item {
93114
display: flex !important;
94115
align-items: center !important;
95116
justify-content: center !important;
96-
padding-block: 4px !important;
97117
border-radius: 12px !important;
98118
}
99119
.unified-extensions-item-icon, .unified-extensions-item .webextension-browser-action.subviewbutton > .toolbarbutton-badge-stack {
100120
margin: 0px !important;
101121
}
102122
panelview .unified-extensions-item-action-button {
103-
padding: 5px 10px !important;
123+
padding: 10px 10px !important;
104124
}
105125

106126
/* Set proper padding for the Manage Extensions button */
@@ -118,27 +138,293 @@
118138
}
119139

120140
#unified-extensions-view toolbarseparator {
121-
margin-top: 8px !important;
141+
margin-top: 0px !important;
122142
}
123143
}
124144

125-
@media (-moz-bool-pref: "mod.extension.hide") {
126-
:root:not([customizing]){
127-
#unified-extensions-button {
128-
opacity: 0 !important;
129-
transition: opacity 0.2s ease;
130-
}
145+
/* 2 - Hide Zoom button in URL bar */
146+
@media (-moz-bool-pref: "mod.lean.hide-zoom") {
147+
#urlbar-zoom-button {
148+
display: none !important;
149+
}
150+
}
131151

132-
#unified-extensions-button:hover {
152+
/* 3 - Show translation button when hovering URL bar in Single Toolbar mode */
153+
:root[zen-single-toolbar='true'] {
154+
@media (-moz-bool-pref: "mod.lean.show-translation") {
155+
#urlbar:hover {
156+
#translations-button {
157+
display: inherit !important;
158+
}
159+
#translations-button {
160+
&[hidden="true"] {
161+
#translations-button-circle-arrows, #translations-button-locale {
162+
visibility: collapse !important;
163+
}
164+
#translations-button-icon {
165+
visibility: visible !important;
166+
}
167+
}
168+
}
169+
}
170+
#translations-button {
171+
transition: all 0.1s ease !important;
172+
}
173+
& #translation-button:not([open]) {
174+
margin-inline-start: calc(-8px - 2 * var(--urlbar-icon-padding));
175+
transform: translateX(100%);
176+
opacity: 0;
177+
}
178+
#urlbar:hover #translations-button {
133179
opacity: 1 !important;
180+
margin-inline-start: 0 !important;
181+
transform: none !important;
182+
display: flex;
183+
}
184+
}
185+
}
186+
187+
/* 4 - Show page action button for extensions when hovering URL bar in Single Toolbar mode */
188+
:root[zen-single-toolbar='true'] {
189+
@media (-moz-bool-pref: "mod.lean.show-pageactions") {
190+
#urlbar:hover {
191+
.urlbar-addon-page-action {
192+
display: inherit !important;
193+
}
194+
}
195+
#page-action-buttons {
196+
order: 1 !important;
197+
}
198+
}
199+
}
200+
201+
/* 5 - Hide top workspace indicator unless when editing space name
202+
* + adjust Essentials area bottom padding */
203+
@media -moz-pref("mod.lean.top-workspace") {
204+
.zen-current-workspace-indicator:not(:has(.tab-label-container-editing)) {
205+
visibility: collapse !important;
206+
}
207+
@media -moz-pref("mod.lean.pinned-ext") {
208+
.zen-essentials-container:not(:empty) {
209+
padding-bottom: 4px !important;
210+
}
211+
@media not -moz-pref("mod.lean.bottom-buttons") {
212+
#main-window[zen-single-toolbar="true"] {
213+
.zen-essentials-container {
214+
padding-bottom: 4px !important;
215+
padding-top: 4px !important;
216+
}
217+
}
218+
}
219+
}
220+
@media not -moz-pref("mod.lean.pinned-ext") {
221+
.zen-essentials-container:not(:empty), .zen-current-workspace-indicator {
222+
padding-bottom: 0px !important;
223+
}
224+
#main-window[zen-single-toolbar="true"] {
225+
.zen-essentials-container {
226+
padding-bottom: 6px !important;
227+
}
228+
}
229+
}
230+
}
231+
232+
/* 6 - Hide bottom buttons area unless tab sidebar is hovered */
233+
:root:not([customizing]) {
234+
@media -moz-pref("mod.lean.bottom-buttons") {
235+
#zen-sidebar-foot-buttons, #zen-workspaces-button, #zen-sidebar-foot-buttons toolbarbutton {
236+
transition: ease 0.2s !important;
237+
}
238+
#titlebar:not(:hover) {
239+
zen-workspace {
240+
& > arrowscrollbox {
241+
&[overflowing] {
242+
&::after {
243+
height: 0px !important;
244+
}
245+
}
246+
}
247+
}
248+
#zen-sidebar-foot-buttons {
249+
min-height: 3px !important;
250+
gap: 1px !important;
251+
padding-top: 1px !important;
252+
toolbarbutton, #zen-workspaces-button {
253+
opacity: 0 !important;
254+
height: 0px !important;
255+
}
256+
}
257+
}
258+
}
259+
}
260+
261+
/* 7 - Ninja top buttons on Single Toolbar mode
262+
* You can hover slightly above URL bar to access the top buttons, but you can't see it */
263+
:root[zen-single-toolbar="true"] {
264+
--top-toolbar-hover-opacity: 0;
265+
@media -moz-pref("mod.lean.ninja-top-buttons") {
266+
#zen-sidebar-top-buttons, #zen-sidebar-top-buttons-customization-target, #zen-sidebar-top-buttons toolbarbutton {
267+
transition: ease 0.2s !important;
268+
}
269+
#navigator-toolbox {
270+
& #zen-appcontent-navbar-wrapper, & #zen-sidebar-top-buttons {
271+
--zen-toolbar-height: 1px !important;
272+
opacity: var(--top-toolbar-hover-opacity) !important;
273+
z-index: 9 !important;
274+
}
275+
}
276+
#navigator-toolbox:not(:hover) {
277+
& #zen-appcontent-navbar-wrapper, & #zen-sidebar-top-buttons {
278+
opacity: 0 !important;
279+
}
280+
}
281+
}
282+
}
283+
284+
285+
/* 8 - Only show bookmarks when hovering top navigation bar on Multiple & Collapsed Toolbar mode
286+
* Mimicking how it works on Single Toolbar */
287+
:root:not([zen-single-toolbar="true"]) {
288+
@media -moz-pref("mod.lean.bookmarks") {
289+
#PersonalToolbar:not([collapsed="true"]) {
290+
min-height: 2px !important;
291+
height: 2px !important;
292+
opacity: 0;
293+
transition: 0.2s ease !important;
294+
}
295+
&[customizing] {
296+
#PersonalToolbar {
297+
opacity: 1;
298+
height: 30px !important;
299+
}
300+
}
301+
#zen-appcontent-navbar-container:hover {
302+
#PersonalToolbar {
303+
opacity: 1;
304+
height: 30px !important;
305+
}
306+
}
307+
#TabsToolbar {
308+
margin-block-start: 2px !important;
309+
}
310+
}
311+
}
312+
313+
/* 9 - WIP: Bottom buttons as "pinned extensions" on Single Toolbar mode
314+
* Also hide the workspace buttons, and the separator below tabs area */
315+
316+
/* Part A: When bottom buttons is always shown */
317+
@media -moz-pref("mod.lean.pinned-ext") {
318+
#main-window[zen-single-toolbar="true"] {
319+
#titlebar {
320+
zen-workspace {
321+
& > arrowscrollbox {
322+
&[overflowing] {
323+
&::after {
324+
height: 0px !important;
325+
}
326+
}
327+
}
328+
}
329+
}
330+
#navigator-toolbox[zen-sidebar-expanded="true"] {
331+
@media -moz-pref("mod.lean.bottom-buttons") {
332+
.zen-essentials-container {
333+
:root[zen-single-toolbar="true"] &:not(:empty) {
334+
padding-top: 0px !important;
335+
}
336+
}
337+
}
338+
& #zen-sidebar-foot-buttons {
339+
order: -1 !important;
340+
justify-content: center !important;
341+
padding-inline: calc(var(--zen-toolbox-padding) - 3px) !important;
342+
gap: 4px !important;
343+
padding-top: 4px !important;
344+
padding-bottom: 0px !important;
345+
}
346+
#zen-sidebar-foot-buttons toolbarbutton {
347+
.toolbarbutton-1 {
348+
padding-inline: 0 !important;
349+
margin: 0 !important;
350+
margin-top: 0 !important;
351+
}
352+
padding-inline: 0px !important;
353+
min-width: 40px !important;
354+
&.toolbarbutton-1 {
355+
&:not([disabled]) {
356+
&:hover > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
357+
background-color: transparent !important;
358+
}
359+
}
360+
}
361+
}
362+
#zen-sidebar-foot-buttons toolbarbutton {
363+
background-color: var(--zen-toolbar-element-bg) !important;
364+
border-radius: var(--tab-border-radius) !important;
365+
}
366+
#zen-sidebar-foot-buttons toolbarbutton:hover {
367+
background-color: var(--toolbarbutton-hover-background) !important;
368+
}
369+
@media not -moz-pref("mod.lean.pinned-ext.workspaces") {
370+
#zen-workspaces-button {
371+
display: none !important;
372+
height: 0 !important;
373+
min-height: 0 !important;
374+
}
375+
}
376+
@media -moz-pref("mod.lean.pinned-ext.workspaces") {
377+
#zen-sidebar-foot-buttons {
378+
gap: 0px !important;
379+
}
380+
}
381+
}
382+
}
383+
}
384+
385+
@media not -moz-pref("mod.lean.bottom-buttons") {
386+
@media -moz-pref("mod.lean.pinned-ext") {
387+
#main-window[zen-single-toolbar="true"] {
388+
#navigator-toolbox[zen-sidebar-expanded="true"] {
389+
& #zen-sidebar-foot-buttons {
390+
min-height: 30px !important;
391+
}
392+
#zen-sidebar-foot-buttons toolbarbutton {
393+
margin-block: 1px 0px !important;
394+
height: 30px !important;
395+
}
396+
& #zen-sidebar-foot-buttons {
397+
padding-top: 4px !important;
398+
}
399+
}
134400
}
135401
}
136402
}
137403

138-
@media (-moz-bool-pref: "mod.extension.remove") {
139-
:root:not([customizing]){
140-
#unified-extensions-button {
141-
display: none !important;
404+
/* Part B: When bottom buttons are only shown in hover */
405+
@media -moz-pref("mod.lean.bottom-buttons") {
406+
@media -moz-pref("mod.lean.pinned-ext") {
407+
#main-window[zen-single-toolbar="true"] {
408+
#navigator-toolbox[zen-sidebar-expanded="true"]:hover {
409+
& #zen-sidebar-foot-buttons {
410+
min-height: 30px !important;
411+
padding-bottom: 4px !important;
412+
}
413+
#zen-sidebar-foot-buttons toolbarbutton {
414+
margin-block: 1px 0px !important;
415+
min-width: 40px !important;
416+
height: 30px !important;
417+
}
418+
}
419+
#navigator-toolbox[zen-sidebar-expanded="true"] {
420+
& #zen-sidebar-foot-buttons {
421+
min-height: 0px !important;
422+
}
423+
#zen-sidebar-foot-buttons toolbarbutton {
424+
margin-block: 1px 0px !important;
425+
height: 0px !important;
426+
}
427+
}
142428
}
143429
}
144430
}

0 commit comments

Comments
 (0)