mirror of
https://github.com/Horhik/dotfiles.git
synced 2025-01-09 01:01:05 +00:00
974 lines
27 KiB
CSS
974 lines
27 KiB
CSS
/*! SHIMMMER v2.14 */
|
||
/*? https://github.com/nuclearcodecat/shimmer */
|
||
|
||
|
||
/* browser toolbox prompt hack - set devtools.debugger.prompt-connection to false */
|
||
|
||
/*? shimmer variables */
|
||
:root {
|
||
/*? urlbar border radius */
|
||
--shimmer-urlbar-rounding: 8px;
|
||
--shimmer-urlbar-inner-rounding: calc(var(--shimmer-urlbar-rounding) * .75);
|
||
|
||
/*? max tab width */
|
||
--shimmer-tab-max-width: 14em;
|
||
/*? min tab width */
|
||
--shimmer-tab-min-width: 9em;
|
||
|
||
/* --shimmer-tab-height: 32px; */
|
||
/* --shimmer-titlebar-height: calc(var(--shimmer-tab-height) + 6px); */
|
||
--shimmer-tab-border-radius: 8px;
|
||
--shimmer-browser-border-radius8;
|
||
--shimmer-top-bottom-browser-margin: 8px;
|
||
|
||
/* could be hardcoded in some places... */
|
||
--shimmer-btn-anim: background 0.075s linear, opacity 0.075s linear;
|
||
|
||
/*? gap between window control buttons */
|
||
--shimmer-winctr-gap: 5px;
|
||
/*? margin around winctr buttons */
|
||
--shimmer-winctr-margin: 12px;
|
||
}
|
||
|
||
/*? overwritten variables */
|
||
:root {
|
||
--arrowpanel-menuitem-margin-inline: 5px !important;
|
||
--arrowpanel-header-min-height: calc(calc(var(--arrowpanel-header-back-icon-full-width) + (var(--panel-separator-margin-horizontal) * 2)) * 0.5) !important;
|
||
--arrowpanel-menuitem-padding: 4px 8px !important;
|
||
--arrowpanel-border-radius: 8px !important;
|
||
--arrowpanel-menuitem-border-radius: calc(var(--arrowpanel-border-radius) / 1.65) !important;
|
||
/* --var-tab-min-height: 10px !important; */
|
||
/* --tab-border-radius: var(--shimmer-tab-border-radius) !important; */
|
||
/*? disable opacity change when tabbed out */
|
||
--inactive-titlebar-opacity: 1 !important;
|
||
--splitter-width: 8px !important;
|
||
}
|
||
|
||
/*? customize context menu */
|
||
/* #context-back, */
|
||
/* #context-bookmarklink, */
|
||
/* #context-bookmarkpage, */
|
||
/* #context-forward, */
|
||
/* #context-inspect, */
|
||
#context-inspect-a11y,
|
||
/* #context-navigation, */
|
||
/* #context-openlink, */
|
||
/* #context-openlinkintab, */
|
||
/* #context-openlinkinusercontext-menu, */
|
||
/* #context-openlinkprivate, */
|
||
#context-pocket,
|
||
/* #context-reload, */
|
||
#context-savelink,
|
||
#context-savelinktopocket,
|
||
/* #context-savepage, */
|
||
/* #context-searchselect, */
|
||
/* #context-selectall, */
|
||
/* #context-sendlinktodevice, */
|
||
/* #context-sendpagetodevice, */
|
||
/* #context-sep-navigation, */
|
||
/* #context-sep-open, */
|
||
/* #context-sep-selectall, */
|
||
#context-sep-sendlinktodevice,
|
||
#context-sep-sendpagetodevice,
|
||
/* #context-sep-viewbgimage, */
|
||
#context-sep-viewsource,
|
||
/* #context-stop, */
|
||
/* #context-viewbgimage, */
|
||
/* #context-viewinfo, */
|
||
#context-viewpartialsource-selection,
|
||
#context-viewsource,
|
||
/* #inspect-separator, */
|
||
#screenshots_mozilla_org_create-screenshot {
|
||
display: none !important;
|
||
}
|
||
|
||
/*? slim scrollbars everywhear!!!! */
|
||
* {
|
||
scrollbar-width: thin !important;
|
||
}
|
||
|
||
@media (-moz-bool-pref: "shimmer.hide-sidebar-button") {
|
||
#sidebar-button {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/*! ====== titlebar ====== */
|
||
|
||
.toolbarbutton-animatable-box>image {
|
||
/*? change reload button animation length */
|
||
animation-duration: 0.7s !important;
|
||
animation-timing-function: ease-in-out !important;
|
||
}
|
||
|
||
/*? change bookmark star button to yellow_ when starred */
|
||
#star-button[starred="true"] {
|
||
fill: #f7e617 !important;
|
||
stroke: #000 !important;
|
||
stroke-width: 2px !important;
|
||
filter: drop-shadow(0px 0px 0.5px #000) !important;
|
||
}
|
||
|
||
/*? taller navbar */
|
||
@media not (-moz-bool-pref: "shimmer.shorter-navbar") {
|
||
#navigator-toolbox, #nav-bar {
|
||
min-height: 50px !important;
|
||
}
|
||
}
|
||
#TabsToolbar {
|
||
height: 100% !important;
|
||
visibility: collapse !important;
|
||
|
||
}
|
||
|
||
|
||
/*? make extensions buttons reach the entire height of navbar */
|
||
#nav-bar-customization-target toolbarbutton {
|
||
height: 100% !important;
|
||
}
|
||
|
||
#urlbar {
|
||
margin: 0 !important;
|
||
}
|
||
|
||
|
||
/*? move the window control buttons to the same row as urlbar */
|
||
#main-window[titlepreface=""] #navigator-toolbox {
|
||
display: grid !important;
|
||
grid-template-rows: repeat(4, auto);
|
||
}
|
||
#PersonalToolbar:not([collapsed="true"]) {
|
||
padding-bottom: calc(var(--shimmer-top-bottom-browser-margin) / 2) !important;
|
||
}
|
||
#main-window[titlepreface=""] #PersonalToolbar {
|
||
grid-area: 4 / 1 / 5 / 3 !important;
|
||
}
|
||
#main-window[titlepreface=""] #toolbar-menubar {
|
||
grid-area: 1 / 1 / 2 / 3 !important;
|
||
}
|
||
@media not (-moz-bool-pref: "shimmer.reverse-winctr-buttons-side") {
|
||
#navigator-toolbox {
|
||
grid-template-columns: 1fr auto !important;
|
||
}
|
||
|
||
#main-window[titlepreface=""] #nav-bar {
|
||
grid-area: 3 / 1 / 4 / 2 !important;
|
||
}
|
||
|
||
@media (-moz-bool-pref: "shimmer.nightly") {
|
||
#main-window[titlepreface=""] #TabsToolbar {
|
||
grid-area: 3 / 2 / 4 / 3 !important;
|
||
}
|
||
}
|
||
@media not (-moz-bool-pref: "shimmer.nightly") {
|
||
#main-window[titlepreface=""] #titlebar {
|
||
grid-area: 3 / 2 / 4 / 3 !important;
|
||
}
|
||
}
|
||
}
|
||
@media (-moz-bool-pref: "shimmer.reverse-winctr-buttons-side") {
|
||
#navigator-toolbox {
|
||
grid-template-columns: auto 1fr !important;
|
||
}
|
||
|
||
#main-window[titlepreface=""] #nav-bar {
|
||
grid-area: 3 / 2 / 4 / 3 !important;
|
||
}
|
||
|
||
@media (-moz-bool-pref: "shimmer.nightly") {
|
||
#main-window[titlepreface=""] #TabsToolbar {
|
||
grid-area: 3 / 1 / 4 / 2 !important;
|
||
}
|
||
}
|
||
@media not (-moz-bool-pref: "shimmer.nightly") {
|
||
#main-window[titlepreface=""] #titlebar {
|
||
grid-area: 3 / 1 / 4 / 2 !important;
|
||
}
|
||
}
|
||
|
||
#TabsToolbar {
|
||
flex-direction: row-reverse !important;
|
||
}
|
||
}
|
||
|
||
/*TODO possible fix for macos icons not centered (#3) */
|
||
.titlebar-buttonbox-container {
|
||
justify-content: space-evenly !important;
|
||
align-items: center !important;
|
||
}
|
||
.titlebar-buttonbox {
|
||
height: 100% !important;
|
||
align-items: center !important;
|
||
}
|
||
.titlebar-button {
|
||
height: 100% !important;
|
||
}
|
||
|
||
/*? make the window grabbable at the top, but not the window control buttons */
|
||
/* #main-window[titlepreface=""] #nav-bar {
|
||
border-top: 1px solid rgba(0, 0, 0, 0) !important;
|
||
}
|
||
#main-window[titlepreface=""] .toolbar-items {
|
||
margin-top: 1px !important;
|
||
} */
|
||
|
||
/*? hide native tabs */
|
||
#main-window[titlepreface=""] #TabsToolbar > .toolbar-items {
|
||
display: none !important;
|
||
}
|
||
|
||
/*? make navigation buttons white_ when sidebar open */
|
||
#main-window[titlepreface=""] #navigator-toolbox {
|
||
background: var(--toolbar-bgcolor) !important;
|
||
}
|
||
|
||
/*? hide spacers when sidebery open */
|
||
#main-window[titlepreface=""] #TabsToolbar .titlebar-spacer {
|
||
display: none;
|
||
}
|
||
|
||
/*! === menubar === */
|
||
|
||
/*? hide regular winctr buttons when menubar is open */
|
||
@media (-moz-bool-pref: "shimmer.nightly") {
|
||
#toolbar-menubar:not([inactive]) ~ #TabsToolbar .titlebar-buttonbox-container {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
#toolbar-menubar:not([inactive]) {
|
||
width: 100vw !important;
|
||
overflow: hidden !important;
|
||
min-height: 0 !important;
|
||
height: auto !important;
|
||
}
|
||
|
||
/*? hide if sidebery open and stable release */
|
||
@media not (-moz-bool-pref: "shimmer.nightly") {
|
||
#main-window[titlepreface=""] #titlebar #toolbar-menubar {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/*! === urlbar === */
|
||
|
||
/*? rounded url bar and box */
|
||
#urlbar-background {
|
||
background: var(--toolbar-field-background-color) !important;
|
||
/* background: color-mix(in srgb, var(--toolbar-bgcolor) 90%, rgba(0, 0, 0, 255)) !important; */
|
||
border-radius: var(--shimmer-urlbar-rounding) !important;
|
||
transition: all 0.1s linear !important;
|
||
}
|
||
|
||
/*? rounded buttons inside urlbar (firefox logo on about pages, padlock, trans, etc.) */
|
||
#identity-box > box, #tracking-protection-icon-container, #page-action-buttons > *, #urlbar-revert-button-container, #urlbar-searchmode-switcher {
|
||
border-radius: var(--shimmer-urlbar-rounding) !important;
|
||
}
|
||
|
||
/*? needed for popup transition to work */
|
||
#urlbar {
|
||
margin-top: 0 !important;
|
||
transition: margin-top 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
|
||
}
|
||
|
||
/*? make the background of extended urlbar move down and BROKEN drop a blur behing */
|
||
#urlbar[breakout-extend] {
|
||
position: fixed !important;
|
||
margin-top: 12vh !important;
|
||
/* margin-left: 8vw !important; */
|
||
z-index: 9999 !important;
|
||
transition: margin-top 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
|
||
/* backdrop-filter: blur(8px) !important; */
|
||
background: rgba(0, 0, 0, 0) !important;
|
||
/* border-radius: 20px; */
|
||
left: 10% !important;
|
||
width: calc(100vw - 20%) !important;
|
||
}
|
||
|
||
#urlbar[breakout-extend] #urlbar-background {
|
||
background: var(--toolbar-field-focus-background-color) !important;
|
||
transition: all 0.1s linear !important;
|
||
}
|
||
|
||
/*? urlbox backdrop */
|
||
#urlbar[breakout-extend]::before{
|
||
content: '' !important;
|
||
width: 100vw !important;
|
||
height: 100vh !important;
|
||
position: fixed !important;
|
||
pointer-events: none !important;
|
||
overflow: hidden !important;
|
||
top: 0 !important;
|
||
left: 0 !important;
|
||
background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 65%, rgba(0, 0, 0, 0)) !important;
|
||
}
|
||
|
||
|
||
@media (min-width: 800px) {
|
||
/*? urlbar bigger text */
|
||
#urlbar[breakout-extend] #urlbar-input {
|
||
font-size: 1.5rem !important;
|
||
}
|
||
|
||
/*? taller urlbar for bigger text when extended */
|
||
#urlbar[breakout-extend] .urlbar-input-container {
|
||
height: 48px !important;
|
||
}
|
||
}
|
||
|
||
/*? centered text when urlbar not in use */
|
||
#urlbar:not(:is([breakout-extend])) #urlbar-input {
|
||
text-align: center !important;
|
||
}
|
||
|
||
/*? center the text further */
|
||
#urlbar-input {
|
||
margin-right: 40px !important /* width of identity box */;
|
||
}
|
||
|
||
/*? hide search one offs */
|
||
@media not (-moz-bool-pref: "shimmer.show-search-one-offs") {
|
||
.search-one-offs {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/*? fix for floating urlbar */
|
||
@media (-moz-bool-pref: "shimmer.nightly") {
|
||
#urlbar:not([breakout-extend]) {
|
||
top: auto !important;
|
||
}
|
||
}
|
||
|
||
/*? hide 1px line below urlbar */
|
||
.urlbarView-body-inner {
|
||
border-top: none !important;
|
||
}
|
||
|
||
/*? hide border below top bar */
|
||
#navigator-toolbox {
|
||
border: 0px !important;
|
||
}
|
||
|
||
/*? make rounded borders have nice color */
|
||
#browser {
|
||
background: var(--toolbar-bgcolor) !important;
|
||
}
|
||
|
||
/*? if popup window, make urlbar smaller and centered */
|
||
#main-window[chromehidden*="toolbar"] #urlbar-container {
|
||
max-width: 90% !important;
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
}
|
||
|
||
/*! === findbar === */
|
||
|
||
findbar {
|
||
border: 0 !important;
|
||
/*? relative for margins */
|
||
position: relative !important;
|
||
border-radius: 16px !important;
|
||
bottom: 60px !important;
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
width: 530px !important;
|
||
height: 3rem !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
/*? fix for relative positioning */
|
||
margin-top: -40px !important;
|
||
border: 0 !important;
|
||
transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
|
||
overflow-x: visible !important;
|
||
filter: drop-shadow(0px 0px 1px color-mix(in srgb, var(--lwt-text-color) 60%, rgba(0, 0, 0, 0)));
|
||
}
|
||
|
||
findbar[hidden]{
|
||
margin-bottom: 0 !important;
|
||
opacity: 0 !important;
|
||
background: rgba(0, 0, 0, 0) !important;
|
||
transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
|
||
}
|
||
|
||
findbar:not([hidden]) {
|
||
opacity: 1 !important;
|
||
background: var(--lwt-accent-color) !important;
|
||
}
|
||
|
||
.findbar-container, .findbar-container > hbox {
|
||
height: 100% !important;
|
||
}
|
||
|
||
.findbar-container {
|
||
margin-left: 7px !important;
|
||
}
|
||
|
||
/*? change text to icons for smaller findbar */
|
||
.findbar-container checkbox::after {
|
||
height: 16px;
|
||
font-size: 14px;
|
||
background-size: cover;
|
||
display: flex;
|
||
align-items: center;
|
||
-moz-context-properties: fill;
|
||
fill: currentColor;
|
||
color: inherit;
|
||
}
|
||
.findbar-highlight::after {
|
||
content: '';
|
||
background: url(./assets/icons/hl.svg) no-repeat;
|
||
width: 18px;
|
||
background-position-y: -1px;
|
||
}
|
||
.findbar-match-diacritics::after {
|
||
content: 'ąâ';
|
||
font-weight: 600;
|
||
}
|
||
.findbar-entire-word::after {
|
||
content: '';
|
||
background: url(./assets/icons/word.svg) no-repeat;
|
||
width: 20px;
|
||
background-position-y: -2px;
|
||
}
|
||
.findbar-case-sensitive::after {
|
||
content: 'Aa';
|
||
font-weight: 600;
|
||
}
|
||
|
||
/*? hide all text for findbar checkboxes */
|
||
.findbar-container checkbox > .checkbox-label-box {
|
||
display: none !important;
|
||
}
|
||
|
||
.findbar-textbox {
|
||
border-radius: 11px !important;
|
||
font-family: monospace !important;
|
||
padding: 5px 8px !important;
|
||
width: 16em !important;
|
||
}
|
||
|
||
.findbar-closebutton:hover {
|
||
opacity: 1 !important;
|
||
background: var(--toolbarbutton-hover-background) !important;
|
||
}
|
||
.findbar-closebutton {
|
||
opacity: 1 !important;
|
||
background: var(--lwt-accent-color) !important;
|
||
/* wasn't square for some reason */
|
||
width: auto !important;
|
||
}
|
||
|
||
/*? move matched amount below main findbar */
|
||
.found-matches {
|
||
position: absolute !important;
|
||
padding: 20px 13px 3px 10px !important;
|
||
top: 14px !important;
|
||
background: var(--lwt-accent-color) !important;
|
||
/* border: solid var(--arrowpanel-border-color) 1px !important; */
|
||
left: -12px !important;
|
||
border-bottom-left-radius: 12px !important;
|
||
border-bottom-right-radius: 12px !important;
|
||
z-index: 9 !important;
|
||
}
|
||
.findbar-find-status {
|
||
display: none !important;
|
||
}
|
||
.found-matches::before {
|
||
z-index: 8 !important;
|
||
}
|
||
.found-matches::after {
|
||
position: absolute;
|
||
display: block;
|
||
content: '';
|
||
width: 16px;
|
||
height: 22px;
|
||
background: var(--lwt-accent-color);
|
||
right: -6px;
|
||
top: 12px;
|
||
transform: rotate(45deg);
|
||
}
|
||
.findbar-textbox {
|
||
z-index: 10 !important;
|
||
}
|
||
|
||
|
||
/*? compact private browsing indicator */
|
||
#private-browsing-indicator-with-label > label, .private-browsing-indicator-label {
|
||
display: none !important;
|
||
}
|
||
.private-browsing-indicator-icon {
|
||
width: 24px !important;
|
||
height: 24px !important;
|
||
}
|
||
|
||
#PanelUI-menu-button {
|
||
display: flex !important;
|
||
}
|
||
|
||
@media (max-width: 620px) {
|
||
#PanelUI-menu-button {
|
||
display: none !important;
|
||
}
|
||
|
||
#unified-extensions-button {
|
||
margin-right: 12px !important;
|
||
}
|
||
}
|
||
|
||
/*? make the go button bigger in urlbar */
|
||
.urlbar-go-button {
|
||
height: 100% !important;
|
||
width: auto !important;
|
||
padding: 1.5% !important;
|
||
border-radius: var(--shimmer-urlbar-inner-rounding) !important;
|
||
}
|
||
|
||
|
||
/*? rounded results */
|
||
.urlbarView-row {
|
||
border-radius: var(--shimmer-urlbar-inner-rounding) !important;
|
||
}
|
||
/*? for some reason the results get clipped so adding some padding */
|
||
.urlbarView {
|
||
padding: 0 5px !important;
|
||
}
|
||
|
||
.urlbarView-row:hover {
|
||
background: var(--urlbar-box-hover-bgcolor) !important;
|
||
}
|
||
|
||
/*? small separator between results and search bar */
|
||
/* .urlbarView-body-outer {
|
||
border-top: 1px rgba(0, 0, 0, 0.15) solid !important;
|
||
} */
|
||
.urlbarView-body-outer::before {
|
||
content: '';
|
||
width: 95%;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
height: 1px;
|
||
background: #aaa;
|
||
opacity: 0.2;
|
||
display: block;
|
||
mix-blend-mode: difference;
|
||
}
|
||
.urlbarView-body-inner {
|
||
border: 0 !important;
|
||
}
|
||
|
||
/*? increase padding in urlbar */
|
||
#urlbar-results {
|
||
padding-bottom: 8px !important;
|
||
}
|
||
|
||
/*? seamless transition */
|
||
/* #sidebar-box {
|
||
box-shadow: -10px -100px 0px 100px var(--toolbar-bgcolor),
|
||
0 0px 20px 15px var(--lwt-accent-color);
|
||
} */
|
||
/*? hide the hiding box shadow */
|
||
/* #navigator-toolbox {
|
||
z-index: 2 !important;
|
||
} */
|
||
|
||
/*? add margin to left of browser when sidebar hidden */
|
||
#sidebar-box[hidden="true"] ~ #tabbrowser-tabpanels {
|
||
padding-left: 3px !important;
|
||
}
|
||
|
||
#tabbrowser-tabpanels, #sidebar-box {
|
||
background: rgba(0, 0, 0, 0) !important;
|
||
}
|
||
|
||
/*! === floating statuspanel === */
|
||
|
||
/*? move statuspanel */
|
||
#statuspanel {
|
||
bottom: 11px !important;
|
||
left: 11px !important;
|
||
}
|
||
#statuspanel[mirror] {
|
||
left: auto !important;
|
||
right: 18px !important;
|
||
}
|
||
|
||
/*? round statuspanel */
|
||
#statuspanel, #statuspanel-label {
|
||
border-radius: 10px !important;
|
||
}
|
||
|
||
/*? border and alternative statuspanel padding */
|
||
#statuspanel-label {
|
||
padding: 3px 8px !important;
|
||
border: solid 1px var(--button-background-color-active) !important;
|
||
}
|
||
|
||
/*? color the statuspanel */
|
||
#statuspanel-label {
|
||
background: var(--lwt-accent-color) !important;
|
||
color: var(--lwt-text-color) !important;
|
||
}
|
||
|
||
#statuspanel, #statuspanel[type="overLink"] {
|
||
transition: opacity 75ms, visibility 75ms !important;
|
||
}
|
||
|
||
/*! === tabs === */
|
||
|
||
/*? tab on titlebar that's not pinned */
|
||
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[fadein]:not([pinned]) {
|
||
/*? min tab width */
|
||
min-width: var(--shimmer-tab-min-width) !important;
|
||
/*? max tab width */
|
||
max-width: var(--shimmer-tab-max-width) !important;
|
||
}
|
||
|
||
/*? make tab background round and small */
|
||
.tab-background {
|
||
min-height: 0 !important;
|
||
border: solid 1px color-mix(in srgb, var(--tab-selected-bgcolor) 90%, #000);
|
||
box-shadow: 0 0 0 #fff !important;
|
||
/* CHANGED check overwritten vars for tab rounding */
|
||
border-radius: var(--shimmer-tab-border-radius) !important;
|
||
}
|
||
|
||
/*? show tab close buttons when hovering tab */
|
||
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:not([pinned]):hover .tab-close-button {
|
||
display: block !important;
|
||
}
|
||
|
||
/*? hide shadow on tabbrowser (overflow already indicated by arrow clickable) */
|
||
spacer[part="overflow-end-indicator"], spacer[part="overflow-start-indicator"] {
|
||
display: none !important;
|
||
}
|
||
|
||
/*? change tab background color */
|
||
.tab-background {
|
||
background: color-mix(in srgb, var(--tab-selected-bgcolor) 20%, rgba(0, 0, 0, 0));
|
||
}
|
||
|
||
/*? hide firefox view separator */
|
||
#tabbrowser-tabs {
|
||
border: 0 !important;
|
||
}
|
||
|
||
/*? tab height and x button pos */
|
||
#tabbrowser-tabs[orient="vertical"] .tab-background {min-height: 28px !important;}
|
||
|
||
#tabbrowser-tabs[orient="vertical"][expanded] {
|
||
min-width: 400px !important;
|
||
}
|
||
|
||
@media not (-moz-bool-pref: "shimmer.taller-tabs") {
|
||
#tabbrowser-tabs[orient="horizontal"], .tabbrowser-tab {
|
||
min-height: 38px !important;
|
||
height: 38px !important;
|
||
}
|
||
|
||
.tab-close-button {
|
||
margin-inline-end: -7px !important;
|
||
}
|
||
}
|
||
@media (-moz-bool-pref: "shimmer.taller-tabs") {
|
||
#tabbrowser-tabs[orient="horizontal"], .tabbrowser-tab {
|
||
min-height: 45px !important;
|
||
height: 45px !important;
|
||
}
|
||
|
||
.tab-close-button {
|
||
margin-inline-end: -3px !important;
|
||
}
|
||
}
|
||
|
||
/*? make inner tab html occupy whole height (for some reason wouldn't happen to pinned tab) */
|
||
.tab-stack {
|
||
height: 100% !important;
|
||
}
|
||
|
||
/*? don't change background behind tabs even when window inactive */
|
||
#navigator-toolbox, #navigator-toolox:-moz-window-inactive {
|
||
background: var(--lwt-accent-color) !important;
|
||
}
|
||
|
||
/*? rounded tab close button */
|
||
.tab-close-button {
|
||
border-radius: var(--shimmer-tab-border-radius) !important;
|
||
}
|
||
|
||
.tab-close-button, .tab-close-button:hover {
|
||
transition: var(--shimmer-btn-anim) !important;
|
||
}
|
||
|
||
/*? reduce max tab width, breaks everything lol */
|
||
/* .tabbrowser-tab {
|
||
max-width: 14em !important;
|
||
} */
|
||
|
||
/*? minimal selected tab width */
|
||
@media not (-moz-bool-pref: "shimmer.dont-expand-selected-tab") {
|
||
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:not([pinned])[selected] {
|
||
min-width: 14em !important;
|
||
}
|
||
}
|
||
|
||
/*? fix for moving tabs looking weird */
|
||
#tabbrowser-tabs {
|
||
&[orient="horizontal"] {
|
||
&[movingtab] {
|
||
padding-bottom: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
/*! === sidebar === */
|
||
|
||
/*? hide header, or give good color */
|
||
@media not (-moz-bool-pref: "shimmer.show-sidebar-header") {
|
||
#sidebar-header {
|
||
display: none !important;
|
||
}
|
||
}
|
||
#sidebar-header {
|
||
background: var(--lwt-accent-color) !important;
|
||
}
|
||
|
||
/*? remove ugly border below "tabs" text */
|
||
#sidebar-header {
|
||
border-bottom: 0 !important;
|
||
}
|
||
|
||
#sidebar-box:not([hidden]), #sidebar-box:not([hidden]) ~ #tabbrowser-tabbox {
|
||
margin-bottom: var(--shimmer-top-bottom-browser-margin) !important;
|
||
}
|
||
|
||
#sidebar-box:not([hidden]) {
|
||
margin-left: 0 !important;
|
||
margin-right: var(--splitter-width) !important;
|
||
}
|
||
@media (-moz-bool-pref: "shimmer.sidebar-right-side") {
|
||
#sidebar-box:not([hidden]) {
|
||
margin-right: 0 !important;
|
||
margin-left: var(--splitter-width) !important;
|
||
}
|
||
}
|
||
|
||
#sidebar-splitter {
|
||
--sidebar-splitter: 8px !important;
|
||
border: 0 !important;
|
||
}
|
||
|
||
@media not (-moz-bool-pref: "shimmer.show-sidebar-header-close-button") {
|
||
#sidebar-close {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
#sidebar-close {
|
||
/* ch */
|
||
margin-right: 10px !important;
|
||
}
|
||
|
||
/*? rounded browser on left edge */
|
||
#sidebar-box:not([hidden]) ~ #tabbrowser-tabbox {
|
||
border-radius: 0;
|
||
border-top-left-radius: var(--shimmer-browser-border-radius) !important;
|
||
border-bottom-left-radius: var(--shimmer-browser-border-radius) !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
/*? rounded sidebar on right edge */
|
||
#sidebar-box {
|
||
border-top-right-radius: var(--shimmer-browser-border-radius) !important;
|
||
border-bottom-right-radius: var(--shimmer-browser-border-radius) !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
@media (-moz-bool-pref: "shimmer.sidebar-right-side") {
|
||
/*? rounded browser on right edge */
|
||
#sidebar-box:not([hidden]) ~ #tabbrowser-tabbox {
|
||
border-radius: 0 !important;
|
||
border-top-right-radius: var(--shimmer-browser-border-radius) !important;
|
||
border-bottom-right-radius: var(--shimmer-browser-border-radius) !important;
|
||
}
|
||
|
||
/*? rounded sidebar on left edge */
|
||
#sidebar-box {
|
||
border-radius: 0 !important;
|
||
border-top-left-radius: var(--shimmer-browser-border-radius) !important;
|
||
border-bottom-left-radius: var(--shimmer-browser-border-radius) !important;
|
||
}
|
||
}
|
||
|
||
/*? animated sidebar-box hidden animation, breaks native tabs because the sidebery titlepreface reappears when #sidebar-box display prop isn't none */
|
||
/* #sidebar-box[hidden] {
|
||
visibility: hidden !important;
|
||
min-width: 0 !important;
|
||
width: 0 !important;
|
||
transition: width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
|
||
opacity: 0 !important;
|
||
}
|
||
#sidebar-box:not([hidden]) {
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
#sidebar-splitter:not([state="dragging"]) ~ #tabbrowser-tabbox, #sidebar-splitter:not([state="dragging"]) ~ #sidebar-box, #sidebar-splitter[hidden] ~ #sidebar-box {
|
||
transition: width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
|
||
}
|
||
|
||
#sidebar-splitter[hidden] {
|
||
display: flex !important;
|
||
width: 0px !important;
|
||
} */
|
||
|
||
/*! === menus === */
|
||
/*? consistent color for ctx menus */
|
||
.menupopup-arrowscrollbox, #searchmode-switcher-popup slot[part="content"] {
|
||
background: var(--lwt-accent-color, var(--panel-background)) !important;
|
||
border-radius: var(--arrowpanel-border-radius) !important;
|
||
border: 0 !important;
|
||
outline: solid 1px var(--lwt-tab-line-color) !important;
|
||
}
|
||
|
||
/*? round context menu items */
|
||
/* --panel-background */
|
||
menuitem, menu, .menu-iconic, #searchmode-switcher-popup tooblarbutton {
|
||
border-radius: var(--arrowpanel-menuitem-border-radius) !important;
|
||
/* margin-inline: var(--arrowpanel-menuitem-margin-inline) !important; */
|
||
padding: var(--arrowpanel-menuitem-padding) !important;
|
||
}
|
||
/*? better hover color */
|
||
/* menuitem:hover, menu:hover, .menu-iconic:hover, #searchmode-switcher-popup:hover tooblarbutton {
|
||
background: var(--panel-item-hover-bgcolor) !important;
|
||
} */
|
||
menu, menuitem {
|
||
&:where([_moz-menuactive]) {
|
||
&:not([disabled="true"]) {
|
||
background: color-mix(in srgb, var(--lwt-accent-color, var(--panel-background)) 85%, var(--lwt-text-color, var(--panel-color))) !important;
|
||
}
|
||
background: color-mix(in srgb, var(--lwt-accent-color, var(--panel-background)) 92.5%, var(--lwt-text-color, var(--panel-color))) !important;
|
||
}
|
||
}
|
||
|
||
/*? fading backgrounds on buttons */
|
||
menuitem, toolbarbutton > stack, toolbaritem, toolbarbutton, toolbarbutton > image, .urlbarView-row, menu,
|
||
menuitem:hover, toolbarbutton:hover > stack, toolbaritem:hover, toolbarbutton:hover, toolbarbutton:hover > image, .urlbarView-row:hover, menu:hover,
|
||
.findbar-closebutton, .findbar-closebutton:hover
|
||
{
|
||
transition: var(--shimmer-btn-anim) !important;
|
||
}
|
||
|
||
/*? */
|
||
#context-navigation menuitem {
|
||
padding: 2px !important;
|
||
}
|
||
|
||
/*? smaller manage extensions button */
|
||
#unified-extensions-manage-extensions {
|
||
padding: 5px 8px !important;
|
||
margin-bottom: 5px !important;
|
||
}
|
||
|
||
/*? larger titles in panels like extensions */
|
||
.panel-header {
|
||
font-size: 1.35rem !important;
|
||
}
|
||
|
||
/*? panelui smaller margin */
|
||
.panel-subview-body {
|
||
margin-bottom: 5px !important;
|
||
}
|
||
|
||
.panel-subview-body {
|
||
padding: 5px 0 0 0 !important;
|
||
}
|
||
|
||
treecol {
|
||
transition: var(--shimmer-btn-anim) !important;
|
||
}
|
||
|
||
/*! === autoscroller === */
|
||
|
||
/* why no work */
|
||
/* #autoscroller slot[part="content"] {
|
||
--panel-background: var(--lwt-accent-color) !important;
|
||
|
||
background-color: var(--panel-background) !important;
|
||
background-image: var(--autoscroll-background-image) !important;
|
||
background-size: cover !important;
|
||
background-position: center !important;
|
||
background-repeat: no-repeat !important;
|
||
border-radius: 12px !important;
|
||
} */
|
||
|
||
/*! === compact, macos-like winctr buttons === */
|
||
@media not (-moz-bool-pref: "shimmer.disable-compact-winctr-buttons") {
|
||
#toolbar-menubar .titlebar-buttonbox > toolbarbutton {
|
||
&:hover > image {
|
||
padding: 2px 0 !important;
|
||
}
|
||
}
|
||
|
||
#TabsToolbar .titlebar-buttonbox > toolbarbutton {
|
||
&:hover > image {
|
||
padding: 4px 0 !important;
|
||
}
|
||
}
|
||
|
||
.titlebar-buttonbox > toolbarbutton {
|
||
background: rgba(0, 0, 0, 0) !important;
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
|
||
& > image {
|
||
width: 14px !important;
|
||
height: 14px !important;
|
||
border-radius: 12px !important;
|
||
transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
|
||
list-style-image: none !important;
|
||
box-sizing: content-box !important;
|
||
padding: 0px !important;
|
||
background: var(--toolbarbutton-hover-background) !important;
|
||
}
|
||
|
||
&:hover > image {
|
||
transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
|
||
}
|
||
}
|
||
.titlebar-close {
|
||
/* background: hsl(355, 86%, 49%) url(chrome://browser/skin/window-controls/close.svg) no-repeat center !important; */
|
||
&:hover > image {
|
||
background: #fc5753 !important;
|
||
}
|
||
padding-right: calc(var(--shimmer-winctr-gap) + var(--shimmer-winctr-margin)) !important;
|
||
padding-left: var(--shimmer-winctr-gap) !important;
|
||
}
|
||
.titlebar-min {
|
||
&:hover > image {
|
||
background: #fdbc40 !important;
|
||
}
|
||
padding-left: calc(var(--shimmer-winctr-gap) + var(--shimmer-winctr-margin)) !important;
|
||
padding-right: var(--shimmer-winctr-gap) !important;
|
||
}
|
||
.titlebar-max, .titlebar-restore {
|
||
&:hover > image {
|
||
background: #33c748 !important;
|
||
}
|
||
padding: 0 var(--shimmer-winctr-gap) !important;
|
||
}
|
||
@media not (-moz-bool-pref: "shimmer.reverse-winctr-buttons-side") {
|
||
#main-window[titlepreface=""] #toolbar-menubar:not([inactive]) #PanelUI-menu-button {
|
||
padding-right: 0 !important;
|
||
}
|
||
}
|
||
/* .titlebar-buttonbox-container {
|
||
margin: 0 var(--shimmer-winctr-margin) 0 0 !important;
|
||
} */
|
||
}
|
||
|
||
|
||
/* review: todo, change, fix */
|
||
/*TODO some of the usual buttons that appear on the right-click context menu are hidden. right now you can change them at the top of `userChrome.css`. i will maybe later introduce `about:config` variables for easier customization */
|
||
/*TODO autoscroller styles */
|