From 69b4789c178a6d851beb6cb3c0e84611e1362423 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Fri, 9 Aug 2024 20:57:56 +0800
Subject: [PATCH] Unify richlistitem styling rules (#4511)
Unify richlistitem styling rules
- Fix richlistitem unwanted focus ring on Linux
fix: #4510
- Simplify richlistbox styling rules and do not follow Mozilla code
- Use --default-focusring-width for v-table
---
chrome/content/scaffold/load.xhtml | 2 +-
chrome/content/scaffold/scaffold.xhtml | 1 -
.../zotero/elements/styleConfigurator.js | 2 +-
scss/base/_base.scss | 1 +
scss/components/_listheader.scss | 1 +
scss/components/_richlistbox.scss | 79 +++++++++++--------
scss/components/_virtualized-table.scss | 2 +-
scss/elements/_richlistCheckbox.scss | 13 ++-
scss/scaffold.scss | 4 -
9 files changed, 60 insertions(+), 45 deletions(-)
diff --git a/chrome/content/scaffold/load.xhtml b/chrome/content/scaffold/load.xhtml
index dc4a18e507..d21a5ad9da 100644
--- a/chrome/content/scaffold/load.xhtml
+++ b/chrome/content/scaffold/load.xhtml
@@ -39,6 +39,6 @@
id="scaffold-load">
-
+
diff --git a/chrome/content/scaffold/scaffold.xhtml b/chrome/content/scaffold/scaffold.xhtml
index 239ca457a8..dce4e08536 100644
--- a/chrome/content/scaffold/scaffold.xhtml
+++ b/chrome/content/scaffold/scaffold.xhtml
@@ -480,7 +480,6 @@
-
+
`);
diff --git a/scss/base/_base.scss b/scss/base/_base.scss
index 8bb9d43fc3..2fb3ef202a 100644
--- a/scss/base/_base.scss
+++ b/scss/base/_base.scss
@@ -3,6 +3,7 @@
font-size: 13px;
font-style: normal;
line-height: 1.3333333333;
+ --default-focusring-width: 1px;
@media (-moz-platform: windows) {
--color-accent: var(--accent-blue);
--color-accent-text: #fff;
diff --git a/scss/components/_listheader.scss b/scss/components/_listheader.scss
index dd6dcdbd67..929e6b7f56 100644
--- a/scss/components/_listheader.scss
+++ b/scss/components/_listheader.scss
@@ -16,6 +16,7 @@ listheader {
border: none;
background: transparent;
padding: 0;
+ box-shadow: none;
.treecol-text {
padding: 0 4px;
diff --git a/scss/components/_richlistbox.scss b/scss/components/_richlistbox.scss
index 96c7857027..b6a807b4ca 100644
--- a/scss/components/_richlistbox.scss
+++ b/scss/components/_richlistbox.scss
@@ -1,41 +1,54 @@
-richlistbox.theme-listbox {
+richlistbox {
background: var(--material-background);
border: var(--material-panedivider);
// Prevent horizontal scrollbar on Windows
overflow-x: hidden;
richlistitem {
- --listitem-selectedBackground: var(--tag-gray);
- --listitem-selectedFocusCurrentBackground: var(--color-accent);
- --listitem-selectedTextColor: var(--color-accent-text);
- --listitem-selectedBorder: transparent;
- --listitem-selectedBottomBorder: transparent;
- --listitem-selectedCurrentBorder: transparent;
- --listitem-selectedFocusBorder: transparent;
- --listitem-selectedFocusBottomBorder: transparent;
- --listitem-selectedFocusCurrentBorder: transparent;
- --listitem-selectedFocusBackground: var(--color-accent);
- --listitem-selectedFocusColor: var(--accent-white);
- --listitem-selectedColor: var(--accent-white);
- --listitem-selectedFocusCurrentBottomBorder: transparent;
+ padding: 0.2em 0.4em;
+ align-items: center;
+
+ @include compact {
+ height: 22px;
+ }
+
+ @include comfortable {
+ height: 28px;
+ }
+
+ &,
+ & > *,
+ & label {
+ // Prevent word cut-off with double-byte characters
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ width: 100%;
+ }
+
+ // Selected but not focused
+ &[selected="true"] {
+ background-color: var(--color-quarternary-on-sidepane);
+ color: var(--color-accent-text);
+ }
+ }
+
+ &:focus {
+ & > richlistitem {
+ // Selected and focused
+ &[selected="true"] {
+ background-color: var(--color-accent);
+ color: var(--color-accent-text);
+ }
+ }
+
+ // Add focus ring to richlistbox if the richlistbox is multi-select
+ &[seltype="multiple"] > richlistitem {
+ &[selected="true"][current="true"] {
+ outline: var(--default-focusring);
+ outline-color: currentColor;
+ outline-offset: calc(-1 * var(--default-focusring-width));
+ }
+ }
}
}
-
-richlistitem {
- padding: 0.2em 0.4em;
-}
-
-richlistitem,
-richlistitem > *,
-richlistitem label {
- // Prevent word cut-off with double-byte characters
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- width: 100%;
-}
-
-richlistcheckbox[selected=true] {
- background-color: -moz-cellhighlight;
- color: -moz-cellhighlighttext;
-}
diff --git a/scss/components/_virtualized-table.scss b/scss/components/_virtualized-table.scss
index 625db52342..390490a351 100644
--- a/scss/components/_virtualized-table.scss
+++ b/scss/components/_virtualized-table.scss
@@ -345,7 +345,7 @@
.virtualized-table.multi-select:focus {
.row.focused:not(.selected) {
- outline: 1px dotted var(--color-accent);
+ outline: var(--default-focusring-width) dotted var(--color-accent);
z-index: 10000;
}
}
diff --git a/scss/elements/_richlistCheckbox.scss b/scss/elements/_richlistCheckbox.scss
index 3dc8406a33..18064b6f1b 100644
--- a/scss/elements/_richlistCheckbox.scss
+++ b/scss/elements/_richlistCheckbox.scss
@@ -23,23 +23,23 @@ richlistbox:where(:focus) > richlistcheckbox[selected="true"] {
}
richlistbox[seltype="multiple"]:focus > richlistcheckbox[current="true"],
-richlistbox.theme-listbox:focus > richlistcheckbox[current="true"] {
+richlistbox:focus > richlistcheckbox[current="true"] {
outline: var(--default-focusring);
outline-color: var(--color-accent);
outline-offset: calc(-1 * var(--default-focusring-width));
}
richlistbox[seltype="multiple"]:focus > richlistcheckbox[current="true"][selected="true"],
-richlistbox.theme-listbox:focus > richlistcheckbox[current="true"][selected="true"] {
+richlistbox:focus > richlistcheckbox[current="true"][selected="true"] {
outline-color: #F3D982; /* TODO: find a suitable system color */
}
-richlistbox.theme-listbox:not(:focus) > richlistcheckbox[selected="true"] {
+richlistbox:not(:focus) > richlistcheckbox[selected="true"] {
background-color: -moz-cellhighlight;
color: -moz-cellhighlighttext;
}
-richlistbox.theme-listbox > richlistcheckbox > label {
+richlistbox > richlistcheckbox > label {
margin: 0px;
padding-top: 0px;
padding-bottom: 1px;
@@ -47,3 +47,8 @@ richlistbox.theme-listbox > richlistcheckbox > label {
padding-inline-end: 0px;
white-space: nowrap;
}
+
+richlistcheckbox[selected=true] {
+ background-color: -moz-cellhighlight;
+ color: -moz-cellhighlighttext;
+}
diff --git a/scss/scaffold.scss b/scss/scaffold.scss
index c380fd8a05..2edaf2e58c 100644
--- a/scss/scaffold.scss
+++ b/scss/scaffold.scss
@@ -163,10 +163,6 @@ browser,
richlistitem {
align-items: center;
-
- > hbox {
- display: block;
- }
}
}