mirror of
https://github.com/enso-browser/theme-store.git
synced 2026-10-30 20:27:45 +00:00
zeekay
c95570e34a
Update CSS custom properties (--zen-* → --enso-*), attribute selectors, preference keys, element IDs, and descriptive text across all themes, scripts, and metadata files.
293 lines
8.5 KiB
CSS
293 lines
8.5 KiB
CSS
/*
|
|
* github.com/KiKaraage/
|
|
* EnsoMods/Lean
|
|
* Show things only when you need it: Top & bottom buttons, workspace indicator, bookmarks bar and more
|
|
*/
|
|
|
|
/* 1 - Hide Zoom button in URL bar */
|
|
@media (-moz-bool-pref: "mod.lean.hide-zoom") {
|
|
#urlbar-zoom-button {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* 2 - Show translation button when hovering URL bar in Single Toolbar mode */
|
|
:root[enso-single-toolbar='true'] {
|
|
@media (-moz-bool-pref: "mod.lean.show-translation") {
|
|
#urlbar:hover {
|
|
#translations-button {
|
|
display: inherit !important;
|
|
}
|
|
#translations-button {
|
|
&[hidden="true"] {
|
|
#translations-button-circle-arrows, #translations-button-locale {
|
|
visibility: collapse !important;
|
|
}
|
|
#translations-button-icon {
|
|
visibility: visible !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#translations-button {
|
|
transition: all 0.1s ease !important;
|
|
}
|
|
& #translation-button:not([open]) {
|
|
margin-inline-start: calc(-8px - 2 * var(--urlbar-icon-padding));
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
#urlbar:hover #translations-button {
|
|
opacity: 1 !important;
|
|
margin-inline-start: 0 !important;
|
|
transform: none !important;
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 3 - Show page action button for extensions when hovering URL bar in Single Toolbar mode */
|
|
:root[enso-single-toolbar='true'] {
|
|
@media (-moz-bool-pref: "mod.lean.show-pageactions") {
|
|
#urlbar:hover {
|
|
.urlbar-addon-page-action {
|
|
display: inherit !important;
|
|
}
|
|
}
|
|
#page-action-buttons {
|
|
order: 1 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 4 - Hide top workspace indicator unless when editing space name
|
|
* + adjust Essentials area bottom padding */
|
|
@media -moz-pref("mod.lean.top-workspace") {
|
|
.enso-current-workspace-indicator:not(:has(.tab-label-container-editing)) {
|
|
visibility: collapse !important;
|
|
}
|
|
@media -moz-pref("mod.lean.pinned-ext") {
|
|
.enso-essentials-container:not(:empty) {
|
|
padding-bottom: 4px !important;
|
|
}
|
|
@media not -moz-pref("mod.lean.bottom-buttons") {
|
|
#main-window[enso-single-toolbar="true"] {
|
|
.enso-essentials-container {
|
|
padding-bottom: 4px !important;
|
|
padding-top: 4px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media not -moz-pref("mod.lean.pinned-ext") {
|
|
.enso-essentials-container:not(:empty), .enso-current-workspace-indicator {
|
|
padding-bottom: 0px !important;
|
|
}
|
|
#main-window[enso-single-toolbar="true"] {
|
|
.enso-essentials-container {
|
|
padding-bottom: 6px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 5 - Hide bottom buttons area unless tab sidebar is hovered */
|
|
:root:not([customizing]) {
|
|
@media -moz-pref("mod.lean.bottom-buttons") {
|
|
#enso-sidebar-foot-buttons, #enso-workspaces-button, #enso-sidebar-foot-buttons toolbarbutton {
|
|
transition: ease 0.2s !important;
|
|
}
|
|
#titlebar:not(:hover) {
|
|
enso-workspace {
|
|
& > arrowscrollbox {
|
|
&[overflowing] {
|
|
&::after {
|
|
height: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#enso-sidebar-foot-buttons {
|
|
min-height: 3px !important;
|
|
gap: 1px !important;
|
|
padding-top: 1px !important;
|
|
toolbarbutton, #enso-workspaces-button {
|
|
opacity: 0 !important;
|
|
height: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 6 - 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 */
|
|
:root[enso-single-toolbar="true"] {
|
|
--top-toolbar-hover-opacity: 0;
|
|
@media -moz-pref("mod.lean.ninja-top-buttons") {
|
|
#enso-sidebar-top-buttons, #enso-sidebar-top-buttons-customization-target, #enso-sidebar-top-buttons toolbarbutton {
|
|
transition: ease 0.2s !important;
|
|
}
|
|
#navigator-toolbox {
|
|
& #enso-appcontent-navbar-wrapper, & #enso-sidebar-top-buttons {
|
|
--enso-toolbar-height: 1px !important;
|
|
opacity: var(--top-toolbar-hover-opacity) !important;
|
|
z-index: 9 !important;
|
|
}
|
|
}
|
|
#navigator-toolbox:not(:hover) {
|
|
& #enso-appcontent-navbar-wrapper, & #enso-sidebar-top-buttons {
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 7 - Only show bookmarks when hovering top navigation bar on Multiple & Collapsed Toolbar mode
|
|
* Mimicking how it works on Single Toolbar */
|
|
:root:not([enso-single-toolbar="true"]) {
|
|
@media -moz-pref("mod.lean.bookmarks") {
|
|
#PersonalToolbar:not([collapsed="true"]) {
|
|
min-height: 2px !important;
|
|
height: 2px !important;
|
|
opacity: 0;
|
|
transition: 0.2s ease !important;
|
|
}
|
|
&[customizing] {
|
|
#PersonalToolbar {
|
|
opacity: 1;
|
|
height: 30px !important;
|
|
}
|
|
}
|
|
#enso-appcontent-navbar-container:hover {
|
|
#PersonalToolbar {
|
|
opacity: 1;
|
|
height: 30px !important;
|
|
}
|
|
}
|
|
#TabsToolbar {
|
|
margin-block-start: 2px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 8 - WIP: Bottom buttons as "pinned extensions" on Single Toolbar mode
|
|
* Also hide the workspace buttons, and the separator below tabs area */
|
|
|
|
/* Part A: When bottom buttons is always shown */
|
|
@media -moz-pref("mod.lean.pinned-ext") {
|
|
#main-window[enso-single-toolbar="true"] {
|
|
#titlebar {
|
|
enso-workspace {
|
|
& > arrowscrollbox {
|
|
&[overflowing] {
|
|
&::after {
|
|
height: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#navigator-toolbox[enso-sidebar-expanded="true"] {
|
|
@media -moz-pref("mod.lean.bottom-buttons") {
|
|
.enso-essentials-container {
|
|
:root[enso-single-toolbar="true"] &:not(:empty) {
|
|
padding-top: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
& #enso-sidebar-foot-buttons {
|
|
order: -1 !important;
|
|
justify-content: center !important;
|
|
padding-inline: calc(var(--enso-toolbox-padding) - 3px) !important;
|
|
gap: 4px !important;
|
|
padding-top: 4px !important;
|
|
padding-bottom: 0px !important;
|
|
}
|
|
#enso-sidebar-foot-buttons toolbarbutton {
|
|
.toolbarbutton-1 {
|
|
padding-inline: 0 !important;
|
|
margin: 0 !important;
|
|
margin-top: 0 !important;
|
|
}
|
|
padding-inline: 0px !important;
|
|
min-width: 40px !important;
|
|
&.toolbarbutton-1 {
|
|
&:not([disabled]) {
|
|
&:hover > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#enso-sidebar-foot-buttons toolbarbutton {
|
|
background-color: var(--enso-toolbar-element-bg) !important;
|
|
border-radius: var(--tab-border-radius) !important;
|
|
}
|
|
#enso-sidebar-foot-buttons toolbarbutton:hover {
|
|
background-color: var(--toolbarbutton-hover-background) !important;
|
|
}
|
|
@media not -moz-pref("mod.lean.pinned-ext.workspaces") {
|
|
#enso-workspaces-button {
|
|
display: none !important;
|
|
height: 0 !important;
|
|
min-height: 0 !important;
|
|
}
|
|
}
|
|
@media -moz-pref("mod.lean.pinned-ext.workspaces") {
|
|
#enso-sidebar-foot-buttons {
|
|
gap: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media not -moz-pref("mod.lean.bottom-buttons") {
|
|
@media -moz-pref("mod.lean.pinned-ext") {
|
|
#main-window[enso-single-toolbar="true"] {
|
|
#navigator-toolbox[enso-sidebar-expanded="true"] {
|
|
& #enso-sidebar-foot-buttons {
|
|
min-height: 30px !important;
|
|
}
|
|
#enso-sidebar-foot-buttons toolbarbutton {
|
|
margin-block: 1px 0px !important;
|
|
height: 30px !important;
|
|
}
|
|
& #enso-sidebar-foot-buttons {
|
|
padding-top: 4px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Part B: When bottom buttons are only shown in hover */
|
|
@media -moz-pref("mod.lean.bottom-buttons") {
|
|
@media -moz-pref("mod.lean.pinned-ext") {
|
|
#main-window[enso-single-toolbar="true"] {
|
|
#navigator-toolbox[enso-sidebar-expanded="true"]:hover {
|
|
& #enso-sidebar-foot-buttons {
|
|
min-height: 30px !important;
|
|
padding-bottom: 4px !important;
|
|
}
|
|
#enso-sidebar-foot-buttons toolbarbutton {
|
|
margin-block: 1px 0px !important;
|
|
min-width: 40px !important;
|
|
height: 30px !important;
|
|
}
|
|
}
|
|
#navigator-toolbox[enso-sidebar-expanded="true"] {
|
|
& #enso-sidebar-foot-buttons {
|
|
min-height: 0px !important;
|
|
}
|
|
#enso-sidebar-foot-buttons toolbarbutton {
|
|
margin-block: 1px 0px !important;
|
|
height: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|