Last active
December 10, 2023 14:49
-
-
Save 80ROkWOC4j/8036f60c712e26df754c54e839aaa9ed to your computer and use it in GitHub Desktop.
sidebery + lepton, source from https://github.com/datguypiko/Firefox-Mod-Blur and reddit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#root.root { | |
--s-frame-bg: var(--gg-black) !important; | |
--s-toolbar-bg: var(--gg-grey) !important; | |
/* --s-frame-fg: var(--gg-white) !important; */ | |
/* --s-toolbar-fg: var(--gg-white) !important; */ | |
} | |
/* --- NAV BAR --- */ | |
#nav_bar { | |
margin-bottom: -2px; | |
display: flex; | |
align-items: center; | |
padding: 0 6px; | |
height: 50px; | |
} | |
/* --- PINNED TABS --- */ | |
.PinnedTabsBar { | |
padding: 2px var(--tabs-margin) var(--tabs-margin) var(--tabs-margin) !important; | |
background: transparent; | |
} | |
/* --- TABS --- */ | |
#root.root { | |
--tabs-margin: 6px; | |
--tabs-height: 35px; | |
--tabs-width: 35px; | |
--tabs-pinned-height: var(--tabs-height); | |
--tabs-pinned-width: var(--tabs-width); | |
--tabs-indent: 16px; | |
} | |
.Tab .close:hover { | |
background: transparent !important; | |
} | |
.Tab .close > svg:hover { | |
/* Styling the tab close button */ | |
border-radius: 50px; | |
background: #d10032; | |
opacity: 100%; | |
} | |
.TabsPanel .new-tab-btn { | |
height: var(--tabs-height); | |
} | |
.TabsPanel .new-tab-btns { | |
padding: 0 6px; | |
} | |
/* --- IMPROVEMENTS --- */ | |
.TabsPanel { | |
margin: 5px 0; | |
} | |
.central-box { | |
z-index: 1; | |
background: var(--gg-black); | |
border-top-right-radius: 6px; | |
border-top-left-radius: 6px; | |
} | |
.main-box:after { | |
position: absolute; | |
z-index: 0; | |
top: -5px; | |
left: auto; | |
right: -5px; | |
content: ""; | |
background: var(--gg-grey); | |
height: 10px; | |
width: 10px; | |
} | |
/* Uncomment if you place your sidebar to the right */ | |
/* .main-box:after { | |
right: auto; | |
left: -5px; | |
} */ | |
.SearchBar { | |
background-color: var(--gg-grey); | |
} | |
.SearchBar .clear-btn { | |
background: transparent !important; | |
opacity: 100%; | |
} | |
.SearchBar .clear-btn:before { | |
background: transparent !important; | |
opacity: 0; | |
} | |
.SearchBar .clear-btn svg { | |
background: transparent !important; | |
} | |
.SearchBar .clear-btn svg:hover { | |
border-radius: var(--search-border-radius); | |
background: var(--gg-red) !important; | |
} | |
.popup { | |
margin-top: 50px; | |
max-width: 97%; | |
} | |
/* custom */ | |
.Tab[data-pin="false"] .body { | |
border: 1px solid #3333; | |
} | |
.Tab[data-pin="true"] .body { | |
} | |
.PinnedTabsBar { | |
} | |
.AnimatedTabList { | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** Import Lepton stylesheet (Chrome) *****************************************/ | |
@import url("css/leptonChrome.css"); | |
/** Add your custom styles below **********************************************/ | |
/* Enable option to edit bookmark URLs under Add Bookmark (blue star) menu */ | |
/* | |
.editBMPanel_locationRow { | |
display: initial !important; | |
} | |
*/ | |
/* Disable Email Image/Audio/Video and Set as Desktop Background context menu items */ | |
/* | |
#context-sendimage, | |
#context-sendvideo, | |
#context-sendaudio, | |
#context-sep-setbackground, | |
#context-setDesktopBackground { | |
display: none !important; | |
} | |
*/ | |
/* remove TabsToolbar when turn on tree style tab */ | |
html#main-window #TabsToolbar { | |
visibility: collapse; | |
} | |
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header { | |
display: none; | |
} | |
#urlbar:not([focused]) #urlbar-input{ text-align: center !important; } | |
/* tree style tab config */ | |
:root { | |
--sidebar-default-width: 100px; | |
--sidebar-hover-width: 200px; | |
} | |
/* addons */ | |
/* Clean and tight extensions menu */ | |
#unified-extensions-panel #unified-extensions-view { | |
width: 100% !important; /* For firefox v115.x */ | |
} | |
#unified-extensions-view{ | |
--uei-icon-size: 22px; /* Change icon size */ | |
--firefoxcss-number-of-extensions-in-a-row: 5; /* Increase to the number of icons you want in one row */ | |
} | |
#unified-extensions-view .panel-header, | |
#unified-extensions-view .panel-header + toolbarseparator, | |
#unified-extensions-view .panel-subview-body + toolbarseparator, | |
#unified-extensions-view #unified-extensions-manage-extensions, | |
#unified-extensions-view .unified-extensions-item-menu-button.subviewbutton, | |
#unified-extensions-view .unified-extensions-item-action-button .unified-extensions-item-contents{ | |
display:none !important; | |
} | |
#unified-extensions-view .panel-subview-body { | |
padding:4px !important; | |
} | |
#unified-extensions-view .unified-extensions-item .unified-extensions-item-icon, | |
#unified-extensions-view .unified-extensions-item .toolbarbutton-badge-stack { | |
margin-inline-end: 0px !important; | |
} | |
#unified-extensions-view #overflowed-extensions-list, | |
#unified-extensions-view #unified-extensions-area, | |
#unified-extensions-view .unified-extensions-list { | |
display: grid !important; | |
grid-template-columns: repeat(var(--firefoxcss-number-of-extensions-in-a-row),auto); | |
justify-items:left !important; | |
align-items:left !important; | |
} | |
#unified-extensions-view .unified-extensions-list .unified-extensions-item, | |
#unified-extensions-view .unified-extensions-list{ | |
max-width: max-content; | |
} | |
#unified-extensions-view #unified-extensions-area { | |
padding-bottom: 3px !important; | |
border-bottom: 1px solid #aeaeae33 !important; | |
} | |
#unified-extensions-view .unified-extensions-list { | |
/* border-top: 1px solid #aeaeae33 !important; */ | |
} | |
#wrapper-edit-controls:is([place="palette"], | |
[place="panel"]) > #edit-controls, #wrapper-zoom-controls:is([place="palette"], | |
[place="panel"]) > #zoom-controls, :is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons { | |
margin: 0px !important; | |
} | |
/* ----------------------------------------------------------------- */ | |
/* ---------- MacOS style close/min/max window buttons ------------- */ | |
/* ----------------------------------------------------------------- */ | |
#navigator-toolbox #nav-bar { | |
padding-left: var(--firefoxcss-control-buttons-margin) !important; | |
padding-right: initial !important; | |
} | |
:root { | |
--toolbar-start-end-padding: 3px !important; | |
/* padding of frst and last child ,default - 8px */ | |
} | |
#navigator-toolbox:not([inFullscreen]) | |
#TabsToolbar | |
.titlebar-buttonbox-container { | |
visibility: visible !important; | |
position: absolute !important; | |
top: 2px !important; | |
left: 0 !important; | |
right: unset !important; | |
padding-top: 10px !important; | |
padding-bottom: 2px !important; | |
padding-right: 2px !important; | |
padding-left: 8px !important; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-button { | |
width: 14px !important; | |
min-width: 14px !important; | |
min-height: 14px !important; | |
height: 14px !important; | |
} | |
#navigator-toolbox[inFullscreen] #TabsToolbar .titlebar-buttonbox-container { | |
padding-top: 4px !important; | |
padding-bottom: 4px !important; | |
padding-right: 4px !important; | |
padding-left: 8px !important; | |
margin: 0 !important; | |
align-items: center !important; | |
order: -1 !important; | |
} | |
#navigator-toolbox[inFullscreen] #nav-bar { | |
padding-left: initial !important; | |
} | |
:root:-moz-window-inactive:not([customizing]) | |
:is(.titlebar-buttonbox) | |
> toolbarbutton:not(:hover) { | |
opacity: 0.65 !important; | |
} | |
:is(.titlebar-buttonbox) .toolbarbutton-icon { | |
opacity: 1 !important; | |
appearance: none !important; | |
} | |
#TabsToolbar .titlebar-button > .toolbarbutton-icon { | |
width: 14px !important; | |
min-width: 14px !important; | |
min-height: 14px !important; | |
height: 14px !important; | |
stroke: none !important; | |
} | |
#TabsToolbar .titlebar-buttonbox { | |
margin-right: 2px !important; | |
margin-left: 2px !important; | |
} | |
#TabsToolbar .titlebar-button { | |
background-color: transparent !important; | |
appearance: none !important; | |
padding: 0px !important; | |
margin: 0 !important; | |
padding-left: 0px !important; | |
padding-right: 0px !important; | |
} | |
#TabsToolbar .titlebar-close { | |
appearance: none !important; | |
-moz-box-ordinal-group: 0 !important; | |
order: 0 !important; | |
} | |
#TabsToolbar .titlebar-min { | |
appearance: none !important; | |
-moz-box-ordinal-group: 1 !important; | |
order: 1 !important; | |
} | |
#TabsToolbar .titlebar-max, | |
#TabsToolbar .titlebar-restore { | |
appearance: none !important; | |
-moz-box-ordinal-group: 2 !important; | |
order: 2 !important; | |
} | |
#TabsToolbar | |
.titlebar-buttonbox-container:not(:hover) | |
.titlebar-buttonbox | |
.titlebar-button { | |
background-color: hsla(0, 0%, 65%, 1) !important; | |
transition: background-color 400ms ease 400ms !important; | |
} | |
#TabsToolbar | |
.titlebar-buttonbox-container | |
.titlebar-button | |
> .toolbarbutton-icon { | |
list-style-image: none !important; | |
margin: 0px !important; | |
padding: 0px !important; | |
} | |
#TabsToolbar | |
.titlebar-buttonbox-container | |
.titlebar-buttonbox | |
.titlebar-button { | |
border-radius: 50% !important; | |
margin-right: 8px !important; | |
position: relative !important; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-min { | |
background-color: #fac536 !important; | |
overflow: hidden !important; | |
transition: background-color 200ms ease !important; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-min::before { | |
content: ""; | |
position: absolute; | |
top: 100%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
width: 70%; | |
height: 2px; | |
opacity: 0; | |
background: rgba(0, 0, 0, 0.6); | |
border-radius: 2px; | |
transition: 200ms; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-min:hover::before { | |
opacity: 1; | |
top: 50%; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-max, | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-restore { | |
background: #39ea49 !important; | |
overflow: hidden !important; | |
transition: background-color 200ms ease !important; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-max::before { | |
content: ""; | |
position: absolute; | |
top: 100%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
width: 55%; | |
height: 55%; | |
opacity: 0; | |
background: rgba(0, 0, 0, 0.6); | |
border-radius: 2px; | |
transition: 200ms; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-max::after { | |
content: ""; | |
position: absolute; | |
top: 100%; | |
left: 50%; | |
transform: translate(-50%, -50%) rotate(-45deg); | |
width: 3px; | |
height: 80%; | |
opacity: 0; | |
background: #39ea49; | |
transition: 200ms; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover::before, | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover::after { | |
opacity: 1; | |
top: 50%; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-close { | |
background: #f25056 !important; | |
overflow: hidden !important; | |
transition: background-color 200ms ease !important; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-close::before { | |
content: ""; | |
position: absolute; | |
top: 100%; | |
left: 50%; | |
transform: translate(-50%, -50%) rotate(-45deg); | |
width: 2px; | |
height: 9px; | |
opacity: 0; | |
background: rgba(0, 0, 0, 0.65); | |
border-radius: 1px; | |
transition: 200ms; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-close::after { | |
content: ""; | |
position: absolute; | |
top: 100%; | |
left: 50%; | |
transform: translate(-50%, -50%) rotate(45deg); | |
width: 2px; | |
height: 9px; | |
opacity: 0; | |
background: rgba(0, 0, 0, 0.65); | |
border-radius: 1px; | |
transition: 200ms; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover::before, | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover::after { | |
opacity: 1; | |
top: 50%; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-restore:before { | |
content: ""; | |
position: absolute; | |
top: 100%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
width: 8px; | |
height: 8px; | |
opacity: 0; | |
background: rgba(0, 0, 0, 0.65); | |
border-radius: 2px; | |
transition: 200ms; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-restore:after { | |
content: ""; | |
position: absolute; | |
top: 100%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
width: 4px; | |
height: 4px; | |
opacity: 0; | |
background: #39ea49; | |
border-radius: 0px; | |
transition: 200ms; | |
} | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-restore:hover::before, | |
#TabsToolbar .titlebar-buttonbox-container .titlebar-restore:hover::after { | |
opacity: 1; | |
top: 50%; | |
} | |
@media only screen and (max-width: 670px) { | |
#main-window | |
#navigator-toolbox:not([inFullscreen]) | |
#TabsToolbar | |
.titlebar-buttonbox-container { | |
visibility: visible !important; | |
position: relative !important; | |
padding-top: 6px !important; | |
padding-bottom: 2px !important; | |
padding-right: 2px !important; | |
padding-left: 8px !important; | |
order: -1 !important; | |
} | |
#main-window #navigator-toolbox:not([inFullscreen]) #nav-bar { | |
padding-left: initial !important; | |
} | |
} | |
/* sidebery */ | |
:root { | |
--sidebar-default-width: 200px; | |
--sidebar-hover-width: 320px; | |
} | |
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] { | |
position: relative !important; | |
min-width: var(--sidebar-default-width) !important; | |
max-width: var(--sidebar-default-width) !important; | |
z-index: 10; | |
opacity: 1; | |
transition: | |
margin-right 0.3s cubic-bezier(1,0,.5,0), | |
min-width 0.3s cubic-bezier(1,0,.5,0), | |
max-width 0.3s cubic-bezier(1,0,.5,0), | |
opacity 0.3s cubic-bezier(1,0,.5,0) !important; | |
} | |
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover { | |
margin-right: calc(var(--sidebar-hover-width) * -1 + var(--sidebar-default-width)) !important; | |
min-width: var(--sidebar-hover-width) !important; | |
max-width: var(--sidebar-hover-width) !important; | |
z-index: 1; | |
opacity: 1; | |
transition: | |
margin-right 0.1s cubic-bezier(0.25, 0.1, 0.25, 1), | |
min-width 0.1s cubic-bezier(0.25, 0.1, 0.25, 1), | |
max-width 0.1s cubic-bezier(0.25, 0.1, 0.25, 1), | |
opacity 0.1s cubic-bezier(0.25, 0.1, 0.25, 1) !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment