Skip to content

Rewrite for Zen 1.21+ settings redesign (moz-page-nav) #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
nordstern wants to merge 1 commit into from
Closed

Rewrite for Zen 1.21+ settings redesign (moz-page-nav) #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
308 changes: 173 additions & 135 deletions addons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,153 +1,191 @@
/* Making the addons page sidebar compact (expand on hover) and make addons as grid */
/* inspiration from https://github.com/MrOtherGuy/firefox-csshacks/blob/master/content/multi_column_addons.css made available under Mozilla Public License v. 2.0 */

@-moz-document url-prefix("about:addons") {
#full {
--sidebar-collapsed-width: 45px;
--sidebar-expanded-width: 200px;
@media -moz-pref("compact-settings.compact-addons.enabled") {
/* Sidebar mirrors the about:preferences treatment (54px strip, 250px hover
flyout, 180ms decelerate, elevation shadow). .category is a light-DOM
button: label is its text, icon is a background-image with
fill: currentColor — so labels are hidden with color: transparent while
the fill is pinned to a concrete token color. That keeps icons solid and
gives labels a real fade. Row height is safe: .category has
min-height: 48px. Flat topology (media query outside @-moz-document)
matches preferences.css, which is known to apply. */

@media -moz-pref("compact-settings.compact-addons.enabled") {
@-moz-document url-prefix("about:addons") {
#full {
display: block !important;
}

#full #sidebar {
position: fixed !important;
inset-inline-start: 0 !important;
top: 0 !important;
height: 100vh !important;
z-index: 20 !important;
box-sizing: border-box !important;
width: var(--cs-strip-w, 54px) !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
background: var(--background-color-canvas, var(--in-content-page-background)) !important;
}

#sidebar {
position: absolute !important;
z-index: 20 !important;
/* prefers-reduced-motion zeroes --cs-anim (see userContent.css) */
@media -moz-pref("compact-settings.animation.enabled") {
#full #sidebar {
transition: width var(--cs-anim, 180ms cubic-bezier(0.2, 0, 0, 1)),
box-shadow var(--cs-anim, 180ms cubic-bezier(0.2, 0, 0, 1)) !important;
}

#full #sidebar .category {
transition: color var(--cs-anim, 180ms cubic-bezier(0.2, 0, 0, 1)) !important;
}

.category,
.sidebar-footer-list {
width: 50px !important;
margin-left: 5px !important;
}
#full #sidebar .sidebar-footer-label {
transition: opacity var(--cs-anim, 180ms cubic-bezier(0.2, 0, 0, 1)) !important;
}
}

#full #sidebar #categories,
#full #sidebar sidebar-footer {
width: auto !important;
}

#full #sidebar .category {
/* stock margin-inline-start is 30px; 5px puts the 24px icon box at
15–39px, center 27 = strip center, matching the settings sidebar */
margin-inline-start: 5px !important;
margin-inline-end: 0 !important;
width: 240px !important;
/* pin the fill so the label can go transparent without the icon */
fill: var(--icon-color, light-dark(rgb(91, 91, 102), rgb(191, 191, 201))) !important;
}

#full #sidebar:not(:hover) .category {
color: transparent !important;
}

/* selected: icon accent in both states; label accent only when the
flyout is open (collapsed labels are transparent) */
#full #sidebar .category[selected],
#full #sidebar .category[aria-selected="true"] {
fill: var(--cs-accent, var(--zen-primary-color, var(--color-accent-primary))) !important;
}

#full #sidebar:hover .category[selected],
#full #sidebar:hover .category[aria-selected="true"] {
color: var(--cs-accent, var(--zen-primary-color, var(--color-accent-primary))) !important;
}

/* footer ("Zen Settings" / "Add-ons Support"): stock indents the list
30px + icon margin 11.25px, landing icons at x≈41 — half outside the
strip. 8px list margin + stock 11.25px icon margin centers them on
the same 27px column as the category icons. */
#full #sidebar .sidebar-footer-list {
margin-inline-start: 8px !important;
}

#full #sidebar .sidebar-footer-link {
width: 235px !important;
}

/* label is its own element here, so a real opacity fade works */
#full #sidebar .sidebar-footer-label {
white-space: nowrap !important;
}

#full #sidebar:not(:hover) .sidebar-footer-label {
opacity: 0 !important;
}

