mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 17:05:31 +02:00
193 lines
4.8 KiB
CSS
193 lines
4.8 KiB
CSS
|
|
/* Overhauled extensions menu, much more compact */
|
|
|
|
#unified-extensions-panel {
|
|
--button-size: 40px;
|
|
--gap-size: 10px;
|
|
--max-number-of-buttons-in-row: 8;
|
|
--panel-max-width: calc(
|
|
var(--button-size) * var(--max-number-of-buttons-in-row) + var(--gap-size) *
|
|
(var(--max-number-of-buttons-in-row) - 1)
|
|
);
|
|
|
|
/* Remove border around panel */
|
|
--zen-appcontent-border: transparent;
|
|
|
|
/* Make panel background match browser background */
|
|
@media (-moz-bool-pref: 'zen.mods.ExtensionMenuEnhanced.backgroundColorNative.enabled') {
|
|
--panel-background: var(--zen-main-browser-background) !important;
|
|
}
|
|
|
|
@media not (-moz-bool-pref: 'zen.mods.ExtensionMenuEnhanced.backgroundColorNative.enabled') and (-moz-bool-pref: 'zen.mods.ExtensionMenuEnhanced.backgroundColorNative.parallax.enabled') {
|
|
--panel-background: transparent !important;
|
|
}
|
|
|
|
/* TODO: Change to calc x8 */
|
|
max-height: 600px !important;
|
|
|
|
/* Detach slightly panel from the top */
|
|
margin-top: 3px !important;
|
|
|
|
& panelmultiview {
|
|
/* Take outside margins into account */
|
|
max-width: calc(var(--panel-max-width) + (var(--gap-size) * 2)) !important;
|
|
|
|
position: relative !important;
|
|
}
|
|
|
|
/* & panelmultiview::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--zen-main-browser-background);
|
|
z-index: -1;
|
|
background-size: 100vw 100vh; */
|
|
/* Example values, should be somewhat extracted from browser */
|
|
/* background-position: -1533px -30px;
|
|
} */
|
|
}
|
|
|
|
/* Hide unnecessary elements */
|
|
#unified-extensions-view {
|
|
width: fit-content !important;
|
|
|
|
& .panel-header,
|
|
toolbarseparator,
|
|
#unified-extensions-manage-extensions,
|
|
#unified-extensions-description,
|
|
#unified-extensions-messages-container,
|
|
#overflowed-extensions-list,
|
|
/* Hide extension settings buttons */
|
|
.unified-extensions-item-menu-button,
|
|
/* Hide text label of extension */
|
|
.unified-extensions-item-contents {
|
|
display: none !important;
|
|
}
|
|
|
|
& .panel-subview-body {
|
|
padding-top: 0 !important;
|
|
gap: var(--gap-size);
|
|
margin: var(--gap-size);
|
|
|
|
overflow: visible !important;
|
|
}
|
|
}
|
|
|
|
:root:has(#unified-extensions-area:empty) #unified-extensions-area,
|
|
:root:has(.unified-extensions-list:empty) .unified-extensions-list {
|
|
display: none !important;
|
|
}
|
|
|
|
/* List of active extensions */
|
|
#unified-extensions-area,
|
|
/* List of passive extensions */
|
|
.unified-extensions-list {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
width: fit-content;
|
|
max-width: var(--panel-max-width);
|
|
gap: var(--gap-size);
|
|
|
|
/* Extension button */
|
|
& .unified-extensions-item {
|
|
width: var(--button-size);
|
|
height: var(--button-size);
|
|
|
|
margin: 0 !important;
|
|
transition: transform 150ms !important;
|
|
|
|
/* Remove default hover effect */
|
|
&:hover {
|
|
background-color: initial !important;
|
|
}
|
|
|
|
& .unified-extensions-item-action-button {
|
|
/* Center extension icon */
|
|
align-items: center;
|
|
justify-content: center !important;
|
|
|
|
/* Make extension icon square */
|
|
aspect-ratio: 1 / 1;
|
|
|
|
transition: background-color 150ms, transform 150ms !important;
|
|
|
|
@media (-moz-bool-pref: 'zen.mods.ExtensionMenuEnhanced.buttons.background.enabled') {
|
|
background-color: light-dark(
|
|
rgba(0, 0, 0, 0.05),
|
|
rgba(0, 0, 0, 0.1)
|
|
) !important;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: light-dark(
|
|
rgba(0, 0, 0, 0.1),
|
|
rgba(0, 0, 0, 0.2)
|
|
) !important;
|
|
}
|
|
|
|
&:active {
|
|
background-color: light-dark(
|
|
rgba(0, 0, 0, 0.15)
|
|
rgba(0, 0, 0, 0.25)
|
|
) !important;
|
|
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
@media (-moz-bool-pref: 'zen.mods.ExtensionMenuEnhanced.buttons.disabledBackground.color') {
|
|
&[disabled] {
|
|
--slash-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
|
|
|
|
background: linear-gradient(
|
|
45deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 0) 9%,
|
|
var(--slash-color) 10%,
|
|
var(--slash-color) 19%,
|
|
rgba(0, 0, 0, 0) 20%,
|
|
rgba(0, 0, 0, 0) 29%,
|
|
var(--slash-color) 30%,
|
|
var(--slash-color) 39%,
|
|
rgba(0, 0, 0, 0) 40%,
|
|
rgba(0, 0, 0, 0) 49%,
|
|
var(--slash-color) 50%,
|
|
var(--slash-color) 59%,
|
|
rgba(0, 0, 0, 0) 60%,
|
|
rgba(0, 0, 0, 0) 69%,
|
|
var(--slash-color) 70%,
|
|
var(--slash-color) 79%,
|
|
rgba(0, 0, 0, 0) 80%,
|
|
rgba(0, 0, 0, 0) 89%,
|
|
var(--slash-color) 90%,
|
|
var(--slash-color) 99%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
& .toolbarbutton-badge-stack,
|
|
.unified-extensions-item-icon {
|
|
/* Remove some margin causing icon to not be centered */
|
|
margin-inline-end: 0 !important;
|
|
}
|
|
|
|
/* Style extension number badge */
|
|
& .toolbarbutton-badge {
|
|
position: absolute !important;
|
|
top: -5px;
|
|
right: -6px;
|
|
max-width: 40px !important;
|
|
padding: 3px !important;
|
|
box-shadow: none !important;
|
|
/* opacity: 0.6; */
|
|
border-radius: 4px !important;
|
|
align-content: center;
|
|
/* text-align: center;
|
|
line-height: normal !important; */
|
|
}
|
|
}
|
|
}
|