@media (min-width: 830px) {
#sidebar {
position: absolute !important;
width: auto !important;
z-index: 20 !important;

#categories,
sidebar-footer {
@media -moz-pref("compact-settings.animation.enabled") {
transition: width 100ms ease !important;
}
width: var(--sidebar-collapsed-width) !important;
}

.category,
.sidebar-footer-list {
width: calc(var(--sidebar-expanded-width) - 20px) !important;
}

.sidebar-footer-list img {
scale: 1.4 !important;
margin-left: 15px !important;
margin-right: 12px !important;
}

.category[aria-selected="true"] {
color: var(--zen-primary-color) !important;
}

&:hover {
#categories {
width: var(--sidebar-expanded-width) !important;
}
}
}
#full #sidebar:hover {
width: var(--cs-flyout-w, 250px) !important;
box-shadow: var(--cs-elevation,
0 0 0 1px color-mix(in srgb, currentColor 12%, transparent),
6px 0 24px -8px rgba(0, 0, 0, 0.25)) !important;
}

#full #content {
margin-inline-start: var(--cs-content-offset, 66px) !important;
max-width: calc(100% - var(--cs-content-offset, 66px) - 8px) !important;
height: 100vh !important;
overflow-y: auto !important;
}
}
}

@media -moz-pref("compact-settings.addons.grid-enabled") {
@-moz-document url-prefix("about:addons") {
#full #content #main {
width: 90% !important;
max-width: 100vw !important;
padding: 0 !important;
margin: 0 auto !important;
}

#full #content #main addon-card[expanded="true"] > div {
margin-top: 40px;
}

#full #content #main addon-list h2 {
grid-area: hd;
}

#full #content #main addon-list[type="extension"] > section {
display: grid;
grid-auto-columns: 1fr;
gap: 1em;
grid-template-areas: "hd" "cd";
}

#full #content #main addon-list[type="extension"] > section addon-card > div {
height: 65% !important;
}

@media (min-width: 960px) {
#full #content #main addon-list[type="extension"] > section {
grid-template-areas: "hd hd" "cd cd";
}

#content {
margin-left: calc(var(--sidebar-collapsed-width) + 45px) !important;
max-width: calc(100% - var(--sidebar-collapsed-width) - 55px) !important;
/* max-width: 100vw !important; */
height: 100vh !important;
overflow-y: auto !important;
@media -moz-pref("compact-settings.addons.grid-enabled") {
margin-left: calc(var(--sidebar-collapsed-width) + 15px) !important;
max-width: calc(100% - var(--sidebar-collapsed-width) - 20px) !important;
}
#full #content #main addon-list[type="extension"] > section addon-card > div {
height: 70% !important;
}
}

@media -moz-pref("compact-settings.addons.grid-enabled") {
#content {
#main {
width: 90% !important;
max-width: 100vw !important;
padding: 0 !important;
margin: 0 auto !important;

addon-card[expanded="true"] > div {
margin-top: 40px;
}

addon-list {
h2 {
grid-area: hd;
}

&[type="extension"] > section {
display: grid;
grid-auto-columns: 1fr;
gap: 1em;
grid-template-areas: "hd" "cd";

addon-card > div {
height: 65% !important;
}

@media (min-width: 960px) {
grid-template-areas: "hd hd" "cd cd";

addon-card > div {
height: 70% !important;
}
}

@media (min-width: 1200px) {
grid-template-areas: "hd hd hd" "cd cd cd";

addon-card > div {
height: 80% !important;
}
}
}

&[type="theme"] > section {
addon-card {
padding: 2px !important;
}
}

.card-contents {
width: unset !important;
white-space: initial !important;
}
}
}
@media (min-width: 1200px) {
#full #content #main addon-list[type="extension"] > section {
grid-template-areas: "hd hd hd" "cd cd cd";
}

addon-page-header {
.sticky-container {
border-bottom: 4px solid #888888 !important;
position: relative !important;
margin-bottom: 20px !important;
margin: auto !important;
width: calc(100% - 80px) !important;

.main-heading {
max-width: 100vw !important;
margin: auto !important;
width: 80% !important;
}

.main-search {
max-width: 100vw !important;
justify-content: center !important;
gap: 30px !important;
}
}
#full #content #main addon-list[type="extension"] > section addon-card > div {
height: 80% !important;
}
}

#full #content #main addon-list[type="theme"] > section addon-card {
padding: 2px !important;
}

#full #content #main addon-list .card-contents {
width: unset !important;
white-space: initial !important;
}

addon-page-header .sticky-container {
border-bottom: 1px solid var(--border-color, #88888840) !important;
position: relative !important;
margin-bottom: 20px !important;
}

addon-page-header .sticky-container .main-heading {
max-width: 100vw !important;
margin: auto !important;
width: 80% !important;
}

addon-page-header .sticky-container .main-search {
max-width: 100vw !important;
justify-content: center !important;
gap: 30px !important;
}
}
}
Loading
Loading