online.git: browser/css
3 views
Skip to first unread message
"Pedro Pinto Silva (via github)"
Feb 5, 2026, 4:17:06 AMFeb 5
to collaboraon...@googlegroups.com
browser/css/notebookbar.css | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
New commits:
commit e96e6d0ce880aa4541c4c38a9cb516d03a5b7c06
Author: Pedro Pinto Silva <pedro...@collabora.com>
AuthorDate: Wed Feb 4 16:09:49 2026 +0100
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Thu Feb 5 10:16:23 2026 +0100
Tabbed view: Fix small savemodified icon
Make sure that we only target the compact view when setting the
compact savemodified icon.
Regression started on:
- 824c3c02478e96300adc358b27720a208a125654
- from https://github.com/CollaboraOnline/online/pull/14242
Ideally we would refactor where we set these icons,
historically we have some in notebookbar.css and some in the
menubar.css. But that is out of the scope of this commit.
Signed-off-by: Pedro Pinto Silva <pedro...@collabora.com>
Change-Id: I0573b6f4ea750c0f7300ebee6711c80a679c8507
diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
index b4cc3aeed3..dd0cba7429 100644
--- a/browser/css/notebookbar.css
+++ b/browser/css/notebookbar.css
@@ -167,7 +167,7 @@ html:not([data-theme='dark']) .unoSave.savemodified .unobutton img {
background: url('images/lc_savemodified.svg') no-repeat center;
}
-html:not([data-theme='dark']) .savemodified.unotoolbutton .unobutton img {
+html:not([data-theme='dark']) .savemodified.unotoolbutton:not(.notebookbar) .unobutton img {
background: url('images/compact_savemodified.svg') no-repeat center;
}
@@ -175,7 +175,7 @@ html[data-theme='dark'] .unoSave.savemodified .unobutton img {
background: url('images/dark/lc_savemodified.svg') no-repeat center;
}
-html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
+html[data-theme='dark'] .savemodified.unotoolbutton:not(.notebookbar) .unobutton img {
background: url('images/dark/compact_savemodified.svg') no-repeat center;
}
1 file changed, 2 insertions(+), 2 deletions(-)
New commits:
commit e96e6d0ce880aa4541c4c38a9cb516d03a5b7c06
Author: Pedro Pinto Silva <pedro...@collabora.com>
AuthorDate: Wed Feb 4 16:09:49 2026 +0100
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Thu Feb 5 10:16:23 2026 +0100
Tabbed view: Fix small savemodified icon
Make sure that we only target the compact view when setting the
compact savemodified icon.
Regression started on:
- 824c3c02478e96300adc358b27720a208a125654
- from https://github.com/CollaboraOnline/online/pull/14242
Ideally we would refactor where we set these icons,
historically we have some in notebookbar.css and some in the
menubar.css. But that is out of the scope of this commit.
Signed-off-by: Pedro Pinto Silva <pedro...@collabora.com>
Change-Id: I0573b6f4ea750c0f7300ebee6711c80a679c8507
diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
index b4cc3aeed3..dd0cba7429 100644
--- a/browser/css/notebookbar.css
+++ b/browser/css/notebookbar.css
@@ -167,7 +167,7 @@ html:not([data-theme='dark']) .unoSave.savemodified .unobutton img {
background: url('images/lc_savemodified.svg') no-repeat center;
}
-html:not([data-theme='dark']) .savemodified.unotoolbutton .unobutton img {
+html:not([data-theme='dark']) .savemodified.unotoolbutton:not(.notebookbar) .unobutton img {
background: url('images/compact_savemodified.svg') no-repeat center;
}
@@ -175,7 +175,7 @@ html[data-theme='dark'] .unoSave.savemodified .unobutton img {
background: url('images/dark/lc_savemodified.svg') no-repeat center;
}
-html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
+html[data-theme='dark'] .savemodified.unotoolbutton:not(.notebookbar) .unobutton img {
background: url('images/dark/compact_savemodified.svg') no-repeat center;
}
"Méven Car (via github)"
Feb 9, 2026, 3:36:54 AMFeb 9
to collaboraon...@googlegroups.com
browser/css/btns.css | 1 +
1 file changed, 1 insertion(+)
New commits:
commit d000c6f1b78d0f423625bbe62f79eb0248b7616d
Author: Méven Car <meve...@collabora.com>
AuthorDate: Mon Feb 2 16:57:17 2026 +0100
Commit: Méven <mev...@gmail.com>
CommitDate: Mon Feb 9 09:36:10 2026 +0100
ui: add overflow:hidden to hover buttons to prevent clipping
This prevents child elements color to spill out of its parent's border.
Signed-off-by: Méven Car <meve...@collabora.com>
Change-Id: Idce0c85be2f4e6e1213b623e946f67196e5be576
diff --git a/browser/css/btns.css b/browser/css/btns.css
index 6047a18593..1234457189 100644
--- a/browser/css/btns.css
+++ b/browser/css/btns.css
@@ -81,6 +81,7 @@
color: var(--color-text-darker);
border-radius: var(--border-radius);
background-color: var(--color-background-tabs-group);
+ overflow: hidden;
}
/* toolbuttons selected */
1 file changed, 1 insertion(+)
New commits:
commit d000c6f1b78d0f423625bbe62f79eb0248b7616d
Author: Méven Car <meve...@collabora.com>
AuthorDate: Mon Feb 2 16:57:17 2026 +0100
Commit: Méven <mev...@gmail.com>
CommitDate: Mon Feb 9 09:36:10 2026 +0100
ui: add overflow:hidden to hover buttons to prevent clipping
This prevents child elements color to spill out of its parent's border.
Signed-off-by: Méven Car <meve...@collabora.com>
Change-Id: Idce0c85be2f4e6e1213b623e946f67196e5be576
diff --git a/browser/css/btns.css b/browser/css/btns.css
index 6047a18593..1234457189 100644
--- a/browser/css/btns.css
+++ b/browser/css/btns.css
@@ -81,6 +81,7 @@
color: var(--color-text-darker);
border-radius: var(--border-radius);
background-color: var(--color-background-tabs-group);
+ overflow: hidden;
}
/* toolbuttons selected */
"Banobe Pascal (via github)"
Feb 12, 2026, 8:33:21 AMFeb 12
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 1 +
Author: Banobe Pascal <banobe...@collabora.com>
AuthorDate: Thu Feb 12 01:51:11 2026 +0300
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Thu Feb 12 14:33:14 2026 +0100
Notebookbar: Center Table Style Options and correct overflow group label alignment
- Adjust the inner overflow group container of the Table Style Options section
to use --notebookbar-element-height for consistent vertical sizing.
- This ensures the table style options are properly centered within the group and
aligns the group label consistently with other Notebookbar sections by anchoring
it to the expected bottom alignment baseline.
Signed-off-by: Banobe Pascal <banobe...@collabora.com>
Change-Id: I52678f36a000736418b08ea673b68898d62b8fb7
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 222cc92b7a..98c8a8e6d0 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -451,6 +451,7 @@ algned to the bottom */
margin-bottom: 14px !important;
}
+#table-style-options .notebookbar.ui-overflow-group-inner,
.unotoolbutton.notebookbar.ui-content.has-label > *:not(.arrowbackground) {
height: var(--notebookbar-element-height) !important;
align-content: center;
1 file changed, 1 insertion(+)
New commits:
commit 3afe526d10b9f3287d190fcdfdc37cb593f1ec6b
New commits:
Author: Banobe Pascal <banobe...@collabora.com>
AuthorDate: Thu Feb 12 01:51:11 2026 +0300
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Thu Feb 12 14:33:14 2026 +0100
Notebookbar: Center Table Style Options and correct overflow group label alignment
- Adjust the inner overflow group container of the Table Style Options section
to use --notebookbar-element-height for consistent vertical sizing.
- This ensures the table style options are properly centered within the group and
aligns the group label consistently with other Notebookbar sections by anchoring
it to the expected bottom alignment baseline.
Signed-off-by: Banobe Pascal <banobe...@collabora.com>
Change-Id: I52678f36a000736418b08ea673b68898d62b8fb7
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 222cc92b7a..98c8a8e6d0 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -451,6 +451,7 @@ algned to the bottom */
margin-bottom: 14px !important;
}
+#table-style-options .notebookbar.ui-overflow-group-inner,
.unotoolbutton.notebookbar.ui-content.has-label > *:not(.arrowbackground) {
height: var(--notebookbar-element-height) !important;
align-content: center;
"Henry Castro (via github)"
Feb 12, 2026, 8:48:52 AMFeb 12
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
New commits:
commit 9d20cb22b06c101acef2985a67f943057bbfac1b
Author: Henry Castro <hca...@collabora.com>
AuthorDate: Wed Feb 4 10:30:19 2026 -0400
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Thu Feb 12 14:48:33 2026 +0100
browser: a11y: change color picker to 24×24 size
.
Change-Id: Ide38a0260739b5a52b389dde4be83a0099ea5752
Signed-off-by: Henry Castro <hca...@collabora.com>
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 98c8a8e6d0..b68bec3e07 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -1928,8 +1928,8 @@ button.menubutton.sidebar > span {
.ui-color-picker-entry {
border: 1px solid transparent;
cursor: pointer;
- width: 16px;
- height: 16px;
+ width: 24px;
+ height: 24px;
appearance: none;
webkit-appearance: none;
margin: 0;
@@ -2995,7 +2995,7 @@ kbd,
/* Listbox UI grid */
.jsdialog.ui-grid[role='listbox']:not(:has(> .ui-iconview)) {
- max-height: min(470px, 45vh);
+ max-height: 99vh;
}
.jsdialog.ui-grid[role='listbox'] {
1 file changed, 3 insertions(+), 3 deletions(-)
New commits:
commit 9d20cb22b06c101acef2985a67f943057bbfac1b
Author: Henry Castro <hca...@collabora.com>
AuthorDate: Wed Feb 4 10:30:19 2026 -0400
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Thu Feb 12 14:48:33 2026 +0100
browser: a11y: change color picker to 24×24 size
.
Change-Id: Ide38a0260739b5a52b389dde4be83a0099ea5752
Signed-off-by: Henry Castro <hca...@collabora.com>
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 98c8a8e6d0..b68bec3e07 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -1928,8 +1928,8 @@ button.menubutton.sidebar > span {
.ui-color-picker-entry {
border: 1px solid transparent;
cursor: pointer;
- width: 16px;
- height: 16px;
+ width: 24px;
+ height: 24px;
appearance: none;
webkit-appearance: none;
margin: 0;
@@ -2995,7 +2995,7 @@ kbd,
/* Listbox UI grid */
.jsdialog.ui-grid[role='listbox']:not(:has(> .ui-iconview)) {
- max-height: min(470px, 45vh);
+ max-height: 99vh;
}
.jsdialog.ui-grid[role='listbox'] {
"Andras Timar (via github)"
Feb 17, 2026, 5:44:37 PMFeb 17
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
New commits:
commit ed6914ed6972fb30715476c01d4124dbee98f26e
Author: Andras Timar <andras...@collabora.com>
AuthorDate: Tue Feb 17 16:39:38 2026 +0100
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Tue Feb 17 23:44:24 2026 +0100
css: fix double scrollbar regression in listbox dropdown
Commit 9d20cb22b0 accidentally changed max-height from
min(470px, 45vh) to 99vh as part of an unrelated color picker
change, re-introducing the double scrollbar issue that was
fixed in PR #13426.
Signed-off-by: Andras Timar <andras...@collabora.com>
Change-Id: I10351d0668f38a01b12ebaba69e6d02f0ff9fb88
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 73c15bbadf..cbdbc56700 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -3009,7 +3009,7 @@ kbd,
/* Listbox UI grid */
.jsdialog.ui-grid[role='listbox']:not(:has(> .ui-iconview)) {
- max-height: 99vh;
+ max-height: min(470px, 45vh);
}
.jsdialog.ui-grid[role='listbox'] {
1 file changed, 1 insertion(+), 1 deletion(-)
New commits:
commit ed6914ed6972fb30715476c01d4124dbee98f26e
Author: Andras Timar <andras...@collabora.com>
AuthorDate: Tue Feb 17 16:39:38 2026 +0100
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Tue Feb 17 23:44:24 2026 +0100
css: fix double scrollbar regression in listbox dropdown
Commit 9d20cb22b0 accidentally changed max-height from
min(470px, 45vh) to 99vh as part of an unrelated color picker
change, re-introducing the double scrollbar issue that was
fixed in PR #13426.
Signed-off-by: Andras Timar <andras...@collabora.com>
Change-Id: I10351d0668f38a01b12ebaba69e6d02f0ff9fb88
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 73c15bbadf..cbdbc56700 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -3009,7 +3009,7 @@ kbd,
/* Listbox UI grid */
.jsdialog.ui-grid[role='listbox']:not(:has(> .ui-iconview)) {
+ max-height: min(470px, 45vh);
}
.jsdialog.ui-grid[role='listbox'] {
"Caolán McNamara (via github)"
Feb 20, 2026, 5:09:16 AMFeb 20
to collaboraon...@googlegroups.com
browser/css/forced-colors.css | 58 +++++++++++++++++++++---------------------
1 file changed, 29 insertions(+), 29 deletions(-)
New commits:
commit 6b988c327f7029142c56bf15294d0eb7d5454d68
Author: Caolán McNamara <caolan....@collabora.com>
AuthorDate: Thu Feb 19 17:02:04 2026 +0000
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Fri Feb 20 11:09:00 2026 +0100
make keeps changing the formatting of this
git show -w is null operation, just bake it in
Signed-off-by: Caolán McNamara <caolan....@collabora.com>
Change-Id: Icd71b21804a803250501cb4d85ed4efb9c089f1d
diff --git a/browser/css/forced-colors.css b/browser/css/forced-colors.css
index c6f00d26e6..7d8bf1aa85 100644
--- a/browser/css/forced-colors.css
+++ b/browser/css/forced-colors.css
@@ -1,35 +1,35 @@
@media (forced-colors: active) {
- /* Active notebookbar tab: box-shadow is stripped, use border-bottom */
- .ui-tab.selected.notebookbar {
- border-bottom: 2px solid Highlight !important;
- box-shadow: none !important;
- }
- .ui-tab.selected.notebookbar:hover {
- box-shadow: none !important;
- border-bottom: 2px solid Highlight !important;
- }
- .ui-tab.notebookbar:hover {
- box-shadow: none !important;
- border-bottom: 2px solid ButtonBorder !important;
- }
+ /* Active notebookbar tab: box-shadow is stripped, use border-bottom */
+ .ui-tab.selected.notebookbar {
+ border-bottom: 2px solid Highlight !important;
+ box-shadow: none !important;
+ }
+ .ui-tab.selected.notebookbar:hover {
+ box-shadow: none !important;
+ border-bottom: 2px solid Highlight !important;
+ }
+ .ui-tab.notebookbar:hover {
+ box-shadow: none !important;
+ border-bottom: 2px solid ButtonBorder !important;
+ }
- /* Preserve SVG toolbar icons */
- .w2ui-icon,
- .unoSave.savemodified .unobutton img,
- .savemodified.unotoolbutton .unobutton img,
- .StyleListPanel #TemplatePanel button,
- .document-logo {
- forced-color-adjust: none;
- }
+ /* Preserve SVG toolbar icons */
+ .w2ui-icon,
+ .unoSave.savemodified .unobutton img,
+ .savemodified.unotoolbutton .unobutton img,
+ .StyleListPanel #TemplatePanel button,
+ .document-logo {
+ forced-color-adjust: none;
+ }
- /* Restore native checkboxes (OS renders in user's HC colors) */
- input[type='checkbox'].autofilter,
- .jsdialog input[type='checkbox'] {
- appearance: auto !important;
- -webkit-appearance: auto !important;
- -moz-appearance: auto !important;
- background: none !important;
- }
+ /* Restore native checkboxes (OS renders in user's HC colors) */
+ input[type='checkbox'].autofilter,
+ .jsdialog input[type='checkbox'] {
+ appearance: auto !important;
+ -webkit-appearance: auto !important;
+ -moz-appearance: auto !important;
+ background: none !important;
+ }
}
1 file changed, 29 insertions(+), 29 deletions(-)
New commits:
commit 6b988c327f7029142c56bf15294d0eb7d5454d68
Author: Caolán McNamara <caolan....@collabora.com>
AuthorDate: Thu Feb 19 17:02:04 2026 +0000
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Fri Feb 20 11:09:00 2026 +0100
make keeps changing the formatting of this
git show -w is null operation, just bake it in
Signed-off-by: Caolán McNamara <caolan....@collabora.com>
Change-Id: Icd71b21804a803250501cb4d85ed4efb9c089f1d
diff --git a/browser/css/forced-colors.css b/browser/css/forced-colors.css
index c6f00d26e6..7d8bf1aa85 100644
--- a/browser/css/forced-colors.css
+++ b/browser/css/forced-colors.css
@@ -1,35 +1,35 @@
@media (forced-colors: active) {
- /* Active notebookbar tab: box-shadow is stripped, use border-bottom */
- .ui-tab.selected.notebookbar {
- border-bottom: 2px solid Highlight !important;
- box-shadow: none !important;
- }
- .ui-tab.selected.notebookbar:hover {
- box-shadow: none !important;
- border-bottom: 2px solid Highlight !important;
- }
- .ui-tab.notebookbar:hover {
- box-shadow: none !important;
- border-bottom: 2px solid ButtonBorder !important;
- }
+ /* Active notebookbar tab: box-shadow is stripped, use border-bottom */
+ .ui-tab.selected.notebookbar {
+ border-bottom: 2px solid Highlight !important;
+ box-shadow: none !important;
+ }
+ .ui-tab.selected.notebookbar:hover {
+ box-shadow: none !important;
+ border-bottom: 2px solid Highlight !important;
+ }
+ .ui-tab.notebookbar:hover {
+ box-shadow: none !important;
+ border-bottom: 2px solid ButtonBorder !important;
+ }
- /* Preserve SVG toolbar icons */
- .w2ui-icon,
- .unoSave.savemodified .unobutton img,
- .savemodified.unotoolbutton .unobutton img,
- .StyleListPanel #TemplatePanel button,
- .document-logo {
- forced-color-adjust: none;
- }
+ /* Preserve SVG toolbar icons */
+ .w2ui-icon,
+ .unoSave.savemodified .unobutton img,
+ .savemodified.unotoolbutton .unobutton img,
+ .StyleListPanel #TemplatePanel button,
+ .document-logo {
+ forced-color-adjust: none;
+ }
- /* Restore native checkboxes (OS renders in user's HC colors) */
- input[type='checkbox'].autofilter,
- .jsdialog input[type='checkbox'] {
- appearance: auto !important;
- -webkit-appearance: auto !important;
- -moz-appearance: auto !important;
- background: none !important;
- }
+ /* Restore native checkboxes (OS renders in user's HC colors) */
+ input[type='checkbox'].autofilter,
+ .jsdialog input[type='checkbox'] {
+ appearance: auto !important;
+ -webkit-appearance: auto !important;
+ -moz-appearance: auto !important;
+ background: none !important;
+ }
}
"Andras Timar (via github)"
Feb 20, 2026, 8:55:34 AMFeb 20
to collaboraon...@googlegroups.com
browser/css/device-mobile.css | 42 ---------------------
browser/css/mobilewizard.css | 9 ----
browser/css/toolbar.css | 81 ------------------------------------------
3 files changed, 1 insertion(+), 131 deletions(-)
New commits:
commit a6fcfa4ca4cc50bf4b4a6171b57f1917ec5ab89c
Author: Andras Timar <andras...@collabora.com>
AuthorDate: Sat Feb 14 15:44:43 2026 +0100
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Fri Feb 20 14:55:21 2026 +0100
css: remove dead w2ui CSS rules
Remove CSS rules that reference w2ui classes (w2ui-toolbar, w2ui-button,
w2ui-break, w2ui-overlay, w2ui-drop-menu, w2ui-tb-down, w2ui-tb-caption,
w2ui-icon-check, w2ui-color, w2ui-reset) which are never set in any
JS/TS/HTML code. These are leftovers from the old w2ui toolbar library
that was removed long ago.
Signed-off-by: Andras Timar <andras...@collabora.com>
Change-Id: I7f27564329df81670b2433ae0f50e7f6ad4965fa
diff --git a/browser/css/device-mobile.css b/browser/css/device-mobile.css
index 77cb1dc01b..1afad9f5e5 100644
--- a/browser/css/device-mobile.css
+++ b/browser/css/device-mobile.css
@@ -181,12 +181,6 @@ textarea.cool-annotation-textarea {
height: 100%;
overflow-y: scroll;
}
-#toolbar-up.w2ui-toolbar {
- padding-top: 0px;
- padding-bottom: 0px;
- background: transparent;
- align-self: end;
-}
.formulabar.unotoolbutton {
justify-self: center;
}
@@ -263,45 +257,9 @@ textarea.cool-annotation-textarea {
filter: drop-shadow(0px 0px 4px var(--color-primary-darker));
border-color: transparent;
}
-#toolbar-down table.w2ui-button .w2ui-tb-image {
- margin: 5px 9px !important;
-}
-#toolbar-down table.w2ui-button .textcolor {
- margin-bottom: 0px !important;
-}
-#toolbar-down table.w2ui-button .backcolor {
- margin-bottom: 0px !important;
-}
-#toolbar-down table.w2ui-button .selected-color-classic {
- height: 5px;
- width: 26px;
- margin: auto;
- position: relative;
- top: -6px;
- border: 1px solid var(--color-border-dark);
- border-radius: 7px;
- outline: 1px solid var(--color-background-lighter);
-}
-.w2ui-toolbar .w2ui-break {
- background-image: none;
- background-color: #dae6f3;
-}
-#formulabar .w2ui-break {
- visibility: hidden;
-}
#setgamma input.spinfield, #linewidth input.spinfield, #nolines input.spinfield {
width: 140px !important;
}
-#toolbar-down table.w2ui-button:not(.checked) td.w2ui-tb-down > div {
- border-top: none !important;
- margin-top: 0 !important;
- border-bottom: 5px solid #8D99A7 !important;
-}
-#toolbar-down table.w2ui-button.checked td.w2ui-tb-down > div {
- border-bottom: none;
- border-top: 5px solid #8D99A7;
- margin-bottom: 5px !important;
-}
#toolbar-search #search * {
width: 100% !important;
}
diff --git a/browser/css/mobilewizard.css b/browser/css/mobilewizard.css
index 6a60b7d52e..26a6d378aa 100644
--- a/browser/css/mobilewizard.css
+++ b/browser/css/mobilewizard.css
@@ -497,11 +497,6 @@ p.mobile-wizard.ui-combobox-text.selected {
border-bottom: solid 1px var(--color-primary-dark);
}
-[id|='tb_colorselector'] .w2ui-tb-caption > div {
- height: 32px !important;
- width: 32px !important;
-}
-
[name|='colorselector'] {
width: 80px;
}
@@ -1039,10 +1034,6 @@ label[disabled] {
#toolbar-search {
background-color: var(--color-main-background);
}
-.w2ui-toolbar table {
- height: var(--header-height);
-}
-
#criteria.ui-tab, #inputhelp.ui-tab {
width: 30% !important;
}
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index 2ad71a1e3f..0cb6546ffa 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -188,47 +188,10 @@
border-top: 1px solid var(--color-border);
}
-.w2ui-icon-check:before {
- color: var(--color-primary);
-}
-
-.w2ui-toolbar table.w2ui-button .w2ui-tb-down > div {
- border-top: 5px solid var(--color-main-text);
-}
#toolbar-down .ToolbarStatusInactive {
color: var(--color-text-lighter);
box-shadow: inset 0px 0px 0px 10px var(--color-background-dark), 0px 0px 0px 2px var(--color-background-dark), 4px 0px 0px 1px var(--color-background-lighter), -4px 0px 0px 1px #fff, 0px 0px 0px 5px var(--color-background-lighter);
}
-.w2ui-overlay {
- -webkit-box-shadow: 0 0 3px var(--color-border);
- box-shadow: 0 0 3px var(--color-box-shadow);
- border-radius: var(--border-radius);
- background-color: var(--color-background-lighter);
-}
-.w2ui-overlay.bottom-arrow:before {
- border-top: 6px solid var(--color-border-dark);
-}
-.w2ui-overlay .menu {
- overflow: hidden auto;
- border-radius: var(--border-radius);
- position: static !important;
-}
-.w2ui-overlay > div {
- border: 1px solid var(--color-border-dark);
- border-radius: var(--border-radius);
-}
-.w2ui-overlay table.w2ui-drop-menu {
- color: var(--color-main-text);
- background-color: var(--color-main-background);
-}
-.w2ui-overlay table.w2ui-drop-menu tr:hover {
- color: var(--color-text-darker);
- background-color: var(--color-background-darker);
-}
-.w2ui-overlay.bottom-arrow:after {
- border-top-color: var(--color-background-lighter);
-}
-
#presentation-toolbar {
bottom: 0;
background-color: var(--color-background-lighter);
@@ -249,12 +212,6 @@
justify-content: space-between;
}
-.w2ui-toolbar .w2ui-break {
- height: 18px;
- background-image: none;
- background-color: var(--color-border-lighter);
-}
-
/* scroll wrapper */
.ui-scroll-wrapper {
overflow: hidden;
@@ -418,19 +375,11 @@
width: 95%;
}
-.w2ui-button {
- margin: 0 !important;
-}
-
.w2ui-tb-image {
width: 24px !important;
height: 24px !important;
}
-.w2ui-break {
- margin: 0 4px !important;
-}
-
.leaflet-bar a {
float: left;
}
@@ -506,8 +455,7 @@ button.leaflet-control-search-next
border-radius: var(--border-radius);
border: 1px solid var(--color-border-dark);
}
-.sidebar.jsdialog.ui-listbox:hover,
-.w2ui-toolbar table.w2ui-button.checked:hover {
+.sidebar.jsdialog.ui-listbox:hover {
background-color: var(--color-background-lighter);
color: var(--color-text-darker);
}
@@ -604,22 +552,6 @@ button.leaflet-control-search-next
width: fit-content;
}
-.w2ui-toolbar table.w2ui-button {
- background-color: transparent;
- border: 1px solid transparent;
- color: var(--color-main-text);
-}
-.w2ui-toolbar table.w2ui-button:hover {
- background-color: var(--color-border-darker);
-}
-.w2ui-toolbar table.w2ui-button.over {
- border: 1px solid var(--color-border-darker) !important;
-}
-.w2ui-toolbar table.w2ui-button.checked {
- background-color: var(--color-background-dark);
- border: 1px solid var(--color-border-dark);
- color: var(--color-text-dark);
-}
.w2ui-icon.basicshapes_rectangle { background: url('images/lc_rect.svg') no-repeat center; }
.w2ui-icon.basicshapes_round-rectangle { background: url('images/lc_rect_rounded.svg') no-repeat center; }
@@ -1830,17 +1762,6 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
}
}
-.w2ui-color {
- background-color: transparent;
-}
-
-.w2ui-toolbar table.w2ui-button .w2ui-tb-caption,
-.w2ui-toolbar table.w2ui-button.checked .w2ui-tb-caption,
-.w2ui-reset table tr th, .w2ui-reset table tr td {
- font-size: var(--default-font-size);
- color: var(--color-main-text);
-}
-
.slidelayout-button {
display: flex;
justify-content: center;
browser/css/mobilewizard.css | 9 ----
browser/css/toolbar.css | 81 ------------------------------------------
3 files changed, 1 insertion(+), 131 deletions(-)
New commits:
commit a6fcfa4ca4cc50bf4b4a6171b57f1917ec5ab89c
Author: Andras Timar <andras...@collabora.com>
AuthorDate: Sat Feb 14 15:44:43 2026 +0100
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Fri Feb 20 14:55:21 2026 +0100
css: remove dead w2ui CSS rules
Remove CSS rules that reference w2ui classes (w2ui-toolbar, w2ui-button,
w2ui-break, w2ui-overlay, w2ui-drop-menu, w2ui-tb-down, w2ui-tb-caption,
w2ui-icon-check, w2ui-color, w2ui-reset) which are never set in any
JS/TS/HTML code. These are leftovers from the old w2ui toolbar library
that was removed long ago.
Signed-off-by: Andras Timar <andras...@collabora.com>
Change-Id: I7f27564329df81670b2433ae0f50e7f6ad4965fa
diff --git a/browser/css/device-mobile.css b/browser/css/device-mobile.css
index 77cb1dc01b..1afad9f5e5 100644
--- a/browser/css/device-mobile.css
+++ b/browser/css/device-mobile.css
@@ -181,12 +181,6 @@ textarea.cool-annotation-textarea {
height: 100%;
overflow-y: scroll;
}
-#toolbar-up.w2ui-toolbar {
- padding-top: 0px;
- padding-bottom: 0px;
- background: transparent;
- align-self: end;
-}
.formulabar.unotoolbutton {
justify-self: center;
}
@@ -263,45 +257,9 @@ textarea.cool-annotation-textarea {
filter: drop-shadow(0px 0px 4px var(--color-primary-darker));
border-color: transparent;
}
-#toolbar-down table.w2ui-button .w2ui-tb-image {
- margin: 5px 9px !important;
-}
-#toolbar-down table.w2ui-button .textcolor {
- margin-bottom: 0px !important;
-}
-#toolbar-down table.w2ui-button .backcolor {
- margin-bottom: 0px !important;
-}
-#toolbar-down table.w2ui-button .selected-color-classic {
- height: 5px;
- width: 26px;
- margin: auto;
- position: relative;
- top: -6px;
- border: 1px solid var(--color-border-dark);
- border-radius: 7px;
- outline: 1px solid var(--color-background-lighter);
-}
-.w2ui-toolbar .w2ui-break {
- background-image: none;
- background-color: #dae6f3;
-}
-#formulabar .w2ui-break {
- visibility: hidden;
-}
#setgamma input.spinfield, #linewidth input.spinfield, #nolines input.spinfield {
width: 140px !important;
}
-#toolbar-down table.w2ui-button:not(.checked) td.w2ui-tb-down > div {
- border-top: none !important;
- margin-top: 0 !important;
- border-bottom: 5px solid #8D99A7 !important;
-}
-#toolbar-down table.w2ui-button.checked td.w2ui-tb-down > div {
- border-bottom: none;
- border-top: 5px solid #8D99A7;
- margin-bottom: 5px !important;
-}
#toolbar-search #search * {
width: 100% !important;
}
diff --git a/browser/css/mobilewizard.css b/browser/css/mobilewizard.css
index 6a60b7d52e..26a6d378aa 100644
--- a/browser/css/mobilewizard.css
+++ b/browser/css/mobilewizard.css
@@ -497,11 +497,6 @@ p.mobile-wizard.ui-combobox-text.selected {
border-bottom: solid 1px var(--color-primary-dark);
}
-[id|='tb_colorselector'] .w2ui-tb-caption > div {
- height: 32px !important;
- width: 32px !important;
-}
-
[name|='colorselector'] {
width: 80px;
}
@@ -1039,10 +1034,6 @@ label[disabled] {
#toolbar-search {
background-color: var(--color-main-background);
}
-.w2ui-toolbar table {
- height: var(--header-height);
-}
-
#criteria.ui-tab, #inputhelp.ui-tab {
width: 30% !important;
}
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index 2ad71a1e3f..0cb6546ffa 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -188,47 +188,10 @@
border-top: 1px solid var(--color-border);
}
-.w2ui-icon-check:before {
- color: var(--color-primary);
-}
-
-.w2ui-toolbar table.w2ui-button .w2ui-tb-down > div {
- border-top: 5px solid var(--color-main-text);
-}
#toolbar-down .ToolbarStatusInactive {
color: var(--color-text-lighter);
box-shadow: inset 0px 0px 0px 10px var(--color-background-dark), 0px 0px 0px 2px var(--color-background-dark), 4px 0px 0px 1px var(--color-background-lighter), -4px 0px 0px 1px #fff, 0px 0px 0px 5px var(--color-background-lighter);
}
-.w2ui-overlay {
- -webkit-box-shadow: 0 0 3px var(--color-border);
- box-shadow: 0 0 3px var(--color-box-shadow);
- border-radius: var(--border-radius);
- background-color: var(--color-background-lighter);
-}
-.w2ui-overlay.bottom-arrow:before {
- border-top: 6px solid var(--color-border-dark);
-}
-.w2ui-overlay .menu {
- overflow: hidden auto;
- border-radius: var(--border-radius);
- position: static !important;
-}
-.w2ui-overlay > div {
- border: 1px solid var(--color-border-dark);
- border-radius: var(--border-radius);
-}
-.w2ui-overlay table.w2ui-drop-menu {
- color: var(--color-main-text);
- background-color: var(--color-main-background);
-}
-.w2ui-overlay table.w2ui-drop-menu tr:hover {
- color: var(--color-text-darker);
- background-color: var(--color-background-darker);
-}
-.w2ui-overlay.bottom-arrow:after {
- border-top-color: var(--color-background-lighter);
-}
-
#presentation-toolbar {
bottom: 0;
background-color: var(--color-background-lighter);
@@ -249,12 +212,6 @@
justify-content: space-between;
}
-.w2ui-toolbar .w2ui-break {
- height: 18px;
- background-image: none;
- background-color: var(--color-border-lighter);
-}
-
/* scroll wrapper */
.ui-scroll-wrapper {
overflow: hidden;
@@ -418,19 +375,11 @@
width: 95%;
}
-.w2ui-button {
- margin: 0 !important;
-}
-
.w2ui-tb-image {
width: 24px !important;
height: 24px !important;
}
-.w2ui-break {
- margin: 0 4px !important;
-}
-
.leaflet-bar a {
float: left;
}
@@ -506,8 +455,7 @@ button.leaflet-control-search-next
border-radius: var(--border-radius);
border: 1px solid var(--color-border-dark);
}
-.sidebar.jsdialog.ui-listbox:hover,
-.w2ui-toolbar table.w2ui-button.checked:hover {
+.sidebar.jsdialog.ui-listbox:hover {
background-color: var(--color-background-lighter);
color: var(--color-text-darker);
}
@@ -604,22 +552,6 @@ button.leaflet-control-search-next
width: fit-content;
}
-.w2ui-toolbar table.w2ui-button {
- background-color: transparent;
- border: 1px solid transparent;
- color: var(--color-main-text);
-}
-.w2ui-toolbar table.w2ui-button:hover {
- background-color: var(--color-border-darker);
-}
-.w2ui-toolbar table.w2ui-button.over {
- border: 1px solid var(--color-border-darker) !important;
-}
-.w2ui-toolbar table.w2ui-button.checked {
- background-color: var(--color-background-dark);
- border: 1px solid var(--color-border-dark);
- color: var(--color-text-dark);
-}
.w2ui-icon.basicshapes_rectangle { background: url('images/lc_rect.svg') no-repeat center; }
.w2ui-icon.basicshapes_round-rectangle { background: url('images/lc_rect_rounded.svg') no-repeat center; }
@@ -1830,17 +1762,6 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
}
}
-.w2ui-color {
- background-color: transparent;
-}
-
-.w2ui-toolbar table.w2ui-button .w2ui-tb-caption,
-.w2ui-toolbar table.w2ui-button.checked .w2ui-tb-caption,
-.w2ui-reset table tr th, .w2ui-reset table tr td {
- font-size: var(--default-font-size);
- color: var(--color-main-text);
-}
-
.slidelayout-button {
display: flex;
justify-content: center;
"Pedro Pinto Silva (via github)"
Feb 23, 2026, 6:37:45 AMFeb 23
to collaboraon...@googlegroups.com
browser/css/forced-colors.css | 74 +++++++++++++++++++++++++++++++++++++-----
1 file changed, 66 insertions(+), 8 deletions(-)
New commits:
commit 93ef906f0eefa7f7660816f7683cb20a89958dee
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Mon Feb 23 12:37:11 2026 +0100
Fix invisible buttons user applies custom OS-level, part 2
Follow up from 5fb924a321f6482c7876cb8072cc594456bdf267
Make sure dropdow arrows, expanders, shortcuts-bar and other elements
are also visible.
Change-Id: I7c965abe195253e9ef37231b47d03e94c1fe37a2
diff --git a/browser/css/forced-colors.css b/browser/css/forced-colors.css
index 7d8bf1aa85..ff95dbafa6 100644
--- a/browser/css/forced-colors.css
+++ b/browser/css/forced-colors.css
@@ -1,26 +1,33 @@
@media (forced-colors: active) {
/* Active notebookbar tab: box-shadow is stripped, use border-bottom */
- .ui-tab.selected.notebookbar {
- border-bottom: 2px solid Highlight !important;
+ .ui-tab.selected.notebookbar,
+ .main-nav.hasnotebookbar .ui-tabs > .ui-tab.selected.notebookbar {
+ border: 2px solid Highlight !important;
box-shadow: none !important;
+ background-color: Highlight !important;
}
+
.ui-tab.selected.notebookbar:hover {
}
+
.ui-tab.notebookbar:hover {
.savemodified.unotoolbutton .unobutton img,
+ .ui-tabs-content .unobutton>img,
+ .unotoolbutton.notebookbar .unobutton>img,
+ .unotoolbutton.notebookbar .unobutton {
forced-color-adjust: none;
+ background-color: #e9e9ed;
appearance: auto !important;
-webkit-appearance: auto !important;
+ /* Shortcuts buttons: small save icon etc */
+ .notebookbar-shortcuts-bar .unotoolbutton.notebookbar .unobutton {
+ forced-color-adjust: auto;
+ }
+
+ /* Dropdown arrows */
+ .unoarrow, .menubutton .arrow, .ui-listbox-arrow {
+ forced-color-adjust: none;
+ border-top-color: #e9e9ed;
+ }
+
+ /* Restore original Sidebar expanders */
+ .ui-expander-label.expanded::before,
+ .ui-treeview-expandable:not(.collapsed) > div > .ui-treeview-expander::before,
+ .ui-treeview div[aria-expanded='true'] > div > .ui-treeview-expander::before {
+ forced-color-adjust: none;
+ filter: none;
+ }
+
+ /* Color picker swatches and selected-color indicator */
+ .ui-color-picker-entry,
+ .unotoolbutton .selected-color {
+ forced-color-adjust: none;
+ }
+
+ /* Styles sidebar: specificity boost over [id] button rules */
+ .StyleListPanel #TemplatePanel [id] button {
+ forced-color-adjust: none;
+ background-color: #e9e9ed;
+ }
+
+ /* Style preview images in sidebar treeview */
+ .StyleListPanel .ui-treeview-entry img {
+ forced-color-adjust: none;
+ }
+
+ /* Comment/annotation action buttons (SVG background icons) */
+ .cool-annotation-menu,
+ .cool-annotation-menu-redline,
+ .cool-annotation-menu-edit,
+ .cool-redline-accept-button,
+ .cool-redline-reject-button {
+ forced-color-adjust: none;
+ }
+
+ /* Overflow popup icons */
+ .ui-overflow-group-popup .unobutton > img {
+ forced-color-adjust: none;
+ background-color: #e9e9ed;
}
}
1 file changed, 66 insertions(+), 8 deletions(-)
New commits:
commit 93ef906f0eefa7f7660816f7683cb20a89958dee
Author: Pedro Pinto Silva <pedro...@collabora.com>
AuthorDate: Thu Feb 19 14:02:01 2026 +0100
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Mon Feb 23 12:37:11 2026 +0100
Fix invisible buttons user applies custom OS-level, part 2
Follow up from 5fb924a321f6482c7876cb8072cc594456bdf267
Make sure dropdow arrows, expanders, shortcuts-bar and other elements
are also visible.
Change-Id: I7c965abe195253e9ef37231b47d03e94c1fe37a2
diff --git a/browser/css/forced-colors.css b/browser/css/forced-colors.css
index 7d8bf1aa85..ff95dbafa6 100644
--- a/browser/css/forced-colors.css
+++ b/browser/css/forced-colors.css
@@ -1,26 +1,33 @@
@media (forced-colors: active) {
/* Active notebookbar tab: box-shadow is stripped, use border-bottom */
- .ui-tab.selected.notebookbar {
- border-bottom: 2px solid Highlight !important;
+ .main-nav.hasnotebookbar .ui-tabs > .ui-tab.selected.notebookbar {
+ border: 2px solid Highlight !important;
box-shadow: none !important;
+ background-color: Highlight !important;
}
+
.ui-tab.selected.notebookbar:hover {
box-shadow: none !important;
- border-bottom: 2px solid Highlight !important;
+ border-bottom: 3px solid Highlight !important
- border-bottom: 2px solid Highlight !important;
}
+
.ui-tab.notebookbar:hover {
box-shadow: none !important;
- border-bottom: 2px solid ButtonBorder !important;
+ border-bottom: 3px solid ButtonBorder !important
- border-bottom: 2px solid ButtonBorder !important;
}
/* Preserve SVG toolbar icons */
- .w2ui-icon,
- .unoSave.savemodified .unobutton img,
+ .unobutton img,
/* Preserve SVG toolbar icons */
- .w2ui-icon,
- .unoSave.savemodified .unobutton img,
.savemodified.unotoolbutton .unobutton img,
.StyleListPanel #TemplatePanel button,
- .document-logo {
+ .document-logo,
- .document-logo {
+ .ui-tabs-content .unobutton>img,
+ .unotoolbutton.notebookbar .unobutton>img,
+ .unotoolbutton.notebookbar .unobutton {
forced-color-adjust: none;
+ background-color: #e9e9ed;
}
/* Restore native checkboxes (OS renders in user's HC colors) */
@@ -29,7 +36,58 @@
/* Restore native checkboxes (OS renders in user's HC colors) */
appearance: auto !important;
-webkit-appearance: auto !important;
-moz-appearance: auto !important;
- background: none !important;
- background: none !important;
+ background: none !important
+ }
+
+ }
+ /* Shortcuts buttons: small save icon etc */
+ .notebookbar-shortcuts-bar .unotoolbutton.notebookbar .unobutton {
+ forced-color-adjust: auto;
+ }
+
+ /* Dropdown arrows */
+ .unoarrow, .menubutton .arrow, .ui-listbox-arrow {
+ forced-color-adjust: none;
+ border-top-color: #e9e9ed;
+ }
+
+ /* Restore original Sidebar expanders */
+ .ui-expander-label.expanded::before,
+ .ui-treeview-expandable:not(.collapsed) > div > .ui-treeview-expander::before,
+ .ui-treeview div[aria-expanded='true'] > div > .ui-treeview-expander::before {
+ forced-color-adjust: none;
+ filter: none;
+ }
+
+ /* Color picker swatches and selected-color indicator */
+ .ui-color-picker-entry,
+ .unotoolbutton .selected-color {
+ forced-color-adjust: none;
+ }
+
+ /* Styles sidebar: specificity boost over [id] button rules */
+ .StyleListPanel #TemplatePanel [id] button {
+ forced-color-adjust: none;
+ background-color: #e9e9ed;
+ }
+
+ /* Style preview images in sidebar treeview */
+ .StyleListPanel .ui-treeview-entry img {
+ forced-color-adjust: none;
+ }
+
+ /* Comment/annotation action buttons (SVG background icons) */
+ .cool-annotation-menu,
+ .cool-annotation-menu-redline,
+ .cool-annotation-menu-edit,
+ .cool-redline-accept-button,
+ .cool-redline-reject-button {
+ forced-color-adjust: none;
+ }
+
+ /* Overflow popup icons */
+ .ui-overflow-group-popup .unobutton > img {
+ forced-color-adjust: none;
+ background-color: #e9e9ed;
}
}
"Pedro Pinto Silva (via github)"
Feb 23, 2026, 7:06:16 AMFeb 23
to collaboraon...@googlegroups.com
browser/css/forced-colors.css | 4 ++--
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Mon Feb 23 13:05:15 2026 +0100
CSS: Fix missing formatting
Change-Id: I43e43cebf3995752b32b82f959e748407d73ad3d
diff --git a/browser/css/forced-colors.css b/browser/css/forced-colors.css
index ff95dbafa6..7432d60a2c 100644
--- a/browser/css/forced-colors.css
+++ b/browser/css/forced-colors.css
@@ -23,8 +23,8 @@
- .ui-tabs-content .unobutton>img,
- .unotoolbutton.notebookbar .unobutton>img,
forced-color-adjust: none;
background-color: #e9e9ed;
1 file changed, 2 insertions(+), 2 deletions(-)
New commits:
commit 5941cccc62b172abd6d974496b4f29ded501c299
New commits:
Author: Pedro Pinto Silva <pedro...@collabora.com>
AuthorDate: Mon Feb 23 13:03:07 2026 +0100
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Mon Feb 23 13:05:15 2026 +0100
CSS: Fix missing formatting
Change-Id: I43e43cebf3995752b32b82f959e748407d73ad3d
diff --git a/browser/css/forced-colors.css b/browser/css/forced-colors.css
index ff95dbafa6..7432d60a2c 100644
--- a/browser/css/forced-colors.css
+++ b/browser/css/forced-colors.css
@@ -23,8 +23,8 @@
.savemodified.unotoolbutton .unobutton img,
.StyleListPanel #TemplatePanel button,
.document-logo,
.StyleListPanel #TemplatePanel button,
- .ui-tabs-content .unobutton>img,
- .unotoolbutton.notebookbar .unobutton>img,
+ .ui-tabs-content .unobutton > img,
+ .unotoolbutton.notebookbar .unobutton > img,
.unotoolbutton.notebookbar .unobutton {
+ .unotoolbutton.notebookbar .unobutton > img,
forced-color-adjust: none;
background-color: #e9e9ed;
"Henry Castro (via github)"
Feb 24, 2026, 6:52:53 AMFeb 24
to collaboraon...@googlegroups.com
browser/css/menubar.css | 12 +++++++++---
1 file changed, 9 insertions(+), 3 deletions(-)
New commits:
commit eba379710fd94f78adcbb89392b794beb42e39ad
Author: Henry Castro <hca...@collabora.com>
AuthorDate: Fri Feb 20 09:30:36 2026 -0400
Commit: Darshan-Upadhyay <61383886+Darsh...@users.noreply.github.com>
CommitDate: Tue Feb 24 17:22:34 2026 +0530
browser: a11y: show horizontal scrollbar in <nav> at 400% zoom
Change-Id: I40817c226eef949eb14274c073ea482cf41f1c03
Signed-off-by: Henry Castro <hca...@collabora.com>
diff --git a/browser/css/menubar.css b/browser/css/menubar.css
index 889f831da6..9ba15e67b7 100644
--- a/browser/css/menubar.css
+++ b/browser/css/menubar.css
@@ -181,9 +181,7 @@ nav.hasnotebookbar [id^='save'].saved::after {
scrollbar-width: none;
-ms-scrollbar: none;
}
-.main-nav.hasnotebookbar::-webkit-scrollbar {
- height: 0;
-}
+
.main-nav.hasnotebookbar:not(.readonly) {
background: var(--color-main-background);
padding: 0px;
@@ -191,6 +189,14 @@ nav.hasnotebookbar [id^='save'].saved::after {
padding-inline-start: 5px;
}
+@media (max-width: 480px) {
+
+ .main-nav.hasnotebookbar {
+ scrollbar-width: unset;
+ -ms-scrollbar: unset;
+ }
+}
+
/* Customizations to sm-simple theme to make it look like LO menu, lo-menu class */
.lo-menu {
border: none;
1 file changed, 9 insertions(+), 3 deletions(-)
New commits:
commit eba379710fd94f78adcbb89392b794beb42e39ad
Author: Henry Castro <hca...@collabora.com>
AuthorDate: Fri Feb 20 09:30:36 2026 -0400
Commit: Darshan-Upadhyay <61383886+Darsh...@users.noreply.github.com>
CommitDate: Tue Feb 24 17:22:34 2026 +0530
browser: a11y: show horizontal scrollbar in <nav> at 400% zoom
Change-Id: I40817c226eef949eb14274c073ea482cf41f1c03
Signed-off-by: Henry Castro <hca...@collabora.com>
diff --git a/browser/css/menubar.css b/browser/css/menubar.css
index 889f831da6..9ba15e67b7 100644
--- a/browser/css/menubar.css
+++ b/browser/css/menubar.css
@@ -181,9 +181,7 @@ nav.hasnotebookbar [id^='save'].saved::after {
scrollbar-width: none;
-ms-scrollbar: none;
}
-.main-nav.hasnotebookbar::-webkit-scrollbar {
- height: 0;
-}
+
.main-nav.hasnotebookbar:not(.readonly) {
background: var(--color-main-background);
padding: 0px;
@@ -191,6 +189,14 @@ nav.hasnotebookbar [id^='save'].saved::after {
padding-inline-start: 5px;
}
+@media (max-width: 480px) {
+
+ .main-nav.hasnotebookbar {
+ scrollbar-width: unset;
+ -ms-scrollbar: unset;
+ }
+}
+
/* Customizations to sm-simple theme to make it look like LO menu, lo-menu class */
.lo-menu {
border: none;
"Henry Castro (via github)"
Feb 27, 2026, 5:39:52 AMFeb 27
to collaboraon...@googlegroups.com
browser/css/btns.css | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
New commits:
commit 1434257b7997a02ef667bd136dc78a11308d20ec
Author: Henry Castro <hca...@collabora.com>
AuthorDate: Thu Feb 26 10:44:19 2026 -0400
Commit: Henry Castro <hca...@collabora.com>
CommitDate: Fri Feb 27 06:39:11 2026 -0400
browser: a11y: fix button image not grayed out when disabled
Change-Id: I7d1b2a9e3700f0504ae1ee53c706634c5c4a1e90
Signed-off-by: Henry Castro <hca...@collabora.com>
diff --git a/browser/css/btns.css b/browser/css/btns.css
index 1234457189..f348a169e4 100644
--- a/browser/css/btns.css
+++ b/browser/css/btns.css
@@ -130,6 +130,11 @@ button.jsdialog img {
max-height: 100%;
}
+button.jsdialog[disabled] img {
+ filter: grayscale(100%);
+ opacity: 0.5;
+}
+
.annotation-btns-container {
display: flex;
flex-direction: row;
@@ -252,4 +257,4 @@ div[id^='ColumnDialog'] :is(#back, #next) button.has-img img,
div[id^='FieldRefPage'] :is(#prev, #next) button.has-img img {
width: 100%;
height: 100%;
-}
\ No newline at end of file
+}
1 file changed, 6 insertions(+), 1 deletion(-)
New commits:
commit 1434257b7997a02ef667bd136dc78a11308d20ec
Author: Henry Castro <hca...@collabora.com>
AuthorDate: Thu Feb 26 10:44:19 2026 -0400
Commit: Henry Castro <hca...@collabora.com>
CommitDate: Fri Feb 27 06:39:11 2026 -0400
browser: a11y: fix button image not grayed out when disabled
Change-Id: I7d1b2a9e3700f0504ae1ee53c706634c5c4a1e90
Signed-off-by: Henry Castro <hca...@collabora.com>
diff --git a/browser/css/btns.css b/browser/css/btns.css
index 1234457189..f348a169e4 100644
--- a/browser/css/btns.css
+++ b/browser/css/btns.css
@@ -130,6 +130,11 @@ button.jsdialog img {
max-height: 100%;
}
+button.jsdialog[disabled] img {
+ filter: grayscale(100%);
+ opacity: 0.5;
+}
+
.annotation-btns-container {
display: flex;
flex-direction: row;
@@ -252,4 +257,4 @@ div[id^='ColumnDialog'] :is(#back, #next) button.has-img img,
div[id^='FieldRefPage'] :is(#prev, #next) button.has-img img {
width: 100%;
height: 100%;
-}
\ No newline at end of file
+}
"Pedro Pinto Silva (via github)"
Feb 27, 2026, 11:55:00 AMFeb 27
to collaboraon...@googlegroups.com
browser/css/forced-colors.css | 36 ++++++++++++++++++++++++++++++++++++
1 file changed, 36 insertions(+)
New commits:
commit 792e57c7bf0e798565e57f185859404f1c097125
Commit: Caolán McNamara <cao...@gmail.com>
CommitDate: Fri Feb 27 16:54:12 2026 +0000
Forced-colors: add dark mode support
and fix annotation/redline buttons.
Change-Id: I1489377313ec55eb0f7c932e4b4d55967bd71e31
diff --git a/browser/css/forced-colors.css b/browser/css/forced-colors.css
index 7432d60a2c..61d6e132eb 100644
--- a/browser/css/forced-colors.css
+++ b/browser/css/forced-colors.css
@@ -82,6 +82,7 @@
.cool-redline-accept-button,
.cool-redline-reject-button {
forced-color-adjust: none;
+ background-color: #e9e9ed !important;
background-color: #e9e9ed;
}
+ /* Dark mode: invert hardcoded light backgrounds for icon visibility */
+ [data-theme='dark'] .unobutton img,
+ [data-theme='dark'] .savemodified.unotoolbutton .unobutton img,
+ [data-theme='dark'] .StyleListPanel #TemplatePanel button,
+ [data-theme='dark'] .document-logo,
+ [data-theme='dark'] .ui-tabs-content .unobutton > img,
+ [data-theme='dark'] .unotoolbutton.notebookbar .unobutton > img,
+ [data-theme='dark'] .unotoolbutton.notebookbar .unobutton,
+ [data-theme='dark'] .StyleListPanel #TemplatePanel [id] button,
+ [data-theme='dark'] .ui-overflow-group-popup .unobutton > img {
+ background-color: #1E1E1E;
+ }
+
+ [data-theme='dark'] .cool-annotation-menu,
+ [data-theme='dark'] .cool-annotation-menu-redline,
+ [data-theme='dark'] .cool-annotation-menu-edit,
+ [data-theme='dark'] .cool-redline-accept-button,
+ [data-theme='dark'] .cool-redline-reject-button {
+ background-color: #1E1E1E !important;
+ }
+
+ [data-theme='dark'] .unoarrow,
+ [data-theme='dark'] .menubutton .arrow,
+ [data-theme='dark'] .ui-listbox-arrow {
+ border-top-color: #1E1E1E;
+ }
+
+ /* Dark mode: restore brightness for sidebar expanders (filter: none
+ overrides dark mode's brightness(1), leaving dark chevron on dark bg) */
+ [data-theme='dark'] .ui-expander-label.expanded::before,
+ [data-theme='dark'] .ui-treeview-expandable:not(.collapsed) > div > .ui-treeview-expander::before,
+ [data-theme='dark'] .ui-treeview div[aria-expanded='true'] > div > .ui-treeview-expander::before {
+ filter: brightness(1);
+ }
+
}
1 file changed, 36 insertions(+)
New commits:
commit 792e57c7bf0e798565e57f185859404f1c097125
Author: Pedro Pinto Silva <pedro...@collabora.com>
AuthorDate: Fri Feb 27 17:11:19 2026 +0100
Commit: Caolán McNamara <cao...@gmail.com>
CommitDate: Fri Feb 27 16:54:12 2026 +0000
Forced-colors: add dark mode support
and fix annotation/redline buttons.
Change-Id: I1489377313ec55eb0f7c932e4b4d55967bd71e31
diff --git a/browser/css/forced-colors.css b/browser/css/forced-colors.css
index 7432d60a2c..61d6e132eb 100644
--- a/browser/css/forced-colors.css
+++ b/browser/css/forced-colors.css
@@ -82,6 +82,7 @@
.cool-redline-accept-button,
.cool-redline-reject-button {
forced-color-adjust: none;
+ background-color: #e9e9ed !important;
}
/* Overflow popup icons */
@@ -90,4 +91,39 @@
/* Overflow popup icons */
background-color: #e9e9ed;
}
+ /* Dark mode: invert hardcoded light backgrounds for icon visibility */
+ [data-theme='dark'] .unobutton img,
+ [data-theme='dark'] .savemodified.unotoolbutton .unobutton img,
+ [data-theme='dark'] .StyleListPanel #TemplatePanel button,
+ [data-theme='dark'] .document-logo,
+ [data-theme='dark'] .ui-tabs-content .unobutton > img,
+ [data-theme='dark'] .unotoolbutton.notebookbar .unobutton > img,
+ [data-theme='dark'] .unotoolbutton.notebookbar .unobutton,
+ [data-theme='dark'] .StyleListPanel #TemplatePanel [id] button,
+ [data-theme='dark'] .ui-overflow-group-popup .unobutton > img {
+ background-color: #1E1E1E;
+ }
+
+ [data-theme='dark'] .cool-annotation-menu,
+ [data-theme='dark'] .cool-annotation-menu-redline,
+ [data-theme='dark'] .cool-annotation-menu-edit,
+ [data-theme='dark'] .cool-redline-accept-button,
+ [data-theme='dark'] .cool-redline-reject-button {
+ background-color: #1E1E1E !important;
+ }
+
+ [data-theme='dark'] .unoarrow,
+ [data-theme='dark'] .menubutton .arrow,
+ [data-theme='dark'] .ui-listbox-arrow {
+ border-top-color: #1E1E1E;
+ }
+
+ /* Dark mode: restore brightness for sidebar expanders (filter: none
+ overrides dark mode's brightness(1), leaving dark chevron on dark bg) */
+ [data-theme='dark'] .ui-expander-label.expanded::before,
+ [data-theme='dark'] .ui-treeview-expandable:not(.collapsed) > div > .ui-treeview-expander::before,
+ [data-theme='dark'] .ui-treeview div[aria-expanded='true'] > div > .ui-treeview-expander::before {
+ filter: brightness(1);
+ }
+
}
"Banobe Pascal (via github)"
Mar 3, 2026, 4:32:40 AMMar 3
to collaboraon...@googlegroups.com
browser/css/forced-colors.css | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
New commits:
commit 05c933924bcee4a252fc624daaf77b62ea5b662b
Author: Banobe Pascal <banobe...@collabora.com>
AuthorDate: Mon Mar 2 17:49:24 2026 +0300
Commit: Caolán McNamara <cao...@gmail.com>
CommitDate: Tue Mar 3 09:32:24 2026 +0000
Forced-colors: fix backgroud color overide
- Add !important to forced-colors background rules to ensure they are not
overridden by other theme styles.
Signed-off-by: Banobe Pascal <banobe...@collabora.com>
Change-Id: I6ced70a7b45f247f8222956bf0b62ccf7ec8f77e
diff --git a/browser/css/forced-colors.css b/browser/css/forced-colors.css
index 61d6e132eb..40e02c8976 100644
--- a/browser/css/forced-colors.css
+++ b/browser/css/forced-colors.css
@@ -27,7 +27,7 @@
+ background-color: #e9e9ed !important;
}
/* Restore native checkboxes (OS renders in user's HC colors) */
@@ -47,7 +47,7 @@
/* Dropdown arrows */
.unoarrow, .menubutton .arrow, .ui-listbox-arrow {
forced-color-adjust: none;
- border-top-color: #e9e9ed;
+ border-top-color: #e9e9ed !important;
[data-theme='dark'] .unotoolbutton.notebookbar .unobutton,
+ background-color: #1E1E1E !important;
}
[data-theme='dark'] .cool-annotation-menu,
@@ -115,7 +115,7 @@
[data-theme='dark'] .unoarrow,
[data-theme='dark'] .menubutton .arrow,
[data-theme='dark'] .ui-listbox-arrow {
- border-top-color: #1E1E1E;
+ border-top-color: #FFFF;
1 file changed, 4 insertions(+), 4 deletions(-)
New commits:
commit 05c933924bcee4a252fc624daaf77b62ea5b662b
Author: Banobe Pascal <banobe...@collabora.com>
AuthorDate: Mon Mar 2 17:49:24 2026 +0300
Commit: Caolán McNamara <cao...@gmail.com>
CommitDate: Tue Mar 3 09:32:24 2026 +0000
Forced-colors: fix backgroud color overide
- Add !important to forced-colors background rules to ensure they are not
overridden by other theme styles.
Signed-off-by: Banobe Pascal <banobe...@collabora.com>
Change-Id: I6ced70a7b45f247f8222956bf0b62ccf7ec8f77e
diff --git a/browser/css/forced-colors.css b/browser/css/forced-colors.css
index 61d6e132eb..40e02c8976 100644
--- a/browser/css/forced-colors.css
+++ b/browser/css/forced-colors.css
@@ -27,7 +27,7 @@
.unotoolbutton.notebookbar .unobutton > img,
.unotoolbutton.notebookbar .unobutton {
forced-color-adjust: none;
- background-color: #e9e9ed;
.unotoolbutton.notebookbar .unobutton {
forced-color-adjust: none;
+ background-color: #e9e9ed !important;
}
/* Restore native checkboxes (OS renders in user's HC colors) */
/* Dropdown arrows */
.unoarrow, .menubutton .arrow, .ui-listbox-arrow {
forced-color-adjust: none;
- border-top-color: #e9e9ed;
+ border-top-color: #e9e9ed !important;
}
/* Restore original Sidebar expanders */
@@ -101,7 +101,7 @@
/* Restore original Sidebar expanders */
[data-theme='dark'] .unotoolbutton.notebookbar .unobutton,
[data-theme='dark'] .StyleListPanel #TemplatePanel [id] button,
[data-theme='dark'] .ui-overflow-group-popup .unobutton > img {
- background-color: #1E1E1E;
+ background-color: #1E1E1E !important;
}
[data-theme='dark'] .cool-annotation-menu,
@@ -115,7 +115,7 @@
[data-theme='dark'] .unoarrow,
[data-theme='dark'] .menubutton .arrow,
[data-theme='dark'] .ui-listbox-arrow {
- border-top-color: #1E1E1E;
+ border-top-color: #FFFF;
"Banobe Pascal (via github)"
Mar 4, 2026, 4:43:01 AMMar 4
to collaboraon...@googlegroups.com
browser/css/forced-colors.css | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
New commits:
commit 247891ae5d951632a0c76bb1bdc45ceb567212a3
Author: Banobe Pascal <banobe...@collabora.com>
AuthorDate: Wed Mar 4 05:29:58 2026 +0300
Commit: Caolán McNamara <cao...@gmail.com>
CommitDate: Wed Mar 4 09:42:36 2026 +0000
Forced-colors: add selector for close widget
Signed-off-by: Banobe Pascal <banobe...@collabora.com>
Change-Id: I26d81ba78c363ef6c287dd25bf3ecd79f7c9bf9e
diff --git a/browser/css/forced-colors.css b/browser/css/forced-colors.css
index 40e02c8976..8288f6df03 100644
--- a/browser/css/forced-colors.css
+++ b/browser/css/forced-colors.css
@@ -25,7 +25,8 @@
.document-logo,
.ui-tabs-content .unobutton > img,
.unotoolbutton.notebookbar .unobutton > img,
- .unotoolbutton.notebookbar .unobutton {
+ .unotoolbutton.notebookbar .unobutton,
+ .lokdialog_container .ui-dialog-titlebar-close {
forced-color-adjust: none;
background-color: #e9e9ed !important;
}
@@ -100,7 +101,8 @@
+ [data-theme='dark'] .ui-overflow-group-popup .unobutton > img,
+ [data-theme='dark'] .lokdialog_container .ui-dialog-titlebar-close {
background-color: #1E1E1E !important;
}
1 file changed, 4 insertions(+), 2 deletions(-)
New commits:
commit 247891ae5d951632a0c76bb1bdc45ceb567212a3
Author: Banobe Pascal <banobe...@collabora.com>
AuthorDate: Wed Mar 4 05:29:58 2026 +0300
Commit: Caolán McNamara <cao...@gmail.com>
CommitDate: Wed Mar 4 09:42:36 2026 +0000
Forced-colors: add selector for close widget
Signed-off-by: Banobe Pascal <banobe...@collabora.com>
Change-Id: I26d81ba78c363ef6c287dd25bf3ecd79f7c9bf9e
diff --git a/browser/css/forced-colors.css b/browser/css/forced-colors.css
index 40e02c8976..8288f6df03 100644
--- a/browser/css/forced-colors.css
+++ b/browser/css/forced-colors.css
@@ -25,7 +25,8 @@
.document-logo,
.ui-tabs-content .unobutton > img,
.unotoolbutton.notebookbar .unobutton > img,
- .unotoolbutton.notebookbar .unobutton {
+ .unotoolbutton.notebookbar .unobutton,
+ .lokdialog_container .ui-dialog-titlebar-close {
forced-color-adjust: none;
background-color: #e9e9ed !important;
}
@@ -100,7 +101,8 @@
[data-theme='dark'] .unotoolbutton.notebookbar .unobutton > img,
[data-theme='dark'] .unotoolbutton.notebookbar .unobutton,
[data-theme='dark'] .StyleListPanel #TemplatePanel [id] button,
- [data-theme='dark'] .ui-overflow-group-popup .unobutton > img {
[data-theme='dark'] .StyleListPanel #TemplatePanel [id] button,
+ [data-theme='dark'] .ui-overflow-group-popup .unobutton > img,
+ [data-theme='dark'] .lokdialog_container .ui-dialog-titlebar-close {
background-color: #1E1E1E !important;
}
"Caolán McNamara (via github)"
Mar 5, 2026, 5:50:16 AMMar 5
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 1 +
browser/css/notebookbar.css | 1 +
2 files changed, 2 insertions(+)
New commits:
commit 346b2d72ef8045c4063f5e0d82c11b897d4e7527
Author: Caolán McNamara <caolan....@collabora.com>
AuthorDate: Wed Mar 4 16:22:25 2026 +0000
Commit: Caolán McNamara <cao...@gmail.com>
CommitDate: Thu Mar 5 10:50:03 2026 +0000
Hovering over large notebookbar buttons doesn't screenread in NVDA
There is no problem using tab/arrows to navigate to the buttons, then
they are read out fine. But on hover, nothing is read on the large
buttons like "Columns" or "Slect All" in the Labout tab.
It looks like these ::after things block nvda from seeing the
underlying element. They certainly screen after this change on
hover and didn't before:
The ::after rules were added in:
commit 74c819e4467fe567c9e6bd9fe8f39e0aef452d4e
Date: Tue Sep 10 16:45:34 2024 +0200
feat(UI): Improve split button styling
Signed-off-by: Caolán McNamara <caolan....@collabora.com>
Change-Id: I8a16097b63ac3a4550754936358a9b389d871fba
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 4eacacf35c..46dfd7c965 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2206,6 +2206,7 @@ button.menubutton.sidebar > span {
right: var(--click-increment);
bottom: var(--click-increment);
left: var(--click-increment);
+ pointer-events: none;
}
/* targetting buttons inside of split button */
diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
index e35fd23fe3..ea31923c46 100644
--- a/browser/css/notebookbar.css
+++ b/browser/css/notebookbar.css
@@ -327,6 +327,7 @@ html[data-theme='dark'] .savemodified.unotoolbutton:not(.notebookbar) .unobutton
right: var(--click-increment);
bottom: var(--click-increment);
left: var(--click-increment);
+ pointer-events: none;
}
.unotoolbutton.notebookbar.inline:hover {
browser/css/notebookbar.css | 1 +
2 files changed, 2 insertions(+)
New commits:
commit 346b2d72ef8045c4063f5e0d82c11b897d4e7527
Author: Caolán McNamara <caolan....@collabora.com>
AuthorDate: Wed Mar 4 16:22:25 2026 +0000
Commit: Caolán McNamara <cao...@gmail.com>
CommitDate: Thu Mar 5 10:50:03 2026 +0000
Hovering over large notebookbar buttons doesn't screenread in NVDA
There is no problem using tab/arrows to navigate to the buttons, then
they are read out fine. But on hover, nothing is read on the large
buttons like "Columns" or "Slect All" in the Labout tab.
It looks like these ::after things block nvda from seeing the
underlying element. They certainly screen after this change on
hover and didn't before:
The ::after rules were added in:
commit 74c819e4467fe567c9e6bd9fe8f39e0aef452d4e
Date: Tue Sep 10 16:45:34 2024 +0200
feat(UI): Improve split button styling
Signed-off-by: Caolán McNamara <caolan....@collabora.com>
Change-Id: I8a16097b63ac3a4550754936358a9b389d871fba
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 4eacacf35c..46dfd7c965 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2206,6 +2206,7 @@ button.menubutton.sidebar > span {
right: var(--click-increment);
bottom: var(--click-increment);
left: var(--click-increment);
+ pointer-events: none;
}
/* targetting buttons inside of split button */
diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
index e35fd23fe3..ea31923c46 100644
--- a/browser/css/notebookbar.css
+++ b/browser/css/notebookbar.css
@@ -327,6 +327,7 @@ html[data-theme='dark'] .savemodified.unotoolbutton:not(.notebookbar) .unobutton
right: var(--click-increment);
bottom: var(--click-increment);
left: var(--click-increment);
+ pointer-events: none;
}
.unotoolbutton.notebookbar.inline:hover {
"Shardul Vikram Singh (via github)"
Mar 5, 2026, 9:51:29 AMMar 5
to collaboraon...@googlegroups.com
browser/css/device-desktop.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
New commits:
commit f7ee55b8c3c65cbd02b170eeec3abe862390e999
Author: Shardul Vikram Singh <shardu...@collabora.com>
AuthorDate: Tue Mar 3 15:19:20 2026 +0530
Commit: Szymon Kłos <eszk...@gmail.com>
CommitDate: Thu Mar 5 15:51:08 2026 +0100
fix last box highlighting in the insert table dropdown
Signed-off-by: Shardul Vikram Singh <shardu...@collabora.com>
Change-Id: I2dfbb942b3cfa93d549d17c80d92caffcf191145
diff --git a/browser/css/device-desktop.css b/browser/css/device-desktop.css
index ee9c244e85..a11a4a21ac 100644
--- a/browser/css/device-desktop.css
+++ b/browser/css/device-desktop.css
@@ -14,7 +14,7 @@
Rules not intended for touch devices */
.ui-toggle button:hover,
.button-secondary:hover,
-button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):not(.notebookbar.ui-tab):not(.ui-expander-btn):not(.arrowbackground):not(.ui-combobox-button):hover {
+button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):not(.notebookbar.ui-tab):not(.ui-expander-btn):not(.arrowbackground):not(.ui-combobox-button):not(.inserttable-grid .col):hover {
cursor: pointer;
color: var(--color-text-darker) !important;
background-color: var(--color-background-lighter) !important;
1 file changed, 1 insertion(+), 1 deletion(-)
New commits:
commit f7ee55b8c3c65cbd02b170eeec3abe862390e999
Author: Shardul Vikram Singh <shardu...@collabora.com>
AuthorDate: Tue Mar 3 15:19:20 2026 +0530
Commit: Szymon Kłos <eszk...@gmail.com>
CommitDate: Thu Mar 5 15:51:08 2026 +0100
fix last box highlighting in the insert table dropdown
Signed-off-by: Shardul Vikram Singh <shardu...@collabora.com>
Change-Id: I2dfbb942b3cfa93d549d17c80d92caffcf191145
diff --git a/browser/css/device-desktop.css b/browser/css/device-desktop.css
index ee9c244e85..a11a4a21ac 100644
--- a/browser/css/device-desktop.css
+++ b/browser/css/device-desktop.css
@@ -14,7 +14,7 @@
Rules not intended for touch devices */
.ui-toggle button:hover,
.button-secondary:hover,
-button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):not(.notebookbar.ui-tab):not(.ui-expander-btn):not(.arrowbackground):not(.ui-combobox-button):hover {
+button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):not(.notebookbar.ui-tab):not(.ui-expander-btn):not(.arrowbackground):not(.ui-combobox-button):not(.inserttable-grid .col):hover {
cursor: pointer;
color: var(--color-text-darker) !important;
background-color: var(--color-background-lighter) !important;
"Pedro Pinto Silva (via github)"
Mar 12, 2026, 7:44:30 AMMar 12
to collaboraon...@googlegroups.com
browser/css/toolbar.css | 3 +++
1 file changed, 3 insertions(+)
New commits:
commit 8151f4ffffca76a20a989f4951f80e0e3da2ac52
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Thu Mar 12 12:43:44 2026 +0100
Partly revert of 88bb87902: Fix context toolbar's font size dropdown
The width was removed with 88bb87902668a0b06bf377718c737e49abad1cfa
Set again the 55 px otherwise the container sets it to 100% width
making the font size dropdown super lengthy and with it the context
toolbar.
Change-Id: I1e8739ebea1b3df817e56abd2977659fd27f5ba0
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index fddf402729..a11efd6971 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -462,6 +462,9 @@ button.leaflet-control-search-next
#toolbar-up .ui-combobox-button {
padding-left: 10px;
}
+#fontsizecombobox-input-context-toolbar {
+ width: 55px !important;
+}
#toolbar-up #fontnamecombobox {
width: 170px;
max-width: 170px;
1 file changed, 3 insertions(+)
New commits:
commit 8151f4ffffca76a20a989f4951f80e0e3da2ac52
Author: Pedro Pinto Silva <pedro...@collabora.com>
AuthorDate: Wed Mar 11 15:20:26 2026 +0100
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Thu Mar 12 12:43:44 2026 +0100
Partly revert of 88bb87902: Fix context toolbar's font size dropdown
The width was removed with 88bb87902668a0b06bf377718c737e49abad1cfa
Set again the 55 px otherwise the container sets it to 100% width
making the font size dropdown super lengthy and with it the context
toolbar.
Change-Id: I1e8739ebea1b3df817e56abd2977659fd27f5ba0
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index fddf402729..a11efd6971 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -462,6 +462,9 @@ button.leaflet-control-search-next
#toolbar-up .ui-combobox-button {
padding-left: 10px;
}
+#fontsizecombobox-input-context-toolbar {
+ width: 55px !important;
+}
#toolbar-up #fontnamecombobox {
width: 170px;
max-width: 170px;
"Andras Timar (via github)"
Mar 13, 2026, 4:27:58 AMMar 13
to collaboraon...@googlegroups.com
browser/css/cool.css | 2 +-
browser/css/jsdialogs.css | 2 --
2 files changed, 1 insertion(+), 3 deletions(-)
New commits:
commit e2c7ce911ef938af73c74e395bc0fd0e2ee16a01
Author: Andras Timar <andras...@collabora.com>
AuthorDate: Mon Mar 9 22:49:12 2026 +0100
Commit: Miklos Vajna <vmi...@collabora.com>
CommitDate: Fri Mar 13 09:27:04 2026 +0100
css: fix overly broad [Id$='Page'] selector matching checkbuttons
The CSS rule `.lokdialog.ui-dialog-content [Id$='Page']` was intended
for tab page containers but also matched checkbuttons whose id ends
with "Page" (e.g. checkAcrossPage in Format > Paragraph > Text Flow),
adding unwanted grid-column-gap that misaligned the checkbox.
Add :not(.checkbutton) to exclude checkbox widgets from this rule,
and remove the now-unnecessary workaround in jsdialogs.css.
Signed-off-by: Andras Timar <andras...@collabora.com>
Change-Id: I7c477c84988cc98c5355e886ec17d7985b6a061c
diff --git a/browser/css/cool.css b/browser/css/cool.css
index 3bbcdc529e..a783ad7192 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -1080,7 +1080,7 @@ body {
padding: 0px;
}
-.lokdialog.ui-dialog-content [Id$='Page'] {
+.lokdialog.ui-dialog-content [Id$='Page']:not(.checkbutton) {
grid-column-gap: 24px;
}
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index f2741cbfec..c9a26f9459 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2910,9 +2910,7 @@ kbd,
align-items: center;
}
-/* Writer - Format - Paragraph - Text Flow */
/* Writer - Format - Paragraph - Tabs */
-#ParagraphPropertiesDialog #textflow #checkAcrossPage.checkbutton,
#ParagraphPropertiesDialog #labelTP_TABULATOR #ParagraphTabsPage {
grid-column-gap: 0;
}
browser/css/jsdialogs.css | 2 --
2 files changed, 1 insertion(+), 3 deletions(-)
New commits:
commit e2c7ce911ef938af73c74e395bc0fd0e2ee16a01
Author: Andras Timar <andras...@collabora.com>
AuthorDate: Mon Mar 9 22:49:12 2026 +0100
Commit: Miklos Vajna <vmi...@collabora.com>
CommitDate: Fri Mar 13 09:27:04 2026 +0100
css: fix overly broad [Id$='Page'] selector matching checkbuttons
The CSS rule `.lokdialog.ui-dialog-content [Id$='Page']` was intended
for tab page containers but also matched checkbuttons whose id ends
with "Page" (e.g. checkAcrossPage in Format > Paragraph > Text Flow),
adding unwanted grid-column-gap that misaligned the checkbox.
Add :not(.checkbutton) to exclude checkbox widgets from this rule,
and remove the now-unnecessary workaround in jsdialogs.css.
Signed-off-by: Andras Timar <andras...@collabora.com>
Change-Id: I7c477c84988cc98c5355e886ec17d7985b6a061c
diff --git a/browser/css/cool.css b/browser/css/cool.css
index 3bbcdc529e..a783ad7192 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -1080,7 +1080,7 @@ body {
padding: 0px;
}
-.lokdialog.ui-dialog-content [Id$='Page'] {
+.lokdialog.ui-dialog-content [Id$='Page']:not(.checkbutton) {
grid-column-gap: 24px;
}
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index f2741cbfec..c9a26f9459 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2910,9 +2910,7 @@ kbd,
align-items: center;
}
-/* Writer - Format - Paragraph - Text Flow */
/* Writer - Format - Paragraph - Tabs */
-#ParagraphPropertiesDialog #textflow #checkAcrossPage.checkbutton,
#ParagraphPropertiesDialog #labelTP_TABULATOR #ParagraphTabsPage {
grid-column-gap: 0;
}
"Darshan-upadhyay1110 (via github)"
Mar 16, 2026, 1:04:40 PMMar 16
to collaboraon...@googlegroups.com
browser/css/notebookbar.css | 1 +
Author: Darshan-upadhyay1110 <darshan....@collabora.com>
AuthorDate: Tue Mar 10 21:29:29 2026 +0530
Commit: Darshan-Upadhyay <61383886+Darsh...@users.noreply.github.com>
CommitDate: Mon Mar 16 22:33:56 2026 +0530
Fix document mode label color (Edit/view mode)
- in dark mode the lable is not visible
- this small patch will fix that
Signed-off-by: Darshan-upadhyay1110 <darshan....@collabora.com>
Change-Id: Ib4d503dd1399ae405528c4d81a570b92db72393f
diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
index 1041b467c3..4e1bc1c0a9 100644
--- a/browser/css/notebookbar.css
+++ b/browser/css/notebookbar.css
@@ -461,6 +461,7 @@ label.notebookbar.ui-checkbox-label {
.has-label.has-dropdown:not(.inline) .unolabel {
display: inline-block;
clear: both;
+ color: var(--color-main-text);
}
/* adding focus to tab in notebookbar */
1 file changed, 1 insertion(+)
New commits:
commit 90bd306e882ad19791876eb0ab917ed0abc79882
New commits:
Author: Darshan-upadhyay1110 <darshan....@collabora.com>
AuthorDate: Tue Mar 10 21:29:29 2026 +0530
Commit: Darshan-Upadhyay <61383886+Darsh...@users.noreply.github.com>
CommitDate: Mon Mar 16 22:33:56 2026 +0530
Fix document mode label color (Edit/view mode)
- in dark mode the lable is not visible
- this small patch will fix that
Signed-off-by: Darshan-upadhyay1110 <darshan....@collabora.com>
Change-Id: Ib4d503dd1399ae405528c4d81a570b92db72393f
diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
index 1041b467c3..4e1bc1c0a9 100644
--- a/browser/css/notebookbar.css
+++ b/browser/css/notebookbar.css
@@ -461,6 +461,7 @@ label.notebookbar.ui-checkbox-label {
.has-label.has-dropdown:not(.inline) .unolabel {
display: inline-block;
clear: both;
+ color: var(--color-main-text);
}
/* adding focus to tab in notebookbar */
"Andras Timar (via github)"
Mar 23, 2026, 10:47:58 AMMar 23
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
New commits:
commit c85e8e16d31d499ad8a6010ae21cdc96c884a981
Author: Andras Timar <andras...@collabora.com>
AuthorDate: Sat Mar 21 16:22:04 2026 +0100
Commit: Miklos Vajna <vmi...@collabora.com>
CommitDate: Mon Mar 23 15:47:01 2026 +0100
jsdialog: visually disable menu entries with enabled=false
The core now sends "enabled": false for disabled menu items in
Menu::DumpAsPropertyTree. The TreeView widget already adds the
'disabled' CSS class to the tr element and blocks clicks in JS,
but there was no CSS rule matching .ui-treeview-entry.disabled
(the existing rule only matched div.disabled inside an entry).
Add the missing selector so disabled entries appear grayed out,
and add pointer-events: none as extra safety.
Signed-off-by: Andras Timar <andras...@collabora.com>
Change-Id: I25ac8bdc70e4c007d952af935a21ad4d454623de
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 35f17f93c1..2839014f79 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -712,9 +712,11 @@ algned to the bottom */
}
.ui-treeview.disabled,
-.ui-treeview-entry div.disabled {
+.ui-treeview-entry div.disabled,
+.ui-treeview-entry.disabled {
background-color: var(--color-background-dark) !important;
color: var(--color-text-lighter) !important;
+ pointer-events: none;
}
#custom_animation_label_parent {
1 file changed, 3 insertions(+), 1 deletion(-)
New commits:
commit c85e8e16d31d499ad8a6010ae21cdc96c884a981
Author: Andras Timar <andras...@collabora.com>
AuthorDate: Sat Mar 21 16:22:04 2026 +0100
Commit: Miklos Vajna <vmi...@collabora.com>
CommitDate: Mon Mar 23 15:47:01 2026 +0100
jsdialog: visually disable menu entries with enabled=false
The core now sends "enabled": false for disabled menu items in
Menu::DumpAsPropertyTree. The TreeView widget already adds the
'disabled' CSS class to the tr element and blocks clicks in JS,
but there was no CSS rule matching .ui-treeview-entry.disabled
(the existing rule only matched div.disabled inside an entry).
Add the missing selector so disabled entries appear grayed out,
and add pointer-events: none as extra safety.
Signed-off-by: Andras Timar <andras...@collabora.com>
Change-Id: I25ac8bdc70e4c007d952af935a21ad4d454623de
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 35f17f93c1..2839014f79 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -712,9 +712,11 @@ algned to the bottom */
}
.ui-treeview.disabled,
-.ui-treeview-entry div.disabled {
+.ui-treeview-entry div.disabled,
+.ui-treeview-entry.disabled {
background-color: var(--color-background-dark) !important;
color: var(--color-text-lighter) !important;
+ pointer-events: none;
}
#custom_animation_label_parent {
"Szymon Kłos (via github)"
Mar 24, 2026, 8:00:15 AMMar 24
to collaboraon...@googlegroups.com
browser/css/cool.css | 5 +++++
1 file changed, 5 insertions(+)
New commits:
commit 73894a903440fbca3333bd7f79d8469e20d3f9cf
Author: Szymon Kłos <szymo...@collabora.com>
AuthorDate: Fri Mar 20 12:13:43 2026 +0000
Commit: Szymon Kłos <eszk...@gmail.com>
CommitDate: Tue Mar 24 12:59:49 2026 +0100
sidebar: avoid flicker and canvas redraw
- changing sidebar deck to one with different width
will redraw canvas with visible flicker
- be sure we do not change width dynamically but prefer
static width
Signed-off-by: Szymon Kłos <szymo...@collabora.com>
Change-Id: I350f3e88f411cf490b2f717a09b609b427017a84
diff --git a/browser/css/cool.css b/browser/css/cool.css
index 38ec63bd9e..8b19be5771 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -357,6 +357,11 @@ body {
height: 100%;
}
+/* setup it statuc so we don't flicker to resize canvas */
+#sidebar-dock-wrapper {
+ width: 329px;
+}
+
#sidebar-dock-wrapper.visible {
display: block;
/* synchronize time with Sidebar.ts setting focus */
1 file changed, 5 insertions(+)
New commits:
commit 73894a903440fbca3333bd7f79d8469e20d3f9cf
Author: Szymon Kłos <szymo...@collabora.com>
AuthorDate: Fri Mar 20 12:13:43 2026 +0000
Commit: Szymon Kłos <eszk...@gmail.com>
CommitDate: Tue Mar 24 12:59:49 2026 +0100
sidebar: avoid flicker and canvas redraw
- changing sidebar deck to one with different width
will redraw canvas with visible flicker
- be sure we do not change width dynamically but prefer
static width
Signed-off-by: Szymon Kłos <szymo...@collabora.com>
Change-Id: I350f3e88f411cf490b2f717a09b609b427017a84
diff --git a/browser/css/cool.css b/browser/css/cool.css
index 38ec63bd9e..8b19be5771 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -357,6 +357,11 @@ body {
height: 100%;
}
+/* setup it statuc so we don't flicker to resize canvas */
+#sidebar-dock-wrapper {
+ width: 329px;
+}
+
#sidebar-dock-wrapper.visible {
display: block;
/* synchronize time with Sidebar.ts setting focus */
"Pedro Pinto Silva (via github)"
Mar 30, 2026, 1:21:38 PMMar 30
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 6 ++++++
1 file changed, 6 insertions(+)
New commits:
commit 708abf29b9105fab225d5f3d6f88dce525db1243
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Mon Mar 30 19:21:02 2026 +0200
Tabbed view: Fix Menubutton, stop pretending to be a split button
Before this commit menubuttons such as Data > Statistics or any other
menu button was appearing to be a split button (the right part of the
button - arrow - was getting independent background change on hover).
Change-Id: I3c51b4e5a28bdd1833c6fc7e8f088e25fc163f2c
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 884bb7abfe..f29e310ebb 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -1897,6 +1897,12 @@ img.context-menu-icon {
background-color: var(--color-background-darker);
}
+.menubutton:not(.splitbutton) .arrowbackground,
+.menubutton:not(.splitbutton) .arrowbackground:hover {
+ border-left-color: transparent;
+ background-color: transparent;
+}
+
.unoarrow:not([disabled]):hover, .arrowbackground:not([disabled]):hover .unoarrow {
border-top-color: var(--color-text-darker);
}
1 file changed, 6 insertions(+)
New commits:
commit 708abf29b9105fab225d5f3d6f88dce525db1243
Author: Pedro Pinto Silva <pedro...@collabora.com>
AuthorDate: Mon Mar 23 13:48:36 2026 +0100
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Mon Mar 30 19:21:02 2026 +0200
Tabbed view: Fix Menubutton, stop pretending to be a split button
Before this commit menubuttons such as Data > Statistics or any other
menu button was appearing to be a split button (the right part of the
button - arrow - was getting independent background change on hover).
Change-Id: I3c51b4e5a28bdd1833c6fc7e8f088e25fc163f2c
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 884bb7abfe..f29e310ebb 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -1897,6 +1897,12 @@ img.context-menu-icon {
background-color: var(--color-background-darker);
}
+.menubutton:not(.splitbutton) .arrowbackground,
+.menubutton:not(.splitbutton) .arrowbackground:hover {
+ border-left-color: transparent;
+ background-color: transparent;
+}
+
.unoarrow:not([disabled]):hover, .arrowbackground:not([disabled]):hover .unoarrow {
border-top-color: var(--color-text-darker);
}
"Shardul Vikram Singh (via github)"
Mar 30, 2026, 2:55:28 PMMar 30
to collaboraon...@googlegroups.com
browser/css/backstage.css | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
New commits:
commit ebe2459776397a721f2e08ea6f17cef04a65dfcf
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Mon Mar 30 20:54:33 2026 +0200
align backstage templates
Change-Id: I842f064c9d7fc249f3d5cb6e41fd410b1808407c
diff --git a/browser/css/backstage.css b/browser/css/backstage.css
index 1d899771a1..79e36bb5ac 100644
--- a/browser/css/backstage.css
+++ b/browser/css/backstage.css
@@ -321,7 +321,6 @@
display: flex;
flex-direction: column;
align-items: center;
- min-height: 200px;
max-width: 10rem;
}
@@ -339,7 +338,6 @@
align-items: end;
background: transparent;
flex: 1;
- min-height: 120px;
}
.template-thumbnail img {
@@ -363,6 +361,9 @@
font-weight: 500;
margin-top: 10px;
width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.backstage-template-explorer {
1 file changed, 3 insertions(+), 2 deletions(-)
New commits:
commit ebe2459776397a721f2e08ea6f17cef04a65dfcf
Author: Shardul Vikram Singh <shardu...@collabora.com>
AuthorDate: Wed Mar 4 01:30:29 2026 +0530
Commit: pedropintosilva <65948705+ped...@users.noreply.github.com>
CommitDate: Mon Mar 30 20:54:33 2026 +0200
align backstage templates
Change-Id: I842f064c9d7fc249f3d5cb6e41fd410b1808407c
diff --git a/browser/css/backstage.css b/browser/css/backstage.css
index 1d899771a1..79e36bb5ac 100644
--- a/browser/css/backstage.css
+++ b/browser/css/backstage.css
@@ -321,7 +321,6 @@
display: flex;
flex-direction: column;
align-items: center;
- min-height: 200px;
max-width: 10rem;
}
@@ -339,7 +338,6 @@
align-items: end;
background: transparent;
flex: 1;
- min-height: 120px;
}
.template-thumbnail img {
@@ -363,6 +361,9 @@
font-weight: 500;
margin-top: 10px;
width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.backstage-template-explorer {
"Tibor Nagy (via github)"
Mar 31, 2026, 7:07:28 PMMar 31
to collaboraon...@googlegroups.com
browser/css/color-palette.css | 1 +
browser/css/jsdialogs.css | 2 +-
2 files changed, 2 insertions(+), 1 deletion(-)
New commits:
commit e44946d373d31a79b79aa6e96fe2865e1b1b3829
Author: Tibor Nagy <tibor...@collabora.com>
AuthorDate: Mon Mar 30 01:23:48 2026 +0200
Commit: Caolán McNamara <cao...@gmail.com>
CommitDate: Wed Apr 1 00:07:00 2026 +0100
browser: a11y: increase jsdialog tab selected contrast ratio
The selected tab box-shadow had a contrast ratio of only 1.9:1
against the background, below the required minimum of 3:1
Added darker box-shadow color, achieving a contrast ratio of 3.4:1
Signed-off-by: Tibor Nagy <tibor...@collabora.com>
Change-Id: I718415a65da48860bb7a79ba53bcdd34f8932165
diff --git a/browser/css/color-palette.css b/browser/css/color-palette.css
index 21725d3f02..c91f3c8373 100644
--- a/browser/css/color-palette.css
+++ b/browser/css/color-palette.css
@@ -54,6 +54,7 @@
--color-box-shadow-light: rgba(77, 77, 77, 0.1);
--color-box-shadow: rgba(77, 77, 77, 0.5);
+ --color-box-shadow-dark: rgba(77, 77, 77, 0.85);
--color-hyperlink: #000080;
--color-calc-grid: #c0c0c0;
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index f29e310ebb..25bcdd6094 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -509,7 +509,7 @@ algned to the bottom */
.ui-tab.selected.jsdialog {
background-color: var(--color-background-lighter) !important;
color: var(--color-text-darker) !important;
- box-shadow: 0 0 2px 1px var(--color-box-shadow) !important;
+ box-shadow: 0 0 2px 1px var(--color-box-shadow-dark) !important;
}
.ui-tab.jsdialog:not(.selected):hover {
browser/css/jsdialogs.css | 2 +-
2 files changed, 2 insertions(+), 1 deletion(-)
New commits:
commit e44946d373d31a79b79aa6e96fe2865e1b1b3829
Author: Tibor Nagy <tibor...@collabora.com>
AuthorDate: Mon Mar 30 01:23:48 2026 +0200
Commit: Caolán McNamara <cao...@gmail.com>
CommitDate: Wed Apr 1 00:07:00 2026 +0100
browser: a11y: increase jsdialog tab selected contrast ratio
The selected tab box-shadow had a contrast ratio of only 1.9:1
against the background, below the required minimum of 3:1
Added darker box-shadow color, achieving a contrast ratio of 3.4:1
Signed-off-by: Tibor Nagy <tibor...@collabora.com>
Change-Id: I718415a65da48860bb7a79ba53bcdd34f8932165
diff --git a/browser/css/color-palette.css b/browser/css/color-palette.css
index 21725d3f02..c91f3c8373 100644
--- a/browser/css/color-palette.css
+++ b/browser/css/color-palette.css
@@ -54,6 +54,7 @@
--color-box-shadow-light: rgba(77, 77, 77, 0.1);
--color-box-shadow: rgba(77, 77, 77, 0.5);
+ --color-box-shadow-dark: rgba(77, 77, 77, 0.85);
--color-hyperlink: #000080;
--color-calc-grid: #c0c0c0;
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index f29e310ebb..25bcdd6094 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -509,7 +509,7 @@ algned to the bottom */
.ui-tab.selected.jsdialog {
background-color: var(--color-background-lighter) !important;
color: var(--color-text-darker) !important;
- box-shadow: 0 0 2px 1px var(--color-box-shadow) !important;
+ box-shadow: 0 0 2px 1px var(--color-box-shadow-dark) !important;
}
.ui-tab.jsdialog:not(.selected):hover {
"Nikolaj Fogh (via github)"
Apr 7, 2026, 12:43:16 AMApr 7
to collaboraon...@googlegroups.com
browser/css/btns.css | 1 +
Author: Nikolaj Fogh <nikol...@proton.me>
AuthorDate: Sun Mar 22 22:35:28 2026 +0100
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Tue Apr 7 06:43:00 2026 +0200
Fix viewModeDropdown redering in iOS #15144
Signed-off-by: Nikolaj Fogh <nikol...@proton.me>
Change-Id: I5199d9e2dea7fee905bb09a5e0cef47370ff192b
diff --git a/browser/css/btns.css b/browser/css/btns.css
index c731bb299f..c810542271 100644
--- a/browser/css/btns.css
+++ b/browser/css/btns.css
@@ -56,6 +56,7 @@
border: none;
padding: 4px 8px;
height: var(--btn-size-s);
+ width: fit-content;
}
#viewModeDropdown .arrowbackground {
1 file changed, 1 insertion(+)
New commits:
commit 035e030340badf65086466d2dedf916a3b6ea514
New commits:
Author: Nikolaj Fogh <nikol...@proton.me>
AuthorDate: Sun Mar 22 22:35:28 2026 +0100
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Tue Apr 7 06:43:00 2026 +0200
Fix viewModeDropdown redering in iOS #15144
Signed-off-by: Nikolaj Fogh <nikol...@proton.me>
Change-Id: I5199d9e2dea7fee905bb09a5e0cef47370ff192b
diff --git a/browser/css/btns.css b/browser/css/btns.css
index c731bb299f..c810542271 100644
--- a/browser/css/btns.css
+++ b/browser/css/btns.css
@@ -56,6 +56,7 @@
border: none;
padding: 4px 8px;
height: var(--btn-size-s);
+ width: fit-content;
}
#viewModeDropdown .arrowbackground {
"Andreas-Kainz (via github)"
Apr 14, 2026, 7:47:55 AMApr 14
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 18 ++++--------------
1 file changed, 4 insertions(+), 14 deletions(-)
New commits:
commit d2879a14a03e97bdbdcbc7404f56c3882aa31810
Author: Andreas Kainz <andr...@abwesend.de>
AuthorDate: Tue Apr 7 23:53:05 2026 +0200
Commit: Darshan-Upadhyay <61383886+Darsh...@users.noreply.github.com>
CommitDate: Tue Apr 14 17:17:27 2026 +0530
Dialog size standardization #14786 Help Tab
Signed-off-by: Andreas-Kainz <andr...@abwesend.de>
Change-Id: Ie335d160b53a9d363c02cc872f9d053109c7a436
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 5e804a2f86..32831c3441 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -149,9 +149,10 @@ div#autoFillPreviewTooltip .lokdialog.ui-dialog-content.ui-widget-content {
max-height: calc(100% - 30px);
}
-/* Overwrite .jsdialog-window.modalpopup width */
-#modal-dialog-about-dialog-box {
- max-width: 94%;
+#modal-dialog-about-dialog-box,/* Overwrite .jsdialog-window.modalpopup width */
+#modal-dialog-online-help-content-box,/* help */
+#modal-dialog-keyboard-shortcuts-content-box /* Keyboard shortcuts */ {
+ max-width: 94%; /* Safe guard for when window is too small */
width: 754px;
}
@@ -2780,17 +2781,6 @@ kbd,
width: 450px;
}
-/* help */
-#modal-dialog-online-help-content-box {
- min-width: 75%;
-}
-
-/* Keyboard shortcuts */
-#modal-dialog-keyboard-shortcuts-content-box {
- width: 468px;
- max-width: 95%; /* Safe guard for when window is too small */
-}
-
/* Calc -> Insert -> Pivot Table */
#PivotTableLayout #box2 {
grid-gap: 12px; /* make space for vertical separator */
1 file changed, 4 insertions(+), 14 deletions(-)
New commits:
commit d2879a14a03e97bdbdcbc7404f56c3882aa31810
Author: Andreas Kainz <andr...@abwesend.de>
AuthorDate: Tue Apr 7 23:53:05 2026 +0200
Commit: Darshan-Upadhyay <61383886+Darsh...@users.noreply.github.com>
CommitDate: Tue Apr 14 17:17:27 2026 +0530
Dialog size standardization #14786 Help Tab
Signed-off-by: Andreas-Kainz <andr...@abwesend.de>
Change-Id: Ie335d160b53a9d363c02cc872f9d053109c7a436
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 5e804a2f86..32831c3441 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -149,9 +149,10 @@ div#autoFillPreviewTooltip .lokdialog.ui-dialog-content.ui-widget-content {
max-height: calc(100% - 30px);
}
-/* Overwrite .jsdialog-window.modalpopup width */
-#modal-dialog-about-dialog-box {
- max-width: 94%;
+#modal-dialog-about-dialog-box,/* Overwrite .jsdialog-window.modalpopup width */
+#modal-dialog-online-help-content-box,/* help */
+#modal-dialog-keyboard-shortcuts-content-box /* Keyboard shortcuts */ {
+ max-width: 94%; /* Safe guard for when window is too small */
width: 754px;
}
@@ -2780,17 +2781,6 @@ kbd,
width: 450px;
}
-/* help */
-#modal-dialog-online-help-content-box {
- min-width: 75%;
-}
-
-/* Keyboard shortcuts */
-#modal-dialog-keyboard-shortcuts-content-box {
- width: 468px;
- max-width: 95%; /* Safe guard for when window is too small */
-}
-
/* Calc -> Insert -> Pivot Table */
#PivotTableLayout #box2 {
grid-gap: 12px; /* make space for vertical separator */
"Andreas-Kainz (via github)"
Apr 15, 2026, 2:55:46 AMApr 15
to collaboraon...@googlegroups.com
browser/css/jssidebar.css | 10 ++++++++++
1 file changed, 10 insertions(+)
New commits:
commit b10718a8515dd1058b1cd6b69d198756ee001f28
Author: Andreas Kainz <andr...@abwesend.de>
AuthorDate: Wed Apr 8 21:20:25 2026 +0200
Commit: Darshan-Upadhyay <61383886+Darsh...@users.noreply.github.com>
CommitDate: Wed Apr 15 12:25:37 2026 +0530
Calc Sidebar Number Format vertical alignment
Signed-off-by: Andreas-Kainz <andr...@abwesend.de>
Change-Id: I13bb618aafa31cc772cdd92e7a78d625148f2312
diff --git a/browser/css/jssidebar.css b/browser/css/jssidebar.css
index 4a013071b1..4e71dc5821 100644
--- a/browser/css/jssidebar.css
+++ b/browser/css/jssidebar.css
@@ -175,6 +175,16 @@ div.sidebar.ui-grid .checkbutton.sidebar,
margin: 5px 0 !important;
}
+/* #decimalplaces */
+#NumberFormatPropertyPanel .jsdialog.sidebar.spinfieldcontainer {
+ margin: unset;
+}
+
+/* #numberformatcombobox-input */
+#NumberFormatPropertyPanel .jsdialog.sidebar.ui-listbox-container .ui-listbox {
+ width: 100%;
+ height: 26px;
+}
/* widget width */
1 file changed, 10 insertions(+)
New commits:
commit b10718a8515dd1058b1cd6b69d198756ee001f28
Author: Andreas Kainz <andr...@abwesend.de>
AuthorDate: Wed Apr 8 21:20:25 2026 +0200
Commit: Darshan-Upadhyay <61383886+Darsh...@users.noreply.github.com>
CommitDate: Wed Apr 15 12:25:37 2026 +0530
Calc Sidebar Number Format vertical alignment
Signed-off-by: Andreas-Kainz <andr...@abwesend.de>
Change-Id: I13bb618aafa31cc772cdd92e7a78d625148f2312
diff --git a/browser/css/jssidebar.css b/browser/css/jssidebar.css
index 4a013071b1..4e71dc5821 100644
--- a/browser/css/jssidebar.css
+++ b/browser/css/jssidebar.css
@@ -175,6 +175,16 @@ div.sidebar.ui-grid .checkbutton.sidebar,
margin: 5px 0 !important;
}
+/* #decimalplaces */
+#NumberFormatPropertyPanel .jsdialog.sidebar.spinfieldcontainer {
+ margin: unset;
+}
+
+/* #numberformatcombobox-input */
+#NumberFormatPropertyPanel .jsdialog.sidebar.ui-listbox-container .ui-listbox {
+ width: 100%;
+ height: 26px;
+}
/* widget width */
"Darshan-upadhyay1110 (via github)"
Apr 16, 2026, 2:07:46 AMApr 16
to collaboraon...@googlegroups.com
browser/css/leaflet.css | 18 ++++++++++++++----
1 file changed, 14 insertions(+), 4 deletions(-)
New commits:
commit eec1601c019580cc67b6ce91043880bad61cbf45
Author: Darshan-upadhyay1110 <darshan....@collabora.com>
AuthorDate: Thu Apr 9 17:11:55 2026 +0530
Commit: Darshan-Upadhyay <61383886+Darsh...@users.noreply.github.com>
CommitDate: Thu Apr 16 11:37:26 2026 +0530
Restyle validity input-help tooltip for better visibility
- Use a dashed border, light-yellow background, rounded corners, and a subtle box shadow so the tooltip stands out from spreadsheet cells.
- Switch font sizes to rem units, cap the max-width, and tighten spacing for a cleaner look.
Signed-off-by: Darshan-upadhyay1110 <darshan....@collabora.com>
Change-Id: I2635dd55aa99ca993d98cbf8ea2585de4d85a04e
diff --git a/browser/css/leaflet.css b/browser/css/leaflet.css
index 3969e618b0..dff8f04405 100644
--- a/browser/css/leaflet.css
+++ b/browser/css/leaflet.css
@@ -1027,19 +1027,29 @@ path.leaflet-pane-splitter:hover {
.input-help {
box-sizing: content-box;
border: 1px solid var(--color-border-dark);
+ border-radius: 6px;
color: var(--color-text-dark);
background-color: var(--color-background-dark);
min-width: 200px;
- text-align: center;
+ max-width: 300px;
+ padding: 8px 12px;
+ margin-inline-start: 2px;
+ text-align: left;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.input-help > h4 {
display: block;
- font-weight: 900;
+ font-weight: 600;
+ font-size: 0.8rem;
+ margin: 0 0 4px;
+ color: var(--color-text-darker);
}
.input-help > p {
display: block;
- text-indent: 20px;
- text-align: justify;
+ font-size: 0.75rem;
+ margin: 4px 0 0;
+ text-align: left;
+ color: var(--color-text-dark);
}
1 file changed, 14 insertions(+), 4 deletions(-)
New commits:
commit eec1601c019580cc67b6ce91043880bad61cbf45
Author: Darshan-upadhyay1110 <darshan....@collabora.com>
AuthorDate: Thu Apr 9 17:11:55 2026 +0530
Commit: Darshan-Upadhyay <61383886+Darsh...@users.noreply.github.com>
CommitDate: Thu Apr 16 11:37:26 2026 +0530
Restyle validity input-help tooltip for better visibility
- Use a dashed border, light-yellow background, rounded corners, and a subtle box shadow so the tooltip stands out from spreadsheet cells.
- Switch font sizes to rem units, cap the max-width, and tighten spacing for a cleaner look.
Signed-off-by: Darshan-upadhyay1110 <darshan....@collabora.com>
Change-Id: I2635dd55aa99ca993d98cbf8ea2585de4d85a04e
diff --git a/browser/css/leaflet.css b/browser/css/leaflet.css
index 3969e618b0..dff8f04405 100644
--- a/browser/css/leaflet.css
+++ b/browser/css/leaflet.css
@@ -1027,19 +1027,29 @@ path.leaflet-pane-splitter:hover {
.input-help {
box-sizing: content-box;
border: 1px solid var(--color-border-dark);
+ border-radius: 6px;
color: var(--color-text-dark);
background-color: var(--color-background-dark);
min-width: 200px;
- text-align: center;
+ max-width: 300px;
+ padding: 8px 12px;
+ margin-inline-start: 2px;
+ text-align: left;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.input-help > h4 {
display: block;
- font-weight: 900;
+ font-weight: 600;
+ font-size: 0.8rem;
+ margin: 0 0 4px;
+ color: var(--color-text-darker);
}
.input-help > p {
display: block;
- text-indent: 20px;
- text-align: justify;
+ font-size: 0.75rem;
+ margin: 4px 0 0;
+ text-align: left;
+ color: var(--color-text-dark);
}
"Banobe Pascal (via cogithub)"
Apr 21, 2026, 1:45:21 AMApr 21
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 6 ++++++
1 file changed, 6 insertions(+)
New commits:
commit 5fdd5f3cdc6a9102245e9d6ad42c6a76d3e3b604
1 file changed, 6 insertions(+)
New commits:
Author: Banobe Pascal <banobe...@collabora.com>
AuthorDate: Tue Apr 21 06:23:02 2026 +0300
Commit: Szymon Kłos <eszk...@gmail.com>
CommitDate: Tue Apr 21 07:44:50 2026 +0200
jsdialog: hover style for comment menu and context menu entries
- Fixed low visibility of hover state in context and comment menus
- Used an attribute selector [id^="comment-menu-"][id$="-entries"]
to match every comment menu dropdown instead of a single id,
since each comment generates its own suffix
Signed-off-by: Banobe Pascal <banobe...@collabora.com>
Change-Id: Iddbf946a3a69a8146b088cf3ae277c20bfedff7d
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 1ee63d87f8..368e7a6b1e 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -1450,6 +1450,12 @@ img.context-menu-icon {
background-color: var(--color-background-hover);
}
+[id^='comment-menu-'][id$='-entries'] .ui-combobox-entry:hover,
+#jsd-context-menu-entries .ui-combobox-entry:hover {
+ background-color: var(--color-background-darker) !important;
+ color: var(--color-text-darker) !important;
+}
+
.ui-combobox-entry.selected:not(:hover) span,
.margin-item.selected {
background-color: var(--color-background-darker);
"Raul-Ionut Nastasie (via cogithub)"
Apr 21, 2026, 9:42:50 AMApr 21
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 22 +++++++++++++++-------
1 file changed, 15 insertions(+), 7 deletions(-)
New commits:
commit 8a54c0542207a46ea403bcc942af2e61dfb32c48
Author: Raul-Ionut Nastasie <raul-ionu...@collabora.com>
AuthorDate: Thu Mar 26 22:39:25 2026 +0100
Commit: Darshan-Upadhyay <61383886+Darsh...@users.noreply.github.com>
CommitDate: Tue Apr 21 19:12:04 2026 +0530
Added aria tags and keyboard navigation to page size dialog in calc
Signed-off-by: Raul-Ionut Nastasie <raul-ionu...@collabora.com>
Change-Id: I319ecbe4b01cd369c7cdfb0861b0ae34a737890b
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 35a3b555cb..feaa00fe15 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -490,33 +490,41 @@ algned to the bottom */
line-height: normal !important;
color: dimgray !important;
color: var(--color-text-dark) !important;
- height: 24px !important;
+ height: var(--header-height) !important;
display: flex !important;
align-items: center !important;
justify-content: center;
padding: 0px 1em !important;
border: solid 1px transparent !important;
border-radius: var(--border-radius) !important;
- background-color: var(--color-main-background) !important;
margin-inline-end: 12px !important;
- margin-bottom: 6px;
+ background-color: transparent !important;
+ margin-block: 0 4px;
}
.ui-tab.hidden.jsdialog {
visibility: hidden !important;
}
+[data-theme='dark'] .ui-tab.selected.jsdialog {
+ color: var(--color-main-text) !important;
+}
+
.ui-toggle.checked button,
.ui-tab.selected.jsdialog {
background-color: var(--color-background-lighter) !important;
- color: var(--color-text-darker) !important;
- box-shadow: 0 0 2px 1px var(--color-box-shadow-dark) !important;
+ color: rgba(var(--doc-type), 1) !important;
+ text-decoration: underline 2px solid rgba(var(--doc-type), 1);
+ text-underline-offset: 6px;
+}
+
+body button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):not(.notebookbar.ui-tab):not(.ui-expander-btn):not(.arrowbackground):not(.ui-combobox-button):not(.inserttable-grid .col):not(.spinfieldbutton-up):not(.spinfieldbutton-down):hover {
+ color: rgba(var(--doc-type), 1) !important;
+ background-color: var(--color-background-darker) !important;
}
.ui-tab.jsdialog:not(.selected):hover {
cursor: pointer !important;
- background-color: var(--color-background-darker) !important;
- color: var(--color-text-darker) !important;
}
/* Sub Tabs: example Format Cells: Font */
1 file changed, 15 insertions(+), 7 deletions(-)
New commits:
commit 8a54c0542207a46ea403bcc942af2e61dfb32c48
Author: Raul-Ionut Nastasie <raul-ionu...@collabora.com>
AuthorDate: Thu Mar 26 22:39:25 2026 +0100
Commit: Darshan-Upadhyay <61383886+Darsh...@users.noreply.github.com>
CommitDate: Tue Apr 21 19:12:04 2026 +0530
Added aria tags and keyboard navigation to page size dialog in calc
Signed-off-by: Raul-Ionut Nastasie <raul-ionu...@collabora.com>
Change-Id: I319ecbe4b01cd369c7cdfb0861b0ae34a737890b
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 35a3b555cb..feaa00fe15 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -490,33 +490,41 @@ algned to the bottom */
line-height: normal !important;
color: dimgray !important;
color: var(--color-text-dark) !important;
- height: 24px !important;
+ height: var(--header-height) !important;
display: flex !important;
align-items: center !important;
justify-content: center;
padding: 0px 1em !important;
border: solid 1px transparent !important;
border-radius: var(--border-radius) !important;
- background-color: var(--color-main-background) !important;
margin-inline-end: 12px !important;
- margin-bottom: 6px;
+ background-color: transparent !important;
+ margin-block: 0 4px;
}
.ui-tab.hidden.jsdialog {
visibility: hidden !important;
}
+[data-theme='dark'] .ui-tab.selected.jsdialog {
+ color: var(--color-main-text) !important;
+}
+
.ui-toggle.checked button,
.ui-tab.selected.jsdialog {
background-color: var(--color-background-lighter) !important;
- color: var(--color-text-darker) !important;
- box-shadow: 0 0 2px 1px var(--color-box-shadow-dark) !important;
+ color: rgba(var(--doc-type), 1) !important;
+ text-decoration: underline 2px solid rgba(var(--doc-type), 1);
+ text-underline-offset: 6px;
+}
+
+body button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):not(.notebookbar.ui-tab):not(.ui-expander-btn):not(.arrowbackground):not(.ui-combobox-button):not(.inserttable-grid .col):not(.spinfieldbutton-up):not(.spinfieldbutton-down):hover {
+ color: rgba(var(--doc-type), 1) !important;
+ background-color: var(--color-background-darker) !important;
}
.ui-tab.jsdialog:not(.selected):hover {
cursor: pointer !important;
- background-color: var(--color-background-darker) !important;
- color: var(--color-text-darker) !important;
}
/* Sub Tabs: example Format Cells: Font */
"Gökay Şatır (via cogithub)"
Apr 21, 2026, 10:22:26 AMApr 21
to collaboraon...@googlegroups.com
browser/css/leaflet.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
New commits:
commit 01517ccbabc67665a22b5683ebcc1ed54c17979e
Author: Gökay Şatır <gokay...@collabora.com>
AuthorDate: Mon Apr 20 11:19:47 2026 +0300
Commit: Gökay Şatır <gokay...@gmail.com>
CommitDate: Tue Apr 21 17:21:43 2026 +0300
Cursor background color: Fetch it from variable.
Issue: Cursor doesn't blink while scrolling the document or moving the cursor rapidly. This is a feature. But in dark mode, constant color was black.
This makes cursor hidden instead of making it always visible.
Fix: Make the background dynamic like the blink CSS class uses it.
Signed-off-by: Gökay Şatır <gokay...@collabora.com>
Change-Id: I92d089eee0c290e8a87a4a188b266015c3927370
diff --git a/browser/css/leaflet.css b/browser/css/leaflet.css
index 8a2975a5a4..3b732e90a2 100644
--- a/browser/css/leaflet.css
+++ b/browser/css/leaflet.css
@@ -560,7 +560,7 @@ a.leaflet-control-buttons:hover:first-child {
}
.leaflet-cursor {
- background: black;
+ background: var(--color-cursor-blink-background);
width: 2px;
pointer-events: none;
}
1 file changed, 1 insertion(+), 1 deletion(-)
New commits:
commit 01517ccbabc67665a22b5683ebcc1ed54c17979e
Author: Gökay Şatır <gokay...@collabora.com>
AuthorDate: Mon Apr 20 11:19:47 2026 +0300
Commit: Gökay Şatır <gokay...@gmail.com>
CommitDate: Tue Apr 21 17:21:43 2026 +0300
Cursor background color: Fetch it from variable.
Issue: Cursor doesn't blink while scrolling the document or moving the cursor rapidly. This is a feature. But in dark mode, constant color was black.
This makes cursor hidden instead of making it always visible.
Fix: Make the background dynamic like the blink CSS class uses it.
Signed-off-by: Gökay Şatır <gokay...@collabora.com>
Change-Id: I92d089eee0c290e8a87a4a188b266015c3927370
diff --git a/browser/css/leaflet.css b/browser/css/leaflet.css
index 8a2975a5a4..3b732e90a2 100644
--- a/browser/css/leaflet.css
+++ b/browser/css/leaflet.css
@@ -560,7 +560,7 @@ a.leaflet-control-buttons:hover:first-child {
}
.leaflet-cursor {
- background: black;
+ background: var(--color-cursor-blink-background);
width: 2px;
pointer-events: none;
}
"Sahil Gautam (via cogithub)"
Apr 23, 2026, 12:30:15 AMApr 23
to collaboraon...@googlegroups.com
browser/css/notebookbar.css | 1 +
Author: Sahil Gautam <sahil....@collabora.com>
AuthorDate: Thu Apr 23 03:45:11 2026 +0530
Commit: Szymon Kłos <eszk...@gmail.com>
CommitDate: Thu Apr 23 06:29:08 2026 +0200
css: use a text color variable for the 'Open Styles Sidebar' button
Signed-off-by: Sahil Gautam <sahil....@collabora.com>
Change-Id: Ib0d363902fc165cd6dff7a18a6b882a580af43a6
diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
index eff7336537..a0316562f8 100644
--- a/browser/css/notebookbar.css
+++ b/browser/css/notebookbar.css
@@ -663,6 +663,7 @@ label.notebookbar.ui-checkbox-label {
width: 100%;
position: relative;
justify-content: start;
+ color: var(--color-main-text);
}
#stylesview-dropdown hr {
1 file changed, 1 insertion(+)
New commits:
commit ac58809b2e59927dcb9977c54a31d3c7c1d497b3
New commits:
Author: Sahil Gautam <sahil....@collabora.com>
AuthorDate: Thu Apr 23 03:45:11 2026 +0530
Commit: Szymon Kłos <eszk...@gmail.com>
CommitDate: Thu Apr 23 06:29:08 2026 +0200
css: use a text color variable for the 'Open Styles Sidebar' button
Signed-off-by: Sahil Gautam <sahil....@collabora.com>
Change-Id: Ib0d363902fc165cd6dff7a18a6b882a580af43a6
diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
index eff7336537..a0316562f8 100644
--- a/browser/css/notebookbar.css
+++ b/browser/css/notebookbar.css
@@ -663,6 +663,7 @@ label.notebookbar.ui-checkbox-label {
width: 100%;
position: relative;
justify-content: start;
+ color: var(--color-main-text);
}
#stylesview-dropdown hr {
"Samuel Mehrbrodt (via cogerrit)"
Apr 23, 2026, 9:01:25 AMApr 23
to collaboraon...@googlegroups.com
browser/css/leaflet.css | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
New commits:
commit b3062b491491cf5fe4303f48d6539cf47c5adbb4
Author: Samuel Mehrbrodt <samuel.m...@collabora.com>
AuthorDate: Mon Mar 30 10:33:53 2026 +0200
Commit: Samuel Mehrbrodt <samuel.m...@collabora.com>
CommitDate: Thu Apr 23 13:01:18 2026 +0000
Revert "Use LO branding colors for loading progress bar"
This reverts commit 43f09f284ca9be50913a3799c0c98137a1fdf42c.
Signed-off-by: Samuel Mehrbrodt <samuel.m...@collabora.com>
Change-Id: I894f42fd6906d3b7eab06ddabb2a2961f82fa88e
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1424
Reviewed-by: Stephan Bergmann <stephan....@collabora.com>
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
diff --git a/browser/css/leaflet.css b/browser/css/leaflet.css
index 3b732e90a221..cf3fbd772264 100644
--- a/browser/css/leaflet.css
+++ b/browser/css/leaflet.css
@@ -752,14 +752,14 @@ input.clipboard {
margin: 0 -1px;
height: 100%;
text-align: right;
- background: #18A303;
+ background: #5c3dcc;
border: 1px solid;
- border-color: #106802;
+ border-color: #4422bf #5435c4;
border-radius: 10px;
- background-image: -webkit-linear-gradient(top, #92E285, #43C330 70%, #18A303);
- background-image: -moz-linear-gradient(top, #92E285, #43C330 70%, #18A303);
- background-image: -o-linear-gradient(top, #92E285, #43C330 70%, #18A303);
- background-image: linear-gradient(to bottom, #92E285, #43C330 70%, #18A303);
+ background-image: -webkit-linear-gradient(top, #745dc6, #6549cc 70%, #5c3dcc);
+ background-image: -moz-linear-gradient(top, #745dc6, #6549cc 70%, #5c3dcc);
+ background-image: -o-linear-gradient(top, #745dc6, #6549cc 70%, #5c3dcc);
+ background-image: linear-gradient(to bottom, #745dc6, #6549cc 70%, #5c3dcc);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
1 file changed, 6 insertions(+), 6 deletions(-)
New commits:
commit b3062b491491cf5fe4303f48d6539cf47c5adbb4
Author: Samuel Mehrbrodt <samuel.m...@collabora.com>
AuthorDate: Mon Mar 30 10:33:53 2026 +0200
Commit: Samuel Mehrbrodt <samuel.m...@collabora.com>
CommitDate: Thu Apr 23 13:01:18 2026 +0000
Revert "Use LO branding colors for loading progress bar"
This reverts commit 43f09f284ca9be50913a3799c0c98137a1fdf42c.
Signed-off-by: Samuel Mehrbrodt <samuel.m...@collabora.com>
Change-Id: I894f42fd6906d3b7eab06ddabb2a2961f82fa88e
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1424
Reviewed-by: Stephan Bergmann <stephan....@collabora.com>
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
diff --git a/browser/css/leaflet.css b/browser/css/leaflet.css
index 3b732e90a221..cf3fbd772264 100644
--- a/browser/css/leaflet.css
+++ b/browser/css/leaflet.css
@@ -752,14 +752,14 @@ input.clipboard {
margin: 0 -1px;
height: 100%;
text-align: right;
- background: #18A303;
+ background: #5c3dcc;
border: 1px solid;
- border-color: #106802;
+ border-color: #4422bf #5435c4;
border-radius: 10px;
- background-image: -webkit-linear-gradient(top, #92E285, #43C330 70%, #18A303);
- background-image: -moz-linear-gradient(top, #92E285, #43C330 70%, #18A303);
- background-image: -o-linear-gradient(top, #92E285, #43C330 70%, #18A303);
- background-image: linear-gradient(to bottom, #92E285, #43C330 70%, #18A303);
+ background-image: -webkit-linear-gradient(top, #745dc6, #6549cc 70%, #5c3dcc);
+ background-image: -moz-linear-gradient(top, #745dc6, #6549cc 70%, #5c3dcc);
+ background-image: -o-linear-gradient(top, #745dc6, #6549cc 70%, #5c3dcc);
+ background-image: linear-gradient(to bottom, #745dc6, #6549cc 70%, #5c3dcc);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
"Andras Timar (via cogerrit)"
Apr 24, 2026, 11:44:40 AMApr 24
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 5 +++++
Author: Andras Timar <andras...@collabora.com>
AuthorDate: Fri Apr 24 17:38:10 2026 +0200
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Fri Apr 24 17:38:10 2026 +0200
ServerAuditDialog: fix status icon overlapping description text
The ui-treeview-rowheader class, introduced for the Chart Data Table
dialog, sets min-width: 3em (48px) and a dark background. It is
applied automatically to the first column of any treeview with
role='grid', including ServerAuditDialog. In that dialog the first
column is sized to var(--btn-img-size-m) (18px) in the grid template,
so the 48px min-width caused the icon cell to overflow rightward and
visually overlap the Status description text in the second column.
Override min-width and background for ServerAuditDialog's rowheader
so the icon stays within its 18px grid track. ChartDataDialog's
row labels are unaffected.
Signed-off-by: Andras Timar <andras...@collabora.com>
Change-Id: If03344ca156f62b3bb4207d4d609f384b70b4acc
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index cbe5a40ee923..f315e4d02a6b 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -790,6 +790,11 @@ body button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-f
white-space: normal;
}
+#ServerAuditDialog .ui-treeview-entry .ui-treeview-rowheader {
+ min-width: 0;
display: grid;
}
1 file changed, 5 insertions(+)
New commits:
commit 239890999381068012a3dadc4a87b79fe06e2287
New commits:
Author: Andras Timar <andras...@collabora.com>
AuthorDate: Fri Apr 24 17:38:10 2026 +0200
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Fri Apr 24 17:38:10 2026 +0200
ServerAuditDialog: fix status icon overlapping description text
The ui-treeview-rowheader class, introduced for the Chart Data Table
dialog, sets min-width: 3em (48px) and a dark background. It is
applied automatically to the first column of any treeview with
role='grid', including ServerAuditDialog. In that dialog the first
column is sized to var(--btn-img-size-m) (18px) in the grid template,
so the 48px min-width caused the icon cell to overflow rightward and
visually overlap the Status description text in the second column.
Override min-width and background for ServerAuditDialog's rowheader
so the icon stays within its 18px grid track. ChartDataDialog's
row labels are unaffected.
Signed-off-by: Andras Timar <andras...@collabora.com>
Change-Id: If03344ca156f62b3bb4207d4d609f384b70b4acc
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index cbe5a40ee923..f315e4d02a6b 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -790,6 +790,11 @@ body button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-f
white-space: normal;
}
+#ServerAuditDialog .ui-treeview-entry .ui-treeview-rowheader {
+ min-width: 0;
+ background-color: transparent;
+}
+
.ui-treeview-expanded-content {
+}
+
display: grid;
}
"Caolán McNamara (via cogerrit)"
Apr 26, 2026, 8:29:32 AMApr 26
to collaboraon...@googlegroups.com
browser/css/menubar.css | 12 ++++++++++++
1 file changed, 12 insertions(+)
New commits:
commit 9ff964d38e1835de02bd2bb0d48f403b953832fb
Author: Caolán McNamara <caolan....@collabora.com>
AuthorDate: Sat Apr 25 10:13:29 2026 +0000
Commit: Caolán McNamara <caolan....@collabora.com>
CommitDate: Sun Apr 26 12:28:35 2026 +0000
name document title/name label appear beside editbox
and tweak the font to use the same shrink behaviour as the tab labels do
for narrower window sizes
Signed-off-by: Caolán McNamara <caolan....@collabora.com>
Change-Id: I1ad1b6883625f889ed4859ce2d6a1eb1371736aa
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1636
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
diff --git a/browser/css/menubar.css b/browser/css/menubar.css
index a2a1bab2d631..053875d0ec42 100644
--- a/browser/css/menubar.css
+++ b/browser/css/menubar.css
@@ -65,9 +65,21 @@
overflow: visible;
position: static;
width: auto;
+ flex: 0 0 auto;
+ font-size: var(--default-font-size);
color: var(--color-text-lighter);
}
+.main-nav.hasnotebookbar .document-title:focus-within > label[for='document-name-input'] {
+ font-size: clamp(var(--tb-min-fs), var(--tb-fs-s), var(--tb-max-fs));
+}
+
+.document-title:focus-within > #document-name-input.editable {
+ width: auto !important;
+ min-width: 0;
+ flex: 1 1 auto;
+}
+
.readonly .document-title {
justify-content: flex-end;
}
1 file changed, 12 insertions(+)
New commits:
commit 9ff964d38e1835de02bd2bb0d48f403b953832fb
Author: Caolán McNamara <caolan....@collabora.com>
AuthorDate: Sat Apr 25 10:13:29 2026 +0000
Commit: Caolán McNamara <caolan....@collabora.com>
CommitDate: Sun Apr 26 12:28:35 2026 +0000
name document title/name label appear beside editbox
and tweak the font to use the same shrink behaviour as the tab labels do
for narrower window sizes
Signed-off-by: Caolán McNamara <caolan....@collabora.com>
Change-Id: I1ad1b6883625f889ed4859ce2d6a1eb1371736aa
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1636
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
diff --git a/browser/css/menubar.css b/browser/css/menubar.css
index a2a1bab2d631..053875d0ec42 100644
--- a/browser/css/menubar.css
+++ b/browser/css/menubar.css
@@ -65,9 +65,21 @@
overflow: visible;
position: static;
width: auto;
+ flex: 0 0 auto;
+ font-size: var(--default-font-size);
color: var(--color-text-lighter);
}
+.main-nav.hasnotebookbar .document-title:focus-within > label[for='document-name-input'] {
+ font-size: clamp(var(--tb-min-fs), var(--tb-fs-s), var(--tb-max-fs));
+}
+
+.document-title:focus-within > #document-name-input.editable {
+ width: auto !important;
+ min-width: 0;
+ flex: 1 1 auto;
+}
+
.readonly .document-title {
justify-content: flex-end;
}
"Mike Kaganski (via cogerrit)"
Apr 30, 2026, 7:50:47 AMApr 30
to collaboraon...@googlegroups.com
browser/css/cool.css | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
New commits:
commit e4d574c9417c1e616ebba06497b0a7d24a364c07
Author: Mike Kaganski <mike.k...@collabora.com>
AuthorDate: Wed Apr 29 19:04:32 2026 +0500
Commit: Miklos Vajna <vmi...@collabora.com>
CommitDate: Thu Apr 30 11:50:11 2026 +0000
PDF comments: address review comments in anchor-area sub-section
Two small fixes from gerrit review of commit
3673c9029f4e7a4ceb705dd75a7d4d8d82f651a5 (PDF comments: drag a
rectangle to anchor a comment over an area, 2026-04-29):
- .annotation-anchor-area: drop the #0078d4 fallback after
var(--color-primary). The rest of the codebase uses
var(--color-primary) without a fallback (btns.css, helpdialog.css,
settings.css, backstage.css), so this one was inconsistent.
- .annotation-anchor-area background: derive the tinted fill from
--color-primary via color-mix(in srgb, var(--color-primary) 8%,
transparent) instead of the hardcoded rgba(0, 120, 212, 0.08), so
the tint follows the brand colour automatically.
Signed-off-by: Mike Kaganski <mike.k...@collabora.com>
Change-Id: If37a3871aae6bafed6f92a66f0f7937a0d8b019e
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1823
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Miklos Vajna <vmi...@collabora.com>
diff --git a/browser/css/cool.css b/browser/css/cool.css
index 3436f31dabf1..06ea6dce83fc 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -546,8 +546,8 @@ body {
.annotation-anchor-area {
margin-left: 0px;
margin-top: 0px;
- border: 1px solid var(--color-primary, #0078d4);
- background: rgba(0, 120, 212, 0.08);
+ border: 1px solid var(--color-primary);
+ background: color-mix(in srgb, var(--color-primary) 8%, transparent);
box-sizing: border-box;
}
1 file changed, 2 insertions(+), 2 deletions(-)
New commits:
commit e4d574c9417c1e616ebba06497b0a7d24a364c07
Author: Mike Kaganski <mike.k...@collabora.com>
AuthorDate: Wed Apr 29 19:04:32 2026 +0500
Commit: Miklos Vajna <vmi...@collabora.com>
CommitDate: Thu Apr 30 11:50:11 2026 +0000
PDF comments: address review comments in anchor-area sub-section
Two small fixes from gerrit review of commit
3673c9029f4e7a4ceb705dd75a7d4d8d82f651a5 (PDF comments: drag a
rectangle to anchor a comment over an area, 2026-04-29):
- .annotation-anchor-area: drop the #0078d4 fallback after
var(--color-primary). The rest of the codebase uses
var(--color-primary) without a fallback (btns.css, helpdialog.css,
settings.css, backstage.css), so this one was inconsistent.
- .annotation-anchor-area background: derive the tinted fill from
--color-primary via color-mix(in srgb, var(--color-primary) 8%,
transparent) instead of the hardcoded rgba(0, 120, 212, 0.08), so
the tint follows the brand colour automatically.
Signed-off-by: Mike Kaganski <mike.k...@collabora.com>
Change-Id: If37a3871aae6bafed6f92a66f0f7937a0d8b019e
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1823
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Miklos Vajna <vmi...@collabora.com>
diff --git a/browser/css/cool.css b/browser/css/cool.css
index 3436f31dabf1..06ea6dce83fc 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -546,8 +546,8 @@ body {
.annotation-anchor-area {
margin-left: 0px;
margin-top: 0px;
- border: 1px solid var(--color-primary, #0078d4);
- background: rgba(0, 120, 212, 0.08);
+ border: 1px solid var(--color-primary);
+ background: color-mix(in srgb, var(--color-primary) 8%, transparent);
box-sizing: border-box;
}
"Samuel Mehrbrodt (via cogerrit)"
May 1, 2026, 9:33:01 AMMay 1
to collaboraon...@googlegroups.com
browser/css/aichat-sidebar.css | 16 ++++++------
browser/css/backstage.css | 24 +++++++++---------
browser/css/cool.css | 13 +++++++--
browser/css/device-mobile.css | 2 -
browser/css/jsdialogs.css | 54 ++++++++++++++++++++---------------------
browser/css/jssidebar.css | 16 ++++++------
browser/css/menubar.css | 4 +--
browser/css/notebookbar.css | 8 +++---
browser/css/spreadsheet.css | 2 -
browser/css/toolbar.css | 22 ++++++++--------
10 files changed, 84 insertions(+), 77 deletions(-)
New commits:
commit 3d7db87ee9511d52483192aad190c90612c97a45
Author: Samuel Mehrbrodt <samuel.m...@collabora.com>
AuthorDate: Wed Apr 29 16:45:58 2026 +0200
Commit: Pedro Pinto Silva <pedro...@collabora.com>
CommitDate: Fri May 1 13:32:16 2026 +0000
Add & use variables for spacing instead of hardcoding them
Change-Id: I9d86fbeb3301179de7db59fdd3aa07e7fb5cf681
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1846
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Pedro Silva <pedro...@collabora.com>
diff --git a/browser/css/aichat-sidebar.css b/browser/css/aichat-sidebar.css
index a0e03a6e8c4f..e152b71102c8 100644
--- a/browser/css/aichat-sidebar.css
+++ b/browser/css/aichat-sidebar.css
@@ -99,7 +99,7 @@
}
#aichat-header button.ui-pushbutton {
- padding: 4px;
+ padding: var(--spacing-s);
width: 28px;
height: 28px;
border: 1px solid transparent;
@@ -136,7 +136,7 @@
display: flex !important;
grid-auto-flow: unset !important;
flex-direction: column;
- gap: 12px;
+ gap: var(--spacing-l);
scrollbar-width: var(--scrollbar-width);
scrollbar-color: var(--scrollbar-color);
user-select: text;
@@ -160,7 +160,7 @@
display: flex !important;
grid-auto-flow: unset !important;
flex-direction: column;
- gap: 12px;
+ gap: var(--spacing-l);
}
#aichat-messages-list:has(#aichat-empty-state) {
@@ -351,7 +351,7 @@
#aichat-loading-dots {
display: flex;
align-items: center;
- gap: 2px;
+ gap: var(--spacing-xs);
padding: 12px 16px;
align-self: flex-start;
background: var(--color-background-lighter);
@@ -419,7 +419,7 @@
display: flex;
align-items: center;
justify-content: center;
- gap: 4px;
+ gap: var(--spacing-s);
font-size: 11px;
font-family: var(--cool-font);
color: var(--color-text-lighter);
@@ -738,7 +738,7 @@
.aichat-approval-buttons {
display: flex;
- gap: 8px;
+ gap: var(--spacing-m);
margin-top: 2px;
}
@@ -860,7 +860,7 @@
width: 100%;
display: flex;
align-items: center;
- gap: 8px;
+ gap: var(--spacing-m);
text-align: left;
padding: 11px 14px;
border: 1px solid var(--color-border);
@@ -913,7 +913,7 @@
transition: background 0.15s ease;
display: inline-flex;
align-items: center;
- gap: 4px;
+ gap: var(--spacing-s);
}
#aichat-chips > #aichat-see-more > button.ui-pushbutton:hover {
diff --git a/browser/css/backstage.css b/browser/css/backstage.css
index 79e36bb5accb..200efcc8a634 100644
--- a/browser/css/backstage.css
+++ b/browser/css/backstage.css
@@ -43,7 +43,7 @@
color: var(--color-on-primary);
display: inline-flex;
align-items: center;
- gap: 4px;
+ gap: var(--spacing-s);
}
.backstage-header-title::before {
@@ -125,7 +125,7 @@
display: flex;
flex-direction: column;
flex: 1;
- gap: 4px;
+ gap: var(--spacing-s);
min-height: 0;
margin-bottom: 30px;
}
@@ -194,7 +194,7 @@
align-items: center;
justify-content: center;
padding: 12px 8px;
- gap: 8px;
+ gap: var(--spacing-m);
}
@@ -299,7 +299,7 @@
display: flex;
flex-direction: column;
align-items: flex-start;
- gap: 16px;
+ gap: var(--spacing-xl);
margin-top: 32px;
padding: 24px;
border: 1px dashed var(--color-border);
@@ -310,11 +310,11 @@
.backstage-templates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
- gap: 16px;
+ gap: var(--spacing-xl);
}
.backstage-template-card {
- padding: 12px;
+ padding: var(--spacing-l);
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
@@ -369,12 +369,12 @@
.backstage-template-explorer {
display: flex;
flex-direction: column;
- gap: 12px;
+ gap: var(--spacing-l);
}
.template-filter-bar {
display: flex;
- gap: 8px;
+ gap: var(--spacing-m);
flex-wrap: wrap;
}
@@ -419,7 +419,7 @@
.template-featured-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
- gap: 16px;
+ gap: var(--spacing-xl);
overflow-x: auto;
padding-bottom: 8px;
}
@@ -440,7 +440,7 @@
.backstage-formats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
- gap: 12px;
+ gap: var(--spacing-l);
margin-top: 20px;
}
@@ -457,7 +457,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
- gap: 8px;
+ gap: var(--spacing-m);
}
.backstage-format-card:hover {
@@ -612,7 +612,7 @@
.backstage-recent-document-text-wrapper {
display: flex;
flex-direction: column;
- gap: 4px;
+ gap: var(--spacing-s);
flex: 1;
min-width: 0;
}
diff --git a/browser/css/cool.css b/browser/css/cool.css
index 06ea6dce83fc..e00010a24ece 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -22,6 +22,13 @@
--border-radius: 4px; /* buttons, widgets */
--border-radius-large: 10px; /* dialog */
+ /* Spacing scale for gap/padding/margin */
+ --spacing-xs: 2px;
+ --spacing-s: 4px;
+ --spacing-m: 8px;
+ --spacing-l: 12px;
+ --spacing-xl: 16px;
+
--tooltip-font-size: 0.875rem;
--default-font-size: 0.75rem;
--overflow-group-font-size: 8.5pt; /* do not scale labels of groups */
@@ -673,7 +680,7 @@ body {
width: auto;
display: flex;
flex-direction: column;
- row-gap: 8px;
+ row-gap: var(--spacing-m);
}
.annotation-active.annotation-pop-up .cool-annotation-content-wrapper {
@@ -801,7 +808,7 @@ body {
background-color: var(--color-background-dark);
color: var(--color-main-text);
overflow-x: hidden;
- padding: 2px;
+ padding: var(--spacing-xs);
max-height: var(--annotation-input-size);
min-height: calc(var(--default-font-size) * 4);
width: 100%;
@@ -982,7 +989,7 @@ body {
display: flex;
justify-content: flex-end;
align-items: center;
- column-gap: 4px;
+ column-gap: var(--spacing-s);
cursor: pointer;
padding: 0 !important;
}
diff --git a/browser/css/device-mobile.css b/browser/css/device-mobile.css
index 99a40f18da12..7e291475b82a 100644
--- a/browser/css/device-mobile.css
+++ b/browser/css/device-mobile.css
@@ -617,7 +617,7 @@ div#fontstyletoolbox + div#style.mobile-wizard {
}
#product-name {
- margin: 2px;
+ margin: var(--spacing-xs);
font-size: 29px;
}
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index f315e4d02a6b..f4e5823f8088 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -64,7 +64,7 @@ div.ui-treeview-icon-column {
#AcceptRejectChangesDialog #RedlineViewPage.jsdialog.ui-grid-cell {
display: flex;
flex-direction: column;
- gap: 8px;
+ gap: var(--spacing-m);
}
#AcceptRejectChangesDialog #RedlineFilterPage .ui-timefield {
margin: 5px;
@@ -222,7 +222,7 @@ div#autoFillPreviewTooltip .lokdialog.ui-dialog-content.ui-widget-content {
color: var(--color-main-text);
font-size: var(--header-font-size);
line-height: var(--header-height);
- margin: 4px;
+ margin: var(--spacing-s);
}
#accessibilityCheckBox .jsdialog.ui-text {
@@ -277,13 +277,13 @@ td.jsdialog > [id^='table-box']:not(.sidebar) {
border-spacing: 0px;
width: 100%;
display: grid;
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
}
/* Special Characters dialog */
#SpecialCharactersDialog #viewgrid,
#SpecialCharactersDialog #favgrid {
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
width: fit-content;
}
@@ -653,7 +653,7 @@ body button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-f
}
.ui-expander-content > .root-container.jsdialog {
- margin: 4px;
+ margin: var(--spacing-s);
}
/* Link Button*/
@@ -1444,7 +1444,7 @@ img.context-menu-icon {
top: 0;
z-index: 1;
background-color: var(--color-background-lighter);
- padding: 4px;
+ padding: var(--spacing-s);
}
.ui-combobox-search-input {
@@ -1620,8 +1620,8 @@ img.context-menu-icon {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
max-height: 40vh;
- gap: 2px;
- padding: 2px;
+ gap: var(--spacing-xs);
+ padding: var(--spacing-xs);
}
.ui-iconview.mobile-wizard {
@@ -1689,7 +1689,7 @@ img.context-menu-icon {
.autofilter.cell {
display: table-cell;
vertical-align: middle;
- padding: 2px;
+ padding: var(--spacing-xs);
}
.autofilter-container {
@@ -1739,7 +1739,7 @@ img.context-menu-icon {
/* Same size as #toggle_all.checkbutton > input */
height: 18px;
width: 18px;
- margin: 8px;
+ margin: var(--spacing-m);
border: none;
}
@@ -2052,27 +2052,27 @@ button.has-img img {
/* color picker */
.ui-color-picker {
- padding: 4px;
+ padding: var(--spacing-s);
}
.ui-color-picker-header {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
- gap: 8px;
+ gap: var(--spacing-m);
}
.ui-color-picker,
#ui-color-picker-custom,
#ui-color-picker-recent {
display: grid;
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
align-items: center;
}
.ui-color-picker-palette {
display: grid;
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
margin-top: 3px;
}
@@ -2216,7 +2216,7 @@ button.has-img img {
.snackbar #snackbar-container-progress {
align-items: center;
max-width: calc(80vw);
- row-gap: 4px;
+ row-gap: var(--spacing-s);
}
.snackbar .ui-progressbar progress {
@@ -2273,7 +2273,7 @@ button.has-img img {
}
.snackbar.jsdialog-container [id$='button'].ui-pushbutton.jsdialog {
- padding: 8px;
+ padding: var(--spacing-m);
}
#snackbar-container-progress .ui-progressbar {
@@ -2287,7 +2287,7 @@ button.has-img img {
}
#mobile-wizard.popup.snackbar [id$='button'] {
- padding: 8px;
+ padding: var(--spacing-m);
}
#mobile-wizard.popup.snackbar [id$='button'],
@@ -2445,7 +2445,7 @@ button.has-img img {
.ui-custom-textarea-cursor-layer,
.ui-custom-textarea-handle-layer,
.ui-custom-textarea-text-layer {
- padding: 4px;
+ padding: var(--spacing-s);
grid-column: 1;
grid-row: 1;
white-space: pre-wrap;
@@ -2483,7 +2483,7 @@ button.has-img img {
display: grid;
grid-auto-flow: column;
align-items: center;
- grid-column-gap: 4px;
+ grid-column-gap: var(--spacing-s);
grid-template-columns: repeat(3, 30px);
}
@@ -2601,7 +2601,7 @@ button.has-img img {
#FormulaDialog #StructPage {
display: grid;
grid-template-rows: auto 1fr;
- grid-row-gap: 4px;
+ grid-row-gap: var(--spacing-s);
}
#FormulaDialog #StructPage .ui-treeview-entry div {
background-color: transparent;
@@ -2619,7 +2619,7 @@ button.has-img img {
#FormulaDialog > [id^='dialog-vbox'] > [id^='box'] > [id^='box'] {
grid-auto-columns: max-content;
- grid-column-gap: 8px;
+ grid-column-gap: var(--spacing-m);
}
#FormulaDialog label {
@@ -2690,7 +2690,7 @@ kbd,
font-family: monospace;
font-size: .85em;
line-height: 1;
- padding: 4px;
+ padding: var(--spacing-s);
white-space: nowrap;
}
@@ -2827,7 +2827,7 @@ kbd,
/* Calc -> Insert -> Pivot Table */
#PivotTableLayout #box2 {
- grid-gap: 12px; /* make space for vertical separator */
+ grid-gap: var(--spacing-l); /* make space for vertical separator */
}
/* Modal info with 2 line message*/
@@ -2845,7 +2845,7 @@ kbd,
#DocumentPropertiesDialog #properties > .jsdialog.ui-grid > .ui-grid-cell > .ui-grid-cell {
align-items: center;
- grid-column-gap: 4px;
+ grid-column-gap: var(--spacing-s);
}
#DocumentPropertiesDialog #customprops button {
@@ -2883,7 +2883,7 @@ kbd,
#ServerAuditDialog #ServerAuditDialog-mainbox label {
display: flex;
align-items: center;
- gap: 4px;
+ gap: var(--spacing-s);
color: #000;
border-radius: 30px;
width: fit-content;
@@ -2957,7 +2957,7 @@ kbd,
/* Writer - Format - Page Style - Area - Image */
#ImageTabPage #frame1 .ui-grid-cell {
display: grid;
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
}
/* Calc - Format - Format Cells - Background - Color */
@@ -3289,7 +3289,7 @@ div [id^='themeview'].ui-iconview-entry, div [id^='themeview1col'].ui-iconview-e
height: 100%;
box-sizing: border-box;
font: inherit;
- padding: 2px;
+ padding: var(--spacing-xs);
margin: 0;
border: 1px solid var(--color-primary, #005da0);
border-radius: 2px;
diff --git a/browser/css/jssidebar.css b/browser/css/jssidebar.css
index 4e71dc5821b4..1d7e14348600 100644
--- a/browser/css/jssidebar.css
+++ b/browser/css/jssidebar.css
@@ -31,7 +31,7 @@ img.sidebar.ui-image {
}
.sidebar.ui-grid {
- row-gap: 8px;
+ row-gap: var(--spacing-m);
}
.sidebar .ui-content .unobutton {
@@ -96,7 +96,7 @@ img.sidebar.ui-image {
width: 10px;
height: 10px;
padding: 0;
- margin: 4px;
+ margin: var(--spacing-s);
}
.ui-expander-icon-right.jsdialog.sidebar .ui-overflow-group-more.unotoolbutton,
@@ -130,7 +130,7 @@ img.sidebar.ui-image {
#ParaPropertyPanel.sidebar.ui-grid #box1.sidebar.ui-grid-cell,
#NumberFormatPropertyPanel.sidebar.ui-grid #grid1 {
justify-content: space-between !important;
- row-gap: 8px;
+ row-gap: var(--spacing-m);
grid-auto-flow: revert !important;
grid-template-columns: repeat(2, auto);
}
@@ -262,7 +262,7 @@ div.sidebar.ui-grid .checkbutton.sidebar,
#ParaPropertyPanel.sidebar #box3 {
display: grid;
justify-content: start;
- row-gap: 4px;
+ row-gap: var(--spacing-s);
}
#ParaPropertyPanel .sidebar.ui-grid-cell {
@@ -279,7 +279,7 @@ div.sidebar.ui-grid .checkbutton.sidebar,
button#button2.ui-pushbutton.jsdialog.sidebar {
width: 151px;
- padding: 4px;
+ padding: var(--spacing-s);
position: relative;
left: -10px;
}
@@ -474,7 +474,7 @@ span.jsdialog.sidebar.ui-treeview-notexpandable {
.navigator-btn-wrapper {
background-color: var(--color-background-lighter);
border-radius: var(--border-radius);
- padding: 4px;
+ padding: var(--spacing-s);
box-shadow: 0px 1px 3px var(--color-box-shadow);
}
@@ -512,12 +512,12 @@ span.jsdialog.sidebar.ui-treeview-notexpandable {
font-family: var(--cool-font);
color: var(--color-main-text);
height: 54px;
- padding: 16px;
+ padding: var(--spacing-xl);
box-sizing: border-box;
}
.navigator-container .ui-treeview-placeholder {
- padding: 16px;
+ padding: var(--spacing-xl);
}
.close-navigation-wrapper {
diff --git a/browser/css/menubar.css b/browser/css/menubar.css
index 053875d0ec42..275e427725da 100644
--- a/browser/css/menubar.css
+++ b/browser/css/menubar.css
@@ -47,7 +47,7 @@
flex-direction: row;
flex-wrap: wrap;
flex: 1 1 auto;
- gap: 4px;
+ gap: var(--spacing-s);
position: relative;
}
@@ -250,7 +250,7 @@ nav.hasnotebookbar [id^='save'].saved::after {
}
.lo-menu > li > a, .lo-menu > li > a.has-submenu {
- padding: 8px;
+ padding: var(--spacing-m);
z-index: 400;
border: 1px solid transparent;
}
diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
index a0316562f889..c38f7501de6e 100644
--- a/browser/css/notebookbar.css
+++ b/browser/css/notebookbar.css
@@ -205,7 +205,7 @@ html[data-theme='dark'] .savemodified.unotoolbutton:not(.notebookbar) .unobutton
.hasnotebookbar .notebookbar-shortcuts-bar #Menubar > li > a {
cursor: pointer;
border: none;
- padding: 4px;
+ padding: var(--spacing-s);
}
.hasnotebookbar #shortcuts-menubar-icon {
@@ -256,7 +256,7 @@ html[data-theme='dark'] .savemodified.unotoolbutton:not(.notebookbar) .unobutton
width: max-content;
display: grid;
grid-auto-flow: row;
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
}
.notebookbar.ui-separator.vertical {
@@ -270,7 +270,7 @@ html[data-theme='dark'] .savemodified.unotoolbutton:not(.notebookbar) .unobutton
.horizontal.notebookbar {
display: grid;
grid-auto-flow: column;
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
align-items: center;
justify-items: center;
width: max-content;
@@ -392,7 +392,7 @@ label.notebookbar.ui-checkbox-label {
#table-HomeTab .unospan-uptoolbar img, #table-HomeTab .unospan-downtoolbar img {
width: 18px !important;
height: 18px !important;
- padding: 4px;
+ padding: var(--spacing-s);
}
.unotoolbutton.notebookbar.disabled:not(.unospan-shortcutstoolbox),
diff --git a/browser/css/spreadsheet.css b/browser/css/spreadsheet.css
index a40ff38b9bbe..eabcfe3d3dd3 100644
--- a/browser/css/spreadsheet.css
+++ b/browser/css/spreadsheet.css
@@ -332,7 +332,7 @@
display: grid;
grid-template-columns: 120px auto;
align-items: center;
- padding: 4px;
+ padding: var(--spacing-s);
background-color: var(--color-main-background);
border-top: 1px solid var(--color-border);
}
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index b08904732c2d..fc35b9ebee83 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -30,7 +30,7 @@
.margin-item {
display: flex;
align-items: center;
- padding: 8px;
+ padding: var(--spacing-m);
cursor: pointer;
border-radius: 3px;
border: 1px solid transparent;
@@ -74,7 +74,7 @@
.custom-margins-link {
justify-content: center;
- padding: 4px;
+ padding: var(--spacing-s);
font-size: var(--default-font-size);
}
@@ -134,7 +134,7 @@
border: 1px solid var(--color-toolbar-border);
align-items: center;
border-radius: 4px;
- padding: 4px;
+ padding: var(--spacing-s);
box-shadow: 0 2px 6px 2px rgba(60, 64, 67, .15);
}
@@ -512,7 +512,7 @@ button.leaflet-control-search-next
border-radius: var(--border-radius);
box-sizing: border-box;
position: relative;
- padding: 2px;
+ padding: var(--spacing-xs);
overflow: auto; /* child margins otherwise don't expand *this* element (parent) */
}
@@ -1387,7 +1387,7 @@ button.leaflet-control-search-next
.inserttable-grid {
box-sizing: border-box;
position: relative;
- padding: 2px;
+ padding: var(--spacing-xs);
display: block;
}
@@ -1399,7 +1399,7 @@ button.leaflet-control-search-next
.inserttable-grid .col {
height: 100%;
float: left;
- padding: 2px;
+ padding: var(--spacing-xs);
width: 20px;
border: 1px;
border-style: solid;
@@ -1417,7 +1417,7 @@ button.leaflet-control-search-next
.insertshape-grid {
box-sizing: border-box;
position: static;
- padding: 2px;
+ padding: var(--spacing-xs);
display: block;
min-width: 350px;
width: 100%;
@@ -1445,7 +1445,7 @@ button.leaflet-control-search-next
.insertshape-grid .col {
height: 30px;
- padding: 2px;
+ padding: var(--spacing-xs);
width: 30px;
border: 1px solid transparent;
}
@@ -1561,7 +1561,7 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
#followingChipBackground,
#userListSummaryBackground {
border-radius: var(--btn-img-size); /* We expect the height to be --btn-img-size, give a bit for a border. To fully round the corners, this needs to be at least 50% of the height so --btn-img-size should do */
- padding: 2px; /* This will become the grey border around the inner elements */
+ padding: var(--spacing-xs); /* This will become the grey border around the inner elements */
display: none;
}
@@ -1681,7 +1681,7 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
}
#follow-editor {
- padding: 8px;
+ padding: var(--spacing-m);
display: flex;
align-items: center;
}
@@ -1765,7 +1765,7 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
display: flex;
justify-content: center;
align-items: center;
- padding: 8px;
+ padding: var(--spacing-m);
cursor: pointer;
border-radius: 3px;
border: 1px solid transparent;
browser/css/backstage.css | 24 +++++++++---------
browser/css/cool.css | 13 +++++++--
browser/css/device-mobile.css | 2 -
browser/css/jsdialogs.css | 54 ++++++++++++++++++++---------------------
browser/css/jssidebar.css | 16 ++++++------
browser/css/menubar.css | 4 +--
browser/css/notebookbar.css | 8 +++---
browser/css/spreadsheet.css | 2 -
browser/css/toolbar.css | 22 ++++++++--------
10 files changed, 84 insertions(+), 77 deletions(-)
New commits:
commit 3d7db87ee9511d52483192aad190c90612c97a45
Author: Samuel Mehrbrodt <samuel.m...@collabora.com>
AuthorDate: Wed Apr 29 16:45:58 2026 +0200
Commit: Pedro Pinto Silva <pedro...@collabora.com>
CommitDate: Fri May 1 13:32:16 2026 +0000
Add & use variables for spacing instead of hardcoding them
Change-Id: I9d86fbeb3301179de7db59fdd3aa07e7fb5cf681
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1846
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Pedro Silva <pedro...@collabora.com>
diff --git a/browser/css/aichat-sidebar.css b/browser/css/aichat-sidebar.css
index a0e03a6e8c4f..e152b71102c8 100644
--- a/browser/css/aichat-sidebar.css
+++ b/browser/css/aichat-sidebar.css
@@ -99,7 +99,7 @@
}
#aichat-header button.ui-pushbutton {
- padding: 4px;
+ padding: var(--spacing-s);
width: 28px;
height: 28px;
border: 1px solid transparent;
@@ -136,7 +136,7 @@
display: flex !important;
grid-auto-flow: unset !important;
flex-direction: column;
- gap: 12px;
+ gap: var(--spacing-l);
scrollbar-width: var(--scrollbar-width);
scrollbar-color: var(--scrollbar-color);
user-select: text;
@@ -160,7 +160,7 @@
display: flex !important;
grid-auto-flow: unset !important;
flex-direction: column;
- gap: 12px;
+ gap: var(--spacing-l);
}
#aichat-messages-list:has(#aichat-empty-state) {
@@ -351,7 +351,7 @@
#aichat-loading-dots {
display: flex;
align-items: center;
- gap: 2px;
+ gap: var(--spacing-xs);
padding: 12px 16px;
align-self: flex-start;
background: var(--color-background-lighter);
@@ -419,7 +419,7 @@
display: flex;
align-items: center;
justify-content: center;
- gap: 4px;
+ gap: var(--spacing-s);
font-size: 11px;
font-family: var(--cool-font);
color: var(--color-text-lighter);
@@ -738,7 +738,7 @@
.aichat-approval-buttons {
display: flex;
- gap: 8px;
+ gap: var(--spacing-m);
margin-top: 2px;
}
@@ -860,7 +860,7 @@
width: 100%;
display: flex;
align-items: center;
- gap: 8px;
+ gap: var(--spacing-m);
text-align: left;
padding: 11px 14px;
border: 1px solid var(--color-border);
@@ -913,7 +913,7 @@
transition: background 0.15s ease;
display: inline-flex;
align-items: center;
- gap: 4px;
+ gap: var(--spacing-s);
}
#aichat-chips > #aichat-see-more > button.ui-pushbutton:hover {
diff --git a/browser/css/backstage.css b/browser/css/backstage.css
index 79e36bb5accb..200efcc8a634 100644
--- a/browser/css/backstage.css
+++ b/browser/css/backstage.css
@@ -43,7 +43,7 @@
color: var(--color-on-primary);
display: inline-flex;
align-items: center;
- gap: 4px;
+ gap: var(--spacing-s);
}
.backstage-header-title::before {
@@ -125,7 +125,7 @@
display: flex;
flex-direction: column;
flex: 1;
- gap: 4px;
+ gap: var(--spacing-s);
min-height: 0;
margin-bottom: 30px;
}
@@ -194,7 +194,7 @@
align-items: center;
justify-content: center;
padding: 12px 8px;
- gap: 8px;
+ gap: var(--spacing-m);
}
@@ -299,7 +299,7 @@
display: flex;
flex-direction: column;
align-items: flex-start;
- gap: 16px;
+ gap: var(--spacing-xl);
margin-top: 32px;
padding: 24px;
border: 1px dashed var(--color-border);
@@ -310,11 +310,11 @@
.backstage-templates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
- gap: 16px;
+ gap: var(--spacing-xl);
}
.backstage-template-card {
- padding: 12px;
+ padding: var(--spacing-l);
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
@@ -369,12 +369,12 @@
.backstage-template-explorer {
display: flex;
flex-direction: column;
- gap: 12px;
+ gap: var(--spacing-l);
}
.template-filter-bar {
display: flex;
- gap: 8px;
+ gap: var(--spacing-m);
flex-wrap: wrap;
}
@@ -419,7 +419,7 @@
.template-featured-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
- gap: 16px;
+ gap: var(--spacing-xl);
overflow-x: auto;
padding-bottom: 8px;
}
@@ -440,7 +440,7 @@
.backstage-formats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
- gap: 12px;
+ gap: var(--spacing-l);
margin-top: 20px;
}
@@ -457,7 +457,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
- gap: 8px;
+ gap: var(--spacing-m);
}
.backstage-format-card:hover {
@@ -612,7 +612,7 @@
.backstage-recent-document-text-wrapper {
display: flex;
flex-direction: column;
- gap: 4px;
+ gap: var(--spacing-s);
flex: 1;
min-width: 0;
}
diff --git a/browser/css/cool.css b/browser/css/cool.css
index 06ea6dce83fc..e00010a24ece 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -22,6 +22,13 @@
--border-radius: 4px; /* buttons, widgets */
--border-radius-large: 10px; /* dialog */
+ /* Spacing scale for gap/padding/margin */
+ --spacing-xs: 2px;
+ --spacing-s: 4px;
+ --spacing-m: 8px;
+ --spacing-l: 12px;
+ --spacing-xl: 16px;
+
--tooltip-font-size: 0.875rem;
--default-font-size: 0.75rem;
--overflow-group-font-size: 8.5pt; /* do not scale labels of groups */
@@ -673,7 +680,7 @@ body {
width: auto;
display: flex;
flex-direction: column;
- row-gap: 8px;
+ row-gap: var(--spacing-m);
}
.annotation-active.annotation-pop-up .cool-annotation-content-wrapper {
@@ -801,7 +808,7 @@ body {
background-color: var(--color-background-dark);
color: var(--color-main-text);
overflow-x: hidden;
- padding: 2px;
+ padding: var(--spacing-xs);
max-height: var(--annotation-input-size);
min-height: calc(var(--default-font-size) * 4);
width: 100%;
@@ -982,7 +989,7 @@ body {
display: flex;
justify-content: flex-end;
align-items: center;
- column-gap: 4px;
+ column-gap: var(--spacing-s);
cursor: pointer;
padding: 0 !important;
}
diff --git a/browser/css/device-mobile.css b/browser/css/device-mobile.css
index 99a40f18da12..7e291475b82a 100644
--- a/browser/css/device-mobile.css
+++ b/browser/css/device-mobile.css
@@ -617,7 +617,7 @@ div#fontstyletoolbox + div#style.mobile-wizard {
}
#product-name {
- margin: 2px;
+ margin: var(--spacing-xs);
font-size: 29px;
}
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index f315e4d02a6b..f4e5823f8088 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -64,7 +64,7 @@ div.ui-treeview-icon-column {
#AcceptRejectChangesDialog #RedlineViewPage.jsdialog.ui-grid-cell {
display: flex;
flex-direction: column;
- gap: 8px;
+ gap: var(--spacing-m);
}
#AcceptRejectChangesDialog #RedlineFilterPage .ui-timefield {
margin: 5px;
@@ -222,7 +222,7 @@ div#autoFillPreviewTooltip .lokdialog.ui-dialog-content.ui-widget-content {
color: var(--color-main-text);
font-size: var(--header-font-size);
line-height: var(--header-height);
- margin: 4px;
+ margin: var(--spacing-s);
}
#accessibilityCheckBox .jsdialog.ui-text {
@@ -277,13 +277,13 @@ td.jsdialog > [id^='table-box']:not(.sidebar) {
border-spacing: 0px;
width: 100%;
display: grid;
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
}
/* Special Characters dialog */
#SpecialCharactersDialog #viewgrid,
#SpecialCharactersDialog #favgrid {
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
width: fit-content;
}
@@ -653,7 +653,7 @@ body button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-f
}
.ui-expander-content > .root-container.jsdialog {
- margin: 4px;
+ margin: var(--spacing-s);
}
/* Link Button*/
@@ -1444,7 +1444,7 @@ img.context-menu-icon {
top: 0;
z-index: 1;
background-color: var(--color-background-lighter);
- padding: 4px;
+ padding: var(--spacing-s);
}
.ui-combobox-search-input {
@@ -1620,8 +1620,8 @@ img.context-menu-icon {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
max-height: 40vh;
- gap: 2px;
- padding: 2px;
+ gap: var(--spacing-xs);
+ padding: var(--spacing-xs);
}
.ui-iconview.mobile-wizard {
@@ -1689,7 +1689,7 @@ img.context-menu-icon {
.autofilter.cell {
display: table-cell;
vertical-align: middle;
- padding: 2px;
+ padding: var(--spacing-xs);
}
.autofilter-container {
@@ -1739,7 +1739,7 @@ img.context-menu-icon {
/* Same size as #toggle_all.checkbutton > input */
height: 18px;
width: 18px;
- margin: 8px;
+ margin: var(--spacing-m);
border: none;
}
@@ -2052,27 +2052,27 @@ button.has-img img {
/* color picker */
.ui-color-picker {
- padding: 4px;
+ padding: var(--spacing-s);
}
.ui-color-picker-header {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
- gap: 8px;
+ gap: var(--spacing-m);
}
.ui-color-picker,
#ui-color-picker-custom,
#ui-color-picker-recent {
display: grid;
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
align-items: center;
}
.ui-color-picker-palette {
display: grid;
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
margin-top: 3px;
}
@@ -2216,7 +2216,7 @@ button.has-img img {
.snackbar #snackbar-container-progress {
align-items: center;
max-width: calc(80vw);
- row-gap: 4px;
+ row-gap: var(--spacing-s);
}
.snackbar .ui-progressbar progress {
@@ -2273,7 +2273,7 @@ button.has-img img {
}
.snackbar.jsdialog-container [id$='button'].ui-pushbutton.jsdialog {
- padding: 8px;
+ padding: var(--spacing-m);
}
#snackbar-container-progress .ui-progressbar {
@@ -2287,7 +2287,7 @@ button.has-img img {
}
#mobile-wizard.popup.snackbar [id$='button'] {
- padding: 8px;
+ padding: var(--spacing-m);
}
#mobile-wizard.popup.snackbar [id$='button'],
@@ -2445,7 +2445,7 @@ button.has-img img {
.ui-custom-textarea-cursor-layer,
.ui-custom-textarea-handle-layer,
.ui-custom-textarea-text-layer {
- padding: 4px;
+ padding: var(--spacing-s);
grid-column: 1;
grid-row: 1;
white-space: pre-wrap;
@@ -2483,7 +2483,7 @@ button.has-img img {
display: grid;
grid-auto-flow: column;
align-items: center;
- grid-column-gap: 4px;
+ grid-column-gap: var(--spacing-s);
grid-template-columns: repeat(3, 30px);
}
@@ -2601,7 +2601,7 @@ button.has-img img {
#FormulaDialog #StructPage {
display: grid;
grid-template-rows: auto 1fr;
- grid-row-gap: 4px;
+ grid-row-gap: var(--spacing-s);
}
#FormulaDialog #StructPage .ui-treeview-entry div {
background-color: transparent;
@@ -2619,7 +2619,7 @@ button.has-img img {
#FormulaDialog > [id^='dialog-vbox'] > [id^='box'] > [id^='box'] {
grid-auto-columns: max-content;
- grid-column-gap: 8px;
+ grid-column-gap: var(--spacing-m);
}
#FormulaDialog label {
@@ -2690,7 +2690,7 @@ kbd,
font-family: monospace;
font-size: .85em;
line-height: 1;
- padding: 4px;
+ padding: var(--spacing-s);
white-space: nowrap;
}
@@ -2827,7 +2827,7 @@ kbd,
/* Calc -> Insert -> Pivot Table */
#PivotTableLayout #box2 {
+ grid-gap: var(--spacing-l); /* make space for vertical separator */
}
/* Modal info with 2 line message*/
@@ -2845,7 +2845,7 @@ kbd,
#DocumentPropertiesDialog #properties > .jsdialog.ui-grid > .ui-grid-cell > .ui-grid-cell {
align-items: center;
- grid-column-gap: 4px;
+ grid-column-gap: var(--spacing-s);
}
#DocumentPropertiesDialog #customprops button {
@@ -2883,7 +2883,7 @@ kbd,
#ServerAuditDialog #ServerAuditDialog-mainbox label {
display: flex;
align-items: center;
- gap: 4px;
+ gap: var(--spacing-s);
color: #000;
border-radius: 30px;
width: fit-content;
@@ -2957,7 +2957,7 @@ kbd,
/* Writer - Format - Page Style - Area - Image */
#ImageTabPage #frame1 .ui-grid-cell {
display: grid;
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
}
/* Calc - Format - Format Cells - Background - Color */
@@ -3289,7 +3289,7 @@ div [id^='themeview'].ui-iconview-entry, div [id^='themeview1col'].ui-iconview-e
height: 100%;
box-sizing: border-box;
font: inherit;
- padding: 2px;
+ padding: var(--spacing-xs);
margin: 0;
border: 1px solid var(--color-primary, #005da0);
border-radius: 2px;
diff --git a/browser/css/jssidebar.css b/browser/css/jssidebar.css
index 4e71dc5821b4..1d7e14348600 100644
--- a/browser/css/jssidebar.css
+++ b/browser/css/jssidebar.css
@@ -31,7 +31,7 @@ img.sidebar.ui-image {
}
.sidebar.ui-grid {
- row-gap: 8px;
+ row-gap: var(--spacing-m);
}
.sidebar .ui-content .unobutton {
@@ -96,7 +96,7 @@ img.sidebar.ui-image {
width: 10px;
height: 10px;
padding: 0;
- margin: 4px;
+ margin: var(--spacing-s);
}
.ui-expander-icon-right.jsdialog.sidebar .ui-overflow-group-more.unotoolbutton,
@@ -130,7 +130,7 @@ img.sidebar.ui-image {
#ParaPropertyPanel.sidebar.ui-grid #box1.sidebar.ui-grid-cell,
#NumberFormatPropertyPanel.sidebar.ui-grid #grid1 {
justify-content: space-between !important;
- row-gap: 8px;
+ row-gap: var(--spacing-m);
grid-auto-flow: revert !important;
grid-template-columns: repeat(2, auto);
}
@@ -262,7 +262,7 @@ div.sidebar.ui-grid .checkbutton.sidebar,
#ParaPropertyPanel.sidebar #box3 {
display: grid;
justify-content: start;
- row-gap: 4px;
+ row-gap: var(--spacing-s);
}
#ParaPropertyPanel .sidebar.ui-grid-cell {
@@ -279,7 +279,7 @@ div.sidebar.ui-grid .checkbutton.sidebar,
button#button2.ui-pushbutton.jsdialog.sidebar {
width: 151px;
- padding: 4px;
+ padding: var(--spacing-s);
position: relative;
left: -10px;
}
@@ -474,7 +474,7 @@ span.jsdialog.sidebar.ui-treeview-notexpandable {
.navigator-btn-wrapper {
background-color: var(--color-background-lighter);
border-radius: var(--border-radius);
- padding: 4px;
+ padding: var(--spacing-s);
box-shadow: 0px 1px 3px var(--color-box-shadow);
}
@@ -512,12 +512,12 @@ span.jsdialog.sidebar.ui-treeview-notexpandable {
font-family: var(--cool-font);
color: var(--color-main-text);
height: 54px;
- padding: 16px;
+ padding: var(--spacing-xl);
box-sizing: border-box;
}
.navigator-container .ui-treeview-placeholder {
- padding: 16px;
+ padding: var(--spacing-xl);
}
.close-navigation-wrapper {
diff --git a/browser/css/menubar.css b/browser/css/menubar.css
index 053875d0ec42..275e427725da 100644
--- a/browser/css/menubar.css
+++ b/browser/css/menubar.css
@@ -47,7 +47,7 @@
flex-direction: row;
flex-wrap: wrap;
flex: 1 1 auto;
- gap: 4px;
+ gap: var(--spacing-s);
position: relative;
}
@@ -250,7 +250,7 @@ nav.hasnotebookbar [id^='save'].saved::after {
}
.lo-menu > li > a, .lo-menu > li > a.has-submenu {
- padding: 8px;
+ padding: var(--spacing-m);
z-index: 400;
border: 1px solid transparent;
}
diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
index a0316562f889..c38f7501de6e 100644
--- a/browser/css/notebookbar.css
+++ b/browser/css/notebookbar.css
@@ -205,7 +205,7 @@ html[data-theme='dark'] .savemodified.unotoolbutton:not(.notebookbar) .unobutton
.hasnotebookbar .notebookbar-shortcuts-bar #Menubar > li > a {
cursor: pointer;
border: none;
- padding: 4px;
+ padding: var(--spacing-s);
}
.hasnotebookbar #shortcuts-menubar-icon {
@@ -256,7 +256,7 @@ html[data-theme='dark'] .savemodified.unotoolbutton:not(.notebookbar) .unobutton
width: max-content;
display: grid;
grid-auto-flow: row;
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
}
.notebookbar.ui-separator.vertical {
@@ -270,7 +270,7 @@ html[data-theme='dark'] .savemodified.unotoolbutton:not(.notebookbar) .unobutton
.horizontal.notebookbar {
display: grid;
grid-auto-flow: column;
- grid-gap: 4px;
+ grid-gap: var(--spacing-s);
align-items: center;
justify-items: center;
width: max-content;
@@ -392,7 +392,7 @@ label.notebookbar.ui-checkbox-label {
#table-HomeTab .unospan-uptoolbar img, #table-HomeTab .unospan-downtoolbar img {
width: 18px !important;
height: 18px !important;
- padding: 4px;
+ padding: var(--spacing-s);
}
.unotoolbutton.notebookbar.disabled:not(.unospan-shortcutstoolbox),
diff --git a/browser/css/spreadsheet.css b/browser/css/spreadsheet.css
index a40ff38b9bbe..eabcfe3d3dd3 100644
--- a/browser/css/spreadsheet.css
+++ b/browser/css/spreadsheet.css
@@ -332,7 +332,7 @@
display: grid;
grid-template-columns: 120px auto;
align-items: center;
- padding: 4px;
+ padding: var(--spacing-s);
background-color: var(--color-main-background);
border-top: 1px solid var(--color-border);
}
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index b08904732c2d..fc35b9ebee83 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -30,7 +30,7 @@
.margin-item {
display: flex;
align-items: center;
- padding: 8px;
+ padding: var(--spacing-m);
cursor: pointer;
border-radius: 3px;
border: 1px solid transparent;
@@ -74,7 +74,7 @@
.custom-margins-link {
justify-content: center;
- padding: 4px;
+ padding: var(--spacing-s);
font-size: var(--default-font-size);
}
@@ -134,7 +134,7 @@
border: 1px solid var(--color-toolbar-border);
align-items: center;
border-radius: 4px;
- padding: 4px;
+ padding: var(--spacing-s);
box-shadow: 0 2px 6px 2px rgba(60, 64, 67, .15);
}
@@ -512,7 +512,7 @@ button.leaflet-control-search-next
border-radius: var(--border-radius);
box-sizing: border-box;
position: relative;
- padding: 2px;
+ padding: var(--spacing-xs);
overflow: auto; /* child margins otherwise don't expand *this* element (parent) */
}
@@ -1387,7 +1387,7 @@ button.leaflet-control-search-next
.inserttable-grid {
box-sizing: border-box;
position: relative;
- padding: 2px;
+ padding: var(--spacing-xs);
display: block;
}
@@ -1399,7 +1399,7 @@ button.leaflet-control-search-next
.inserttable-grid .col {
height: 100%;
float: left;
- padding: 2px;
+ padding: var(--spacing-xs);
width: 20px;
border: 1px;
border-style: solid;
@@ -1417,7 +1417,7 @@ button.leaflet-control-search-next
.insertshape-grid {
box-sizing: border-box;
position: static;
- padding: 2px;
+ padding: var(--spacing-xs);
display: block;
min-width: 350px;
width: 100%;
@@ -1445,7 +1445,7 @@ button.leaflet-control-search-next
.insertshape-grid .col {
height: 30px;
- padding: 2px;
+ padding: var(--spacing-xs);
width: 30px;
border: 1px solid transparent;
}
@@ -1561,7 +1561,7 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
#followingChipBackground,
#userListSummaryBackground {
border-radius: var(--btn-img-size); /* We expect the height to be --btn-img-size, give a bit for a border. To fully round the corners, this needs to be at least 50% of the height so --btn-img-size should do */
- padding: 2px; /* This will become the grey border around the inner elements */
+ padding: var(--spacing-xs); /* This will become the grey border around the inner elements */
display: none;
}
@@ -1681,7 +1681,7 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
}
#follow-editor {
- padding: 8px;
+ padding: var(--spacing-m);
display: flex;
align-items: center;
}
@@ -1765,7 +1765,7 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
display: flex;
justify-content: center;
align-items: center;
- padding: 8px;
+ padding: var(--spacing-m);
cursor: pointer;
border-radius: 3px;
border: 1px solid transparent;
"Gülşah Köse (via cogerrit)"
May 5, 2026, 10:47:47 AMMay 5
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 10 ++++++++++
Author: Gülşah Köse <gulsa...@collabora.com>
AuthorDate: Thu Apr 23 10:26:31 2026 +0300
Commit: Gülşah Köse <gulsa...@collabora.com>
CommitDate: Tue May 5 14:46:59 2026 +0000
Fix dark mode issue of the Position and Size dialog
Base point, connector lines and rotation angle was white in dark mode.
The commit fix the dark mode issue of this elements.
Signed-off-by: Gülşah Köse <gulsa...@collabora.com>
Change-Id: I918419547ea92fcb255da89add6e5644d0b2c41b
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1984
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Gökay ŞATIR <gokay...@collabora.com>
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index f4e5823f8088..1b4f817bea4a 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2390,6 +2390,16 @@ button.has-img img {
filter: invert(.9)
}
+/* Position and Size dialog - drawing area images */
+[data-theme='dark'] #CTL_POSRECT img.ui-drawing-area,
+[data-theme='dark'] #CTL_SIZERECT img.ui-drawing-area,
+[data-theme='dark'] #CTL_RECT img.ui-drawing-area,
+[data-theme='dark'] #CTL_ANGLE img.ui-drawing-area,
+[data-theme='dark'] #daRatioTop img.ui-drawing-area,
+[data-theme='dark'] #daRatioBottom img.ui-drawing-area {
+ filter: invert(.95)
+}
+
/* scrollable content */
.ui-scrollable-content {
overflow-x: scroll;
1 file changed, 10 insertions(+)
New commits:
commit e2eac26a3e859a13e99b4ed804c2171b16cf0ed5
New commits:
Author: Gülşah Köse <gulsa...@collabora.com>
AuthorDate: Thu Apr 23 10:26:31 2026 +0300
Commit: Gülşah Köse <gulsa...@collabora.com>
CommitDate: Tue May 5 14:46:59 2026 +0000
Fix dark mode issue of the Position and Size dialog
Base point, connector lines and rotation angle was white in dark mode.
The commit fix the dark mode issue of this elements.
Signed-off-by: Gülşah Köse <gulsa...@collabora.com>
Change-Id: I918419547ea92fcb255da89add6e5644d0b2c41b
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1984
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Gökay ŞATIR <gokay...@collabora.com>
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index f4e5823f8088..1b4f817bea4a 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2390,6 +2390,16 @@ button.has-img img {
filter: invert(.9)
}
+/* Position and Size dialog - drawing area images */
+[data-theme='dark'] #CTL_POSRECT img.ui-drawing-area,
+[data-theme='dark'] #CTL_SIZERECT img.ui-drawing-area,
+[data-theme='dark'] #CTL_RECT img.ui-drawing-area,
+[data-theme='dark'] #CTL_ANGLE img.ui-drawing-area,
+[data-theme='dark'] #daRatioTop img.ui-drawing-area,
+[data-theme='dark'] #daRatioBottom img.ui-drawing-area {
+ filter: invert(.95)
+}
+
/* scrollable content */
.ui-scrollable-content {
overflow-x: scroll;
"Sarper Akdemir (via cogerrit)"
May 6, 2026, 1:11:06 AMMay 6
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 26 +++++++++++++-------------
1 file changed, 13 insertions(+), 13 deletions(-)
New commits:
commit 41ca961910dc85b51930d5eff07e45bd951ff262
Author: Sarper Akdemir <sarper....@collabora.com>
AuthorDate: Fri Apr 24 14:21:39 2026 +0200
Commit: Szymon Kłos <szymo...@collabora.com>
CommitDate: Wed May 6 05:10:24 2026 +0000
jsdialog: match Area > Color rules by id prefix
Engine's JSInstanceBuilder::RememberWidget() suffixes widget ids when
a tab page is re-instantiated (ColorPage0, iconview_colors1,
rgbpreset7, ...), so clicking the inner Color fill-type tab dropped
the palette to the generic 3-column grid and shrunk the preset/
custom input groups.
Signed-off-by: Sarper Akdemir <sarper....@collabora.com>
Change-Id: I0540d77d658151d1ebfdf9246e55c08b7d049ac6
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1594
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Szymon Kłos <szymo...@collabora.com>
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 1b4f817bea4a..9a4e2168fee1 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2973,34 +2973,34 @@ kbd,
-#ColorPage.jsdialog :is(#iconview_colors, #iconview_recent_colors).ui-iconview,
-:is(#colorwindow_iv_colors, #colorwindow_iv_recentcolors).ui-iconview {
+[id^='ColorPage'].jsdialog :is([id^='iconview_colors'], [id^='iconview_recent_colors']).ui-iconview,
+:is([id^='colorwindow_iv_colors'], [id^='colorwindow_iv_recentcolors']).ui-iconview {
grid-template-columns: repeat(12, 1fr);
width: max-content;
line-height: 0;
padding: 5px;
}
-#ColorPage.jsdialog #iconview_colors.ui-iconview,
-#colorwindow_iv_colors.ui-iconview {
+[id^='ColorPage'].jsdialog [id^='iconview_colors'].ui-iconview,
+[id^='colorwindow_iv_colors'].ui-iconview {
max-height: 19vh;
}
-#ColorPage.jsdialog :is(#iconview_colors, #iconview_recent_colors).ui-iconview .ui-iconview-entry :is(img, span),
-:is(#colorwindow_iv_colors, #colorwindow_iv_recentcolors) .ui-iconview-entry img {
+[id^='ColorPage'].jsdialog :is([id^='iconview_colors'], [id^='iconview_recent_colors']).ui-iconview .ui-iconview-entry :is(img, span),
+:is([id^='colorwindow_iv_colors'], [id^='colorwindow_iv_recentcolors']) .ui-iconview-entry img {
padding: 1px;
}
-#ColorPage.jsdialog :is(#iconview_colors, #iconview_recent_colors).ui-iconview .ui-iconview-entry:is(:hover, .selected),
-:is(#colorwindow_iv_colors, #colorwindow_iv_recentcolors) .ui-iconview-entry:is(:hover, .selected) {
+[id^='ColorPage'].jsdialog :is([id^='iconview_colors'], [id^='iconview_recent_colors']).ui-iconview .ui-iconview-entry:is(:hover, .selected),
+:is([id^='colorwindow_iv_colors'], [id^='colorwindow_iv_recentcolors']) .ui-iconview-entry:is(:hover, .selected) {
outline: 2px solid var(--color-primary);
border: 1px solid transparent;
background-color: transparent;
border-radius: 0;
}
-#ColorPage.jsdialog :is(#iconview_colors, #iconview_recent_colors).ui-iconview .ui-iconview-entry span,
-:is(#colorwindow_iv_colors, #colorwindow_iv_recentcolors) .ui-iconview-entry span {
+[id^='ColorPage'].jsdialog :is([id^='iconview_colors'], [id^='iconview_recent_colors']).ui-iconview .ui-iconview-entry span,
+:is([id^='colorwindow_iv_colors'], [id^='colorwindow_iv_recentcolors']) .ui-iconview-entry span {
font-size: 0; /* Hide placeholder text to prevent layout shifts in color palette iconview widgets due to lazy loading */
}
@@ -3041,13 +3041,13 @@ kbd,
/* Writer - Format - Paragraph - Area - Color */
#ParagraphPropertiesDialog #labelTP_TABULATOR #entryED_TABTYPE_DECCHAR-input,
#ParagraphPropertiesDialog #labelTP_TABULATOR #entryED_FILLCHAR_OTHER-input,
-#ColorPage.jsdialog #rgbpreset input,
-#ColorPage.jsdialog #rgbcustom input {
+[id^='ColorPage'].jsdialog [id^='rgbpreset'] input,
+[id^='ColorPage'].jsdialog [id^='rgbcustom'] input {
max-width: 100px;
}
/* Writer - Format - Paragraph - Area - Color */
-#ColorPage.jsdialog #rgbpreset {
+[id^='ColorPage'].jsdialog [id^='rgbpreset'] {
width: max-content;
}
1 file changed, 13 insertions(+), 13 deletions(-)
New commits:
commit 41ca961910dc85b51930d5eff07e45bd951ff262
Author: Sarper Akdemir <sarper....@collabora.com>
AuthorDate: Fri Apr 24 14:21:39 2026 +0200
Commit: Szymon Kłos <szymo...@collabora.com>
CommitDate: Wed May 6 05:10:24 2026 +0000
jsdialog: match Area > Color rules by id prefix
Engine's JSInstanceBuilder::RememberWidget() suffixes widget ids when
a tab page is re-instantiated (ColorPage0, iconview_colors1,
rgbpreset7, ...), so clicking the inner Color fill-type tab dropped
the palette to the generic 3-column grid and shrunk the preset/
custom input groups.
Signed-off-by: Sarper Akdemir <sarper....@collabora.com>
Change-Id: I0540d77d658151d1ebfdf9246e55c08b7d049ac6
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1594
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Szymon Kłos <szymo...@collabora.com>
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 1b4f817bea4a..9a4e2168fee1 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2973,34 +2973,34 @@ kbd,
/* Calc - Format - Format Cells - Background - Color */
/* Format -> Character -> Font Effects -> Font color */
-#ColorPage.jsdialog :is(#iconview_colors, #iconview_recent_colors).ui-iconview,
-:is(#colorwindow_iv_colors, #colorwindow_iv_recentcolors).ui-iconview {
+[id^='ColorPage'].jsdialog :is([id^='iconview_colors'], [id^='iconview_recent_colors']).ui-iconview,
+:is([id^='colorwindow_iv_colors'], [id^='colorwindow_iv_recentcolors']).ui-iconview {
grid-template-columns: repeat(12, 1fr);
width: max-content;
line-height: 0;
padding: 5px;
}
-#ColorPage.jsdialog #iconview_colors.ui-iconview,
-#colorwindow_iv_colors.ui-iconview {
+[id^='ColorPage'].jsdialog [id^='iconview_colors'].ui-iconview,
+[id^='colorwindow_iv_colors'].ui-iconview {
max-height: 19vh;
}
-#ColorPage.jsdialog :is(#iconview_colors, #iconview_recent_colors).ui-iconview .ui-iconview-entry :is(img, span),
-:is(#colorwindow_iv_colors, #colorwindow_iv_recentcolors) .ui-iconview-entry img {
+[id^='ColorPage'].jsdialog :is([id^='iconview_colors'], [id^='iconview_recent_colors']).ui-iconview .ui-iconview-entry :is(img, span),
+:is([id^='colorwindow_iv_colors'], [id^='colorwindow_iv_recentcolors']) .ui-iconview-entry img {
padding: 1px;
}
-#ColorPage.jsdialog :is(#iconview_colors, #iconview_recent_colors).ui-iconview .ui-iconview-entry:is(:hover, .selected),
-:is(#colorwindow_iv_colors, #colorwindow_iv_recentcolors) .ui-iconview-entry:is(:hover, .selected) {
+[id^='ColorPage'].jsdialog :is([id^='iconview_colors'], [id^='iconview_recent_colors']).ui-iconview .ui-iconview-entry:is(:hover, .selected),
+:is([id^='colorwindow_iv_colors'], [id^='colorwindow_iv_recentcolors']) .ui-iconview-entry:is(:hover, .selected) {
outline: 2px solid var(--color-primary);
border: 1px solid transparent;
background-color: transparent;
border-radius: 0;
}
-#ColorPage.jsdialog :is(#iconview_colors, #iconview_recent_colors).ui-iconview .ui-iconview-entry span,
-:is(#colorwindow_iv_colors, #colorwindow_iv_recentcolors) .ui-iconview-entry span {
+[id^='ColorPage'].jsdialog :is([id^='iconview_colors'], [id^='iconview_recent_colors']).ui-iconview .ui-iconview-entry span,
+:is([id^='colorwindow_iv_colors'], [id^='colorwindow_iv_recentcolors']) .ui-iconview-entry span {
font-size: 0; /* Hide placeholder text to prevent layout shifts in color palette iconview widgets due to lazy loading */
}
@@ -3041,13 +3041,13 @@ kbd,
/* Writer - Format - Paragraph - Area - Color */
#ParagraphPropertiesDialog #labelTP_TABULATOR #entryED_TABTYPE_DECCHAR-input,
#ParagraphPropertiesDialog #labelTP_TABULATOR #entryED_FILLCHAR_OTHER-input,
-#ColorPage.jsdialog #rgbpreset input,
-#ColorPage.jsdialog #rgbcustom input {
+[id^='ColorPage'].jsdialog [id^='rgbpreset'] input,
+[id^='ColorPage'].jsdialog [id^='rgbcustom'] input {
max-width: 100px;
}
/* Writer - Format - Paragraph - Area - Color */
-#ColorPage.jsdialog #rgbpreset {
+[id^='ColorPage'].jsdialog [id^='rgbpreset'] {
width: max-content;
}
"Samuel Mehrbrodt (via cogerrit)"
May 11, 2026, 4:08:07 AMMay 11
to collaboraon...@googlegroups.com
browser/css/menubar.css | 1 -
browser/css/mobilewizard.css | 4 ----
browser/css/toolbar.css | 5 -----
3 files changed, 10 deletions(-)
New commits:
commit 60097872a500c9dc08ad7594a21a4aa9f41701ef
Author: Samuel Mehrbrodt <samuel.m...@collabora.com>
AuthorDate: Fri May 1 07:05:12 2026 +0200
Commit: Stephan Bergmann <stephan....@collabora.com>
CommitDate: Mon May 11 08:07:54 2026 +0000
Drop commented out css rules
Change-Id: I45d33bdec322ec5322c07a01c1e016978ecd8731
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1850
index f0f36a3c4fd9..25246f05366e 100644
--- a/browser/css/menubar.css
+++ b/browser/css/menubar.css
@@ -297,7 +297,6 @@ nav.hasnotebookbar [id^='save'].saved::after {
margin-right: 5px;
background: transparent url('images/lc_menu_chevron.svg') no-repeat center right; /* we want them to be transparent always whether mobile or desktop */
color: transparent;
- /*transform: rotate(180deg);*/
}
.lo-menu ul a:hover > span.sub-arrow {
filter: brightness(100);
diff --git a/browser/css/mobilewizard.css b/browser/css/mobilewizard.css
index 75d672937834..d74c631ae4f3 100644
--- a/browser/css/mobilewizard.css
+++ b/browser/css/mobilewizard.css
@@ -979,10 +979,6 @@ label[disabled] {
.ui-edit.mobile-wizard,
.ui-textarea.mobile-wizard,
#mobile-wizard-content .cool-annotation-table {
- /*
- , textarea was also here assign but it was messing up with all textareas (annotations on desktop and mobile):
- - added 93038: jsdialog: style dialogs; a5016d547c6242f6f9b28748b5724b0bc10cdb67
- */
width: stretch;
margin: 10px 5% !important;
}
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index f5c88381a809..7df3bdc3b949 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -738,11 +738,6 @@ button.leaflet-control-search-next
background-size: 16px 16px, 16px 16px, 16px 16px !important;
background-position: 2px center, 20px center, 38px center !important;
width: 94px !important; }
-/* Avoid the iconset07, the core renders it the same as iconset06, no need to support it in the online.
-.w2ui-icon.iconset07 { background: url('images/icon-set-symbols1-cross.svg') no-repeat, url('images/icon-set-symbols1-exclamation-mark.svg') no-repeat, url('images/icon-set-symbols1-check.svg') no-repeat;
- background-size: 16px 16px, 16px 16px, 16px 16px !important;
- background-position: 2px center, 20px center, 38px center !important;
- width: 94px !important; }*/
.w2ui-icon.iconset08 { background: url('images/icon-set-positive-yellow-smilie.svg') no-repeat, url('images/icon-set-neutral-yellow-smilie.svg') no-repeat, url('images/icon-set-negative-yellow-smilie.svg') no-repeat;
background-size: 16px 16px, 16px 16px, 16px 16px !important;
background-position: 2px center, 20px center, 38px center !important;
browser/css/mobilewizard.css | 4 ----
browser/css/toolbar.css | 5 -----
3 files changed, 10 deletions(-)
New commits:
commit 60097872a500c9dc08ad7594a21a4aa9f41701ef
Author: Samuel Mehrbrodt <samuel.m...@collabora.com>
AuthorDate: Fri May 1 07:05:12 2026 +0200
Commit: Stephan Bergmann <stephan....@collabora.com>
CommitDate: Mon May 11 08:07:54 2026 +0000
Drop commented out css rules
Change-Id: I45d33bdec322ec5322c07a01c1e016978ecd8731
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1850
Reviewed-by: Stephan Bergmann <stephan....@collabora.com>
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
diff --git a/browser/css/menubar.css b/browser/css/menubar.css
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
index f0f36a3c4fd9..25246f05366e 100644
--- a/browser/css/menubar.css
+++ b/browser/css/menubar.css
@@ -297,7 +297,6 @@ nav.hasnotebookbar [id^='save'].saved::after {
margin-right: 5px;
background: transparent url('images/lc_menu_chevron.svg') no-repeat center right; /* we want them to be transparent always whether mobile or desktop */
color: transparent;
- /*transform: rotate(180deg);*/
}
.lo-menu ul a:hover > span.sub-arrow {
filter: brightness(100);
diff --git a/browser/css/mobilewizard.css b/browser/css/mobilewizard.css
index 75d672937834..d74c631ae4f3 100644
--- a/browser/css/mobilewizard.css
+++ b/browser/css/mobilewizard.css
@@ -979,10 +979,6 @@ label[disabled] {
.ui-edit.mobile-wizard,
.ui-textarea.mobile-wizard,
#mobile-wizard-content .cool-annotation-table {
- /*
- , textarea was also here assign but it was messing up with all textareas (annotations on desktop and mobile):
- - added 93038: jsdialog: style dialogs; a5016d547c6242f6f9b28748b5724b0bc10cdb67
- */
width: stretch;
margin: 10px 5% !important;
}
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index f5c88381a809..7df3bdc3b949 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -738,11 +738,6 @@ button.leaflet-control-search-next
background-size: 16px 16px, 16px 16px, 16px 16px !important;
background-position: 2px center, 20px center, 38px center !important;
width: 94px !important; }
-/* Avoid the iconset07, the core renders it the same as iconset06, no need to support it in the online.
-.w2ui-icon.iconset07 { background: url('images/icon-set-symbols1-cross.svg') no-repeat, url('images/icon-set-symbols1-exclamation-mark.svg') no-repeat, url('images/icon-set-symbols1-check.svg') no-repeat;
- background-size: 16px 16px, 16px 16px, 16px 16px !important;
- background-position: 2px center, 20px center, 38px center !important;
- width: 94px !important; }*/
.w2ui-icon.iconset08 { background: url('images/icon-set-positive-yellow-smilie.svg') no-repeat, url('images/icon-set-neutral-yellow-smilie.svg') no-repeat, url('images/icon-set-negative-yellow-smilie.svg') no-repeat;
background-size: 16px 16px, 16px 16px, 16px 16px !important;
background-position: 2px center, 20px center, 38px center !important;
"Samuel Mehrbrodt (via cogerrit)"
May 11, 2026, 4:10:13 AMMay 11
to collaboraon...@googlegroups.com
browser/css/aichat-sidebar.css | 4 ++--
browser/css/backstage.css | 16 ++++++++--------
browser/css/cool.css | 16 +++++++++++++---
browser/css/helpdialog.css | 2 +-
browser/css/iframedialog.css | 4 +---
browser/css/infobar.css | 2 +-
browser/css/jsdialogs.css | 4 ++--
browser/css/mobilewizard.css | 2 +-
browser/css/override-smartmenus.css | 2 +-
browser/css/spreadsheet.css | 2 +-
browser/css/welcome.css | 2 +-
11 files changed, 32 insertions(+), 24 deletions(-)
New commits:
commit 05ab451a2034a52f95b6c0a686c36b2023da208c
Author: Samuel Mehrbrodt <samuel.m...@collabora.com>
AuthorDate: Fri May 1 07:46:57 2026 +0200
Commit: Stephan Bergmann <stephan....@collabora.com>
CommitDate: Mon May 11 08:09:24 2026 +0000
Add & use css variables for shadow
Change-Id: I4530d745b4bdb74bb01e66a3133b78984b5cc0d0
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1856
index e152b71102c8..7808ac450a55 100644
--- a/browser/css/aichat-sidebar.css
+++ b/browser/css/aichat-sidebar.css
@@ -609,7 +609,7 @@
}
.aichat-msg-assistant pre {
- background: rgba(0, 0, 0, 0.05);
+ background: var(--color-black-5);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 8px 10px;
@@ -763,7 +763,7 @@
.aichat-approve-btn:hover {
box-shadow: 0 2px 8px rgba(var(--aichat-accent), 0.3);
- background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
+ background: linear-gradient(var(--color-black-10), var(--color-black-10)),
rgb(var(--aichat-accent));
}
diff --git a/browser/css/backstage.css b/browser/css/backstage.css
index 200efcc8a634..b6cc4633b2a1 100644
--- a/browser/css/backstage.css
+++ b/browser/css/backstage.css
@@ -32,7 +32,7 @@
align-items: center;
justify-content: space-between;
padding: 0 16px 0 20px;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+ box-shadow: 0 1px 2px var(--color-black-5);
color: var(--color-on-primary);
}
@@ -99,7 +99,7 @@
border-right: 1px solid var(--color-toolbar-border);
padding: 16px 0;
overflow-y: auto;
- box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
+ box-shadow: 1px 0 3px var(--color-black-5);
display: flex;
flex-direction: column;
height: 100%;
@@ -327,7 +327,7 @@
.backstage-template-card:hover {
background-color: var(--color-background-dark);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 4px 8px var(--color-black-10);
}
.template-thumbnail {
@@ -452,7 +452,7 @@
border-radius: var(--border-radius-large);
+ box-shadow: 0 1px 3px var(--color-black-5);
display: flex;
flex-direction: column;
justify-content: center;
@@ -463,7 +463,7 @@
.backstage-format-card:hover {
background-color: var(--color-background-dark);
border-color: var(--color-primary);
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 2px 6px var(--color-black-10);
transform: translateY(-1px);
}
@@ -493,20 +493,20 @@
margin-top: 12px;
border-radius: var(--border-radius);
font-weight: 600;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 2px 4px var(--color-black-10);
transition: all 0.2s ease;
}
.backstage-action-button:hover {
background-color: var(--color-primary);
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 3px 6px var(--color-black-15);
transform: translateY(-1px);
opacity: 0.9;
}
.backstage-action-button:active {
transform: translateY(0);
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 2px var(--color-black-10);
}
.backstage-info-properties {
diff --git a/browser/css/cool.css b/browser/css/cool.css
index 6161cfbcd879..47b845d3c8a1 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -29,6 +29,16 @@
--spacing-l: 12px;
--spacing-xl: 16px;
+ /* Black overlay tints for borders, scrims and shadow components */
+ --color-black-5: rgba(0, 0, 0, 0.05);
+ --color-black-10: rgba(0, 0, 0, 0.1);
+ --color-black-15: rgba(0, 0, 0, 0.15);
+ --color-black-20: rgba(0, 0, 0, 0.2);
+
+ /* Box-shadow tokens */
+ --shadow-subtle: 0 0 3px var(--color-box-shadow);
+ --shadow-elevated: 0 -1px 2px 0 var(--color-black-15), 0 2px 2px 0 var(--color-black-10);
bottom: 16px;
background-color: var(--color-primary);
border-radius: 50%;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ box-shadow: 0 4px 8px 0 var(--color-black-20), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1001;
transform: scale(1);
transition: transform 0.5s;
@@ -673,7 +683,7 @@ body {
font-size: var(--default-font-size);
text-align: left;
background-color: var(--color-background-lighter);
- box-shadow: 0 0 3px var(--color-box-shadow);
+ box-shadow: var(--shadow-subtle);
color: var(--color-main-text);
border: none;
border-radius: var(--border-radius);
@@ -1572,7 +1582,7 @@ body {
z-index: 1000;
background: rgba(255, 255, 255, 0.8);
border-radius: 6px;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 2px 12px var(--color-black-15);
padding: 8px 12px;
font: 12px/1.25 sans-serif;
color: #333;
diff --git a/browser/css/helpdialog.css b/browser/css/helpdialog.css
index 1a788787f83f..601b6384f3dd 100644
--- a/browser/css/helpdialog.css
+++ b/browser/css/helpdialog.css
@@ -149,7 +149,7 @@
}
#online-help-search-input:focus {
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 0 10px var(--color-black-20);
}
#online-help-search-input::placeholder {
diff --git a/browser/css/iframedialog.css b/browser/css/iframedialog.css
index a3f1bc02bafc..36f540ae202c 100644
--- a/browser/css/iframedialog.css
+++ b/browser/css/iframedialog.css
@@ -18,9 +18,7 @@
height: 424px;
width: 448px;
border: 1px solid var(--color-border);
- box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
- -moz-box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
- -webkit-box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: var(--shadow-elevated);
border-radius: var(--border-radius);
background: var(--color-background-lighter);
}
diff --git a/browser/css/infobar.css b/browser/css/infobar.css
index 80a60b0b0c98..b03ce017fb6b 100644
--- a/browser/css/infobar.css
+++ b/browser/css/infobar.css
@@ -4,7 +4,7 @@
position: absolute;
transform: translate(-50%);
margin-bottom: 40px;
- box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: var(--shadow-elevated);
}
.div-infobar-modal {
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index cc743b74d5ee..9b2e41b902bf 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
border: 1px solid var(--color-border-darker) !important;
border-radius: var(--border-radius);
- box-shadow: 0 0 3px var(--color-box-shadow);
+ box-shadow: var(--shadow-subtle);
overflow: auto;
position: relative;
margin: auto;
@@ -1000,7 +1000,7 @@ input[type='checkbox']:checked.autofilter, .jsdialog input[type='checkbox']:chec
background: var(--color-background-lighter);
border: 1px solid var(--color-border-dark);
border-radius: var(--border-radius);
- box-shadow: 0 0 3px var(--color-box-shadow);
+ box-shadow: var(--shadow-subtle);
}
.context-menu-item {
diff --git a/browser/css/mobilewizard.css b/browser/css/mobilewizard.css
index d74c631ae4f3..737d4af5ee67 100644
--- a/browser/css/mobilewizard.css
+++ b/browser/css/mobilewizard.css
@@ -614,7 +614,7 @@ a.leaflet-control-zoom-in {
padding: 8px !important;
background-color: var(--color-primary) !important;
color: var(--color-primary-text) !important;
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 6px 0 rgba(0, 0, 0, 0.19) !important;
+ box-shadow: 0 2px 4px 0 var(--color-black-20), 0 4px 6px 0 rgba(0, 0, 0, 0.19) !important;
border: none !important;
}
#slide-sorter .preview-img {
diff --git a/browser/css/override-smartmenus.css b/browser/css/override-smartmenus.css
index 6975a4b7f0a9..f736f7e840f7 100644
--- a/browser/css/override-smartmenus.css
+++ b/browser/css/override-smartmenus.css
@@ -8,7 +8,7 @@
position: absolute;
min-width: 12em;
background: var(--color-main-background);
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 1px var(--color-black-20);
}
.sm-simple li {
diff --git a/browser/css/spreadsheet.css b/browser/css/spreadsheet.css
index eabcfe3d3dd3..b3a06cdeecea 100644
--- a/browser/css/spreadsheet.css
+++ b/browser/css/spreadsheet.css
@@ -288,7 +288,7 @@
background: var(--color-background-lighter);
border: 1px solid var(--color-border);
border-radius: 4px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 2px 8px var(--color-black-15);
padding: 4px 0;
z-index: 1000;
white-space: nowrap;
diff --git a/browser/css/welcome.css b/browser/css/welcome.css
index 958b89f4871d..8b024ac4b4eb 100644
--- a/browser/css/welcome.css
+++ b/browser/css/welcome.css
@@ -18,7 +18,7 @@
max-height: 512px;
justify-content: center;
align-items: center;
- box-shadow: 0 0 3px var(--color-box-shadow);
+ box-shadow: var(--shadow-subtle);
border-width: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-background-lighter);
browser/css/backstage.css | 16 ++++++++--------
browser/css/cool.css | 16 +++++++++++++---
browser/css/helpdialog.css | 2 +-
browser/css/iframedialog.css | 4 +---
browser/css/infobar.css | 2 +-
browser/css/jsdialogs.css | 4 ++--
browser/css/mobilewizard.css | 2 +-
browser/css/override-smartmenus.css | 2 +-
browser/css/spreadsheet.css | 2 +-
browser/css/welcome.css | 2 +-
11 files changed, 32 insertions(+), 24 deletions(-)
New commits:
commit 05ab451a2034a52f95b6c0a686c36b2023da208c
Author: Samuel Mehrbrodt <samuel.m...@collabora.com>
AuthorDate: Fri May 1 07:46:57 2026 +0200
Commit: Stephan Bergmann <stephan....@collabora.com>
CommitDate: Mon May 11 08:09:24 2026 +0000
Add & use css variables for shadow
Change-Id: I4530d745b4bdb74bb01e66a3133b78984b5cc0d0
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1856
Reviewed-by: Stephan Bergmann <stephan....@collabora.com>
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
diff --git a/browser/css/aichat-sidebar.css b/browser/css/aichat-sidebar.css
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
index e152b71102c8..7808ac450a55 100644
--- a/browser/css/aichat-sidebar.css
+++ b/browser/css/aichat-sidebar.css
@@ -609,7 +609,7 @@
}
.aichat-msg-assistant pre {
- background: rgba(0, 0, 0, 0.05);
+ background: var(--color-black-5);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 8px 10px;
@@ -763,7 +763,7 @@
.aichat-approve-btn:hover {
box-shadow: 0 2px 8px rgba(var(--aichat-accent), 0.3);
- background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
+ background: linear-gradient(var(--color-black-10), var(--color-black-10)),
rgb(var(--aichat-accent));
}
diff --git a/browser/css/backstage.css b/browser/css/backstage.css
index 200efcc8a634..b6cc4633b2a1 100644
--- a/browser/css/backstage.css
+++ b/browser/css/backstage.css
@@ -32,7 +32,7 @@
align-items: center;
justify-content: space-between;
padding: 0 16px 0 20px;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+ box-shadow: 0 1px 2px var(--color-black-5);
color: var(--color-on-primary);
}
@@ -99,7 +99,7 @@
border-right: 1px solid var(--color-toolbar-border);
padding: 16px 0;
overflow-y: auto;
- box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
+ box-shadow: 1px 0 3px var(--color-black-5);
display: flex;
flex-direction: column;
height: 100%;
@@ -327,7 +327,7 @@
.backstage-template-card:hover {
background-color: var(--color-background-dark);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 4px 8px var(--color-black-10);
}
.template-thumbnail {
@@ -452,7 +452,7 @@
border-radius: var(--border-radius-large);
text-align: center;
transition: all 0.2s ease;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
+ box-shadow: 0 1px 3px var(--color-black-5);
display: flex;
flex-direction: column;
justify-content: center;
@@ -463,7 +463,7 @@
.backstage-format-card:hover {
background-color: var(--color-background-dark);
border-color: var(--color-primary);
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 2px 6px var(--color-black-10);
transform: translateY(-1px);
}
@@ -493,20 +493,20 @@
margin-top: 12px;
border-radius: var(--border-radius);
font-weight: 600;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 2px 4px var(--color-black-10);
transition: all 0.2s ease;
}
.backstage-action-button:hover {
background-color: var(--color-primary);
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 3px 6px var(--color-black-15);
transform: translateY(-1px);
opacity: 0.9;
}
.backstage-action-button:active {
transform: translateY(0);
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 2px var(--color-black-10);
}
.backstage-info-properties {
diff --git a/browser/css/cool.css b/browser/css/cool.css
index 6161cfbcd879..47b845d3c8a1 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -29,6 +29,16 @@
--spacing-l: 12px;
--spacing-xl: 16px;
+ /* Black overlay tints for borders, scrims and shadow components */
+ --color-black-5: rgba(0, 0, 0, 0.05);
+ --color-black-10: rgba(0, 0, 0, 0.1);
+ --color-black-15: rgba(0, 0, 0, 0.15);
+ --color-black-20: rgba(0, 0, 0, 0.2);
+
+ /* Box-shadow tokens */
+ --shadow-subtle: 0 0 3px var(--color-box-shadow);
+ --shadow-elevated: 0 -1px 2px 0 var(--color-black-15), 0 2px 2px 0 var(--color-black-10);
+
--tooltip-font-size: 0.875rem;
--default-font-size: 0.75rem;
--overflow-group-font-size: 8.5pt; /* do not scale labels of groups */
@@ -470,7 +480,7 @@ body {
--tooltip-font-size: 0.875rem;
--default-font-size: 0.75rem;
--overflow-group-font-size: 8.5pt; /* do not scale labels of groups */
bottom: 16px;
background-color: var(--color-primary);
border-radius: 50%;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ box-shadow: 0 4px 8px 0 var(--color-black-20), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1001;
transform: scale(1);
transition: transform 0.5s;
@@ -673,7 +683,7 @@ body {
font-size: var(--default-font-size);
text-align: left;
background-color: var(--color-background-lighter);
- box-shadow: 0 0 3px var(--color-box-shadow);
+ box-shadow: var(--shadow-subtle);
color: var(--color-main-text);
border: none;
border-radius: var(--border-radius);
@@ -1572,7 +1582,7 @@ body {
z-index: 1000;
background: rgba(255, 255, 255, 0.8);
border-radius: 6px;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 2px 12px var(--color-black-15);
padding: 8px 12px;
font: 12px/1.25 sans-serif;
color: #333;
diff --git a/browser/css/helpdialog.css b/browser/css/helpdialog.css
index 1a788787f83f..601b6384f3dd 100644
--- a/browser/css/helpdialog.css
+++ b/browser/css/helpdialog.css
@@ -149,7 +149,7 @@
}
#online-help-search-input:focus {
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 0 10px var(--color-black-20);
}
#online-help-search-input::placeholder {
diff --git a/browser/css/iframedialog.css b/browser/css/iframedialog.css
index a3f1bc02bafc..36f540ae202c 100644
--- a/browser/css/iframedialog.css
+++ b/browser/css/iframedialog.css
@@ -18,9 +18,7 @@
height: 424px;
width: 448px;
border: 1px solid var(--color-border);
- box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
- -moz-box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
- -webkit-box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: var(--shadow-elevated);
border-radius: var(--border-radius);
background: var(--color-background-lighter);
}
diff --git a/browser/css/infobar.css b/browser/css/infobar.css
index 80a60b0b0c98..b03ce017fb6b 100644
--- a/browser/css/infobar.css
+++ b/browser/css/infobar.css
@@ -4,7 +4,7 @@
position: absolute;
transform: translate(-50%);
margin-bottom: 40px;
- box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: var(--shadow-elevated);
}
.div-infobar-modal {
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index cc743b74d5ee..9b2e41b902bf 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -141,7 +141,7 @@ div#autoFillPreviewTooltip .lokdialog.ui-dialog-content.ui-widget-content {
min-width: 198px;
border: 1px solid var(--color-border-darker) !important;
border-radius: var(--border-radius);
- box-shadow: 0 0 3px var(--color-box-shadow);
+ box-shadow: var(--shadow-subtle);
overflow: auto;
position: relative;
margin: auto;
@@ -1000,7 +1000,7 @@ input[type='checkbox']:checked.autofilter, .jsdialog input[type='checkbox']:chec
background: var(--color-background-lighter);
border: 1px solid var(--color-border-dark);
border-radius: var(--border-radius);
- box-shadow: 0 0 3px var(--color-box-shadow);
+ box-shadow: var(--shadow-subtle);
}
.context-menu-item {
diff --git a/browser/css/mobilewizard.css b/browser/css/mobilewizard.css
index d74c631ae4f3..737d4af5ee67 100644
--- a/browser/css/mobilewizard.css
+++ b/browser/css/mobilewizard.css
@@ -614,7 +614,7 @@ a.leaflet-control-zoom-in {
padding: 8px !important;
background-color: var(--color-primary) !important;
color: var(--color-primary-text) !important;
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 6px 0 rgba(0, 0, 0, 0.19) !important;
+ box-shadow: 0 2px 4px 0 var(--color-black-20), 0 4px 6px 0 rgba(0, 0, 0, 0.19) !important;
border: none !important;
}
#slide-sorter .preview-img {
diff --git a/browser/css/override-smartmenus.css b/browser/css/override-smartmenus.css
index 6975a4b7f0a9..f736f7e840f7 100644
--- a/browser/css/override-smartmenus.css
+++ b/browser/css/override-smartmenus.css
@@ -8,7 +8,7 @@
position: absolute;
min-width: 12em;
background: var(--color-main-background);
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 1px var(--color-black-20);
}
.sm-simple li {
diff --git a/browser/css/spreadsheet.css b/browser/css/spreadsheet.css
index eabcfe3d3dd3..b3a06cdeecea 100644
--- a/browser/css/spreadsheet.css
+++ b/browser/css/spreadsheet.css
@@ -288,7 +288,7 @@
background: var(--color-background-lighter);
border: 1px solid var(--color-border);
border-radius: 4px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 2px 8px var(--color-black-15);
padding: 4px 0;
z-index: 1000;
white-space: nowrap;
diff --git a/browser/css/welcome.css b/browser/css/welcome.css
index 958b89f4871d..8b024ac4b4eb 100644
--- a/browser/css/welcome.css
+++ b/browser/css/welcome.css
@@ -18,7 +18,7 @@
max-height: 512px;
justify-content: center;
align-items: center;
- box-shadow: 0 0 3px var(--color-box-shadow);
+ box-shadow: var(--shadow-subtle);
border-width: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-background-lighter);
"Shardul Vikram Singh (via cogerrit)"
May 13, 2026, 8:26:25 AM (12 days ago) May 13
to collaboraon...@googlegroups.com
browser/css/backstage.css | 21 +++++++++++++--------
1 file changed, 13 insertions(+), 8 deletions(-)
New commits:
commit 891c212e3d4d145ecc7e9b8dff80bde42d657018
Fix contrast lacking text colors in dark mode on backstage
Change-Id: I56172ba1076e4ea9a4bde2fc1d34cf8292070d04
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/2144
Reviewed-by: Pedro Silva <pedro...@collabora.com>
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
diff --git a/browser/css/backstage.css b/browser/css/backstage.css
index b6cc4633b2a1..632be254881a 100644
--- a/browser/css/backstage.css
+++ b/browser/css/backstage.css
@@ -5,6 +5,7 @@
--color-primary: rgb(var(--doc-type, 92, 41, 131));
--color-on-primary: #ffffff;
--color-primary-text: #ffffff;
+ --color-accent-background: var(--color-background-lighter);
user-select: none;
-webkit-user-select: none; /* Safari / WKWebView */
@@ -21,6 +22,10 @@
font-family: var(--cool-font);
}
+[data-theme='dark'] .backstage-view {
+ --color-accent-background: var(--color-primary);
+}
+
.backstage-view.hidden {
display: none;
}
@@ -146,16 +151,16 @@
--icon-secondary-color: var(--color-primary);
}
-.backstage-sidebar-item:hover {
- background-color: var(--color-background-dark);
-}
-
.backstage-sidebar-item.active {
background-color: transparent;
- color: var(--color-primary);
+ color: var(--color-main-text);
--icon-primary-color: var(--color-primary);
}
+.backstage-sidebar-item:hover {
+ background-color: var(--color-background-dark);
+}
+
.backstage-sidebar-item.disabled {
opacity: 0.5;
cursor: not-allowed;
@@ -274,14 +279,14 @@
}
.backstage-home-more-button {
- background: var(--color-background-lighter);
+ background: var(--color-accent-background);
height: 24px;
font-size: 12px;
font-weight: 600;
- color: var(--color-primary);
+ color: var(--color-main-text);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
@@ -561,7 +566,7 @@
.backstage-recent-documents-header-cell {
font-size: var(--medium-font-size);
- color: var(--color-primary);
+ color: var(--color-main-text);
font-weight: 500;
text-align: left;
padding: 8px 16px;
1 file changed, 13 insertions(+), 8 deletions(-)
New commits:
commit 891c212e3d4d145ecc7e9b8dff80bde42d657018
Author: Shardul Vikram Singh <shardu...@collabora.com>
AuthorDate: Thu May 7 21:04:43 2026 +0530
Commit: Pedro Pinto Silva <pedro...@collabora.com>
CommitDate: Wed May 13 12:26:07 2026 +0000
Fix contrast lacking text colors in dark mode on backstage
Change-Id: I56172ba1076e4ea9a4bde2fc1d34cf8292070d04
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/2144
Reviewed-by: Pedro Silva <pedro...@collabora.com>
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
diff --git a/browser/css/backstage.css b/browser/css/backstage.css
index b6cc4633b2a1..632be254881a 100644
--- a/browser/css/backstage.css
+++ b/browser/css/backstage.css
@@ -5,6 +5,7 @@
--color-primary: rgb(var(--doc-type, 92, 41, 131));
--color-on-primary: #ffffff;
--color-primary-text: #ffffff;
+ --color-accent-background: var(--color-background-lighter);
user-select: none;
-webkit-user-select: none; /* Safari / WKWebView */
@@ -21,6 +22,10 @@
font-family: var(--cool-font);
}
+[data-theme='dark'] .backstage-view {
+ --color-accent-background: var(--color-primary);
+}
+
.backstage-view.hidden {
display: none;
}
@@ -146,16 +151,16 @@
--icon-secondary-color: var(--color-primary);
}
-.backstage-sidebar-item:hover {
- background-color: var(--color-background-dark);
-}
-
.backstage-sidebar-item.active {
background-color: transparent;
- color: var(--color-primary);
+ color: var(--color-main-text);
--icon-primary-color: var(--color-primary);
}
+.backstage-sidebar-item:hover {
+ background-color: var(--color-background-dark);
+}
+
.backstage-sidebar-item.disabled {
opacity: 0.5;
cursor: not-allowed;
@@ -274,14 +279,14 @@
}
.backstage-home-more-button {
- background: var(--color-background-lighter);
+ background: var(--color-accent-background);
border: 1px solid var(--color-border);
border-radius: 4px;
padding: 0 8px;
border-radius: 4px;
height: 24px;
font-size: 12px;
font-weight: 600;
- color: var(--color-primary);
+ color: var(--color-main-text);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
@@ -561,7 +566,7 @@
.backstage-recent-documents-header-cell {
font-size: var(--medium-font-size);
- color: var(--color-primary);
+ color: var(--color-main-text);
font-weight: 500;
text-align: left;
padding: 8px 16px;
"Pedro Pinto Silva (via cogerrit)"
May 13, 2026, 10:11:12 AM (12 days ago) May 13
to collaboraon...@googlegroups.com
browser/css/jssidebar.css | 2 +-
browser/css/partsPreviewControl.css | 9 +++++++--
2 files changed, 8 insertions(+), 3 deletions(-)
New commits:
commit fd96d6415d4294de5882d555b9014edc4890d8df
Slide sections: improve label styles, add style for selected section
- No need to make the slide section shout but making them bold,
reserve bold for when the section is selected (which is not yet
implemented but once it is we should simple add the selected class)
- Make sure Navigation; navigation tabs and sections are aligned
Change-Id: I6981ca155a8a9017148bb780833697eff616797f
diff --git a/browser/css/jssidebar.css b/browser/css/jssidebar.css
index 9088950601ce..b3dfef66d073 100644
--- a/browser/css/jssidebar.css
+++ b/browser/css/jssidebar.css
@@ -567,7 +567,7 @@ span.jsdialog.sidebar.ui-treeview-notexpandable {
border: 1px solid transparent;
background: transparent;
padding: 6px 8px;
- margin-block: 0 4px;
+ margin: 0 4px 0 0;
cursor: pointer;
font-size: 0.83rem;
border-bottom: none;
diff --git a/browser/css/partsPreviewControl.css b/browser/css/partsPreviewControl.css
index de1968b0eb26..52037e602820 100644
--- a/browser/css/partsPreviewControl.css
+++ b/browser/css/partsPreviewControl.css
@@ -66,7 +66,7 @@
.slide-section-header {
display: flex;
align-items: center;
- padding-inline: 8px;
+ margin-inline: 16px;
line-height: var(--sidebar-header-height, 34px);
cursor: pointer;
user-select: none;
@@ -109,8 +109,8 @@
.slide-section-name {
color: var(--color-main-text);
+ font-family: var(--cool-font);
font-size: var(--header-font-size, 12px);
- font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -120,3 +120,8 @@
.preview-frame.section-collapsed {
display: none;
}
+
+.slide-section-name.selected {
+ color: rgb(var(--doc-type));
+ font-weight: 600;
+}
browser/css/partsPreviewControl.css | 9 +++++++--
2 files changed, 8 insertions(+), 3 deletions(-)
New commits:
commit fd96d6415d4294de5882d555b9014edc4890d8df
Author: Pedro Pinto Silva <pedro...@collabora.com>
AuthorDate: Tue May 5 16:04:33 2026 +0200
Commit: Pedro Pinto Silva <pedro...@collabora.com>
CommitDate: Wed May 13 14:10:26 2026 +0000
Slide sections: improve label styles, add style for selected section
- No need to make the slide section shout but making them bold,
reserve bold for when the section is selected (which is not yet
implemented but once it is we should simple add the selected class)
- Make sure Navigation; navigation tabs and sections are aligned
Change-Id: I6981ca155a8a9017148bb780833697eff616797f
Signed-off-by: Pedro Pinto Silva <pedro...@collabora.com>
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/2050
diff --git a/browser/css/jssidebar.css b/browser/css/jssidebar.css
index 9088950601ce..b3dfef66d073 100644
--- a/browser/css/jssidebar.css
+++ b/browser/css/jssidebar.css
@@ -567,7 +567,7 @@ span.jsdialog.sidebar.ui-treeview-notexpandable {
border: 1px solid transparent;
background: transparent;
padding: 6px 8px;
- margin-block: 0 4px;
+ margin: 0 4px 0 0;
cursor: pointer;
font-size: 0.83rem;
border-bottom: none;
diff --git a/browser/css/partsPreviewControl.css b/browser/css/partsPreviewControl.css
index de1968b0eb26..52037e602820 100644
--- a/browser/css/partsPreviewControl.css
+++ b/browser/css/partsPreviewControl.css
@@ -66,7 +66,7 @@
.slide-section-header {
display: flex;
align-items: center;
- padding-inline: 8px;
+ margin-inline: 16px;
line-height: var(--sidebar-header-height, 34px);
cursor: pointer;
user-select: none;
@@ -109,8 +109,8 @@
.slide-section-name {
color: var(--color-main-text);
+ font-family: var(--cool-font);
font-size: var(--header-font-size, 12px);
- font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -120,3 +120,8 @@
.preview-frame.section-collapsed {
display: none;
}
+
+.slide-section-name.selected {
+ color: rgb(var(--doc-type));
+ font-weight: 600;
+}
"Gülşah Köse (via cogerrit)"
May 14, 2026, 11:51:47 AM (11 days ago) May 14
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
New commits:
commit fb442a1234bde98c01fc84549c5f62d1ebb28909
Author: Gülşah Köse <gulsa...@collabora.com>
AuthorDate: Thu May 14 15:25:53 2026 +0300
Commit: Gülşah Köse <gulsa...@collabora.com>
CommitDate: Thu May 14 15:51:25 2026 +0000
Fix dark mode issue of lock icon
Position and Size dialog and sidebar position and size dock lock icon
was dark in dark mode. We inverted it.
Signed-off-by: Gülşah Köse <gulsa...@collabora.com>
Change-Id: I393d2b6f3581035ff40389aabaacffa699e80633
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/2603
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Gülşah Köse <gulsa...@collabora.com>
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 9b2e41b902bf..3d72c36fd20b 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2374,7 +2374,8 @@ button.has-img img {
[data-theme='dark'] #CTL_RECT img.ui-drawing-area,
[data-theme='dark'] #CTL_ANGLE img.ui-drawing-area,
[data-theme='dark'] #daRatioTop img.ui-drawing-area,
-[data-theme='dark'] #daRatioBottom img.ui-drawing-area {
+[data-theme='dark'] #daRatioBottom img.ui-drawing-area,
+[data-theme='dark'] img#imRatio.ui-image {
filter: invert(.95)
}
1 file changed, 2 insertions(+), 1 deletion(-)
New commits:
commit fb442a1234bde98c01fc84549c5f62d1ebb28909
Author: Gülşah Köse <gulsa...@collabora.com>
AuthorDate: Thu May 14 15:25:53 2026 +0300
Commit: Gülşah Köse <gulsa...@collabora.com>
CommitDate: Thu May 14 15:51:25 2026 +0000
Fix dark mode issue of lock icon
Position and Size dialog and sidebar position and size dock lock icon
was dark in dark mode. We inverted it.
Signed-off-by: Gülşah Köse <gulsa...@collabora.com>
Change-Id: I393d2b6f3581035ff40389aabaacffa699e80633
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/2603
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Gülşah Köse <gulsa...@collabora.com>
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 9b2e41b902bf..3d72c36fd20b 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2374,7 +2374,8 @@ button.has-img img {
[data-theme='dark'] #CTL_RECT img.ui-drawing-area,
[data-theme='dark'] #CTL_ANGLE img.ui-drawing-area,
[data-theme='dark'] #daRatioTop img.ui-drawing-area,
-[data-theme='dark'] #daRatioBottom img.ui-drawing-area {
+[data-theme='dark'] #daRatioBottom img.ui-drawing-area,
+[data-theme='dark'] img#imRatio.ui-image {
filter: invert(.95)
}
"Henry Castro (via cogerrit)"
May 17, 2026, 6:09:47 AM (8 days ago) May 17
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 25 +++++++++++++++++++++++++
1 file changed, 25 insertions(+)
New commits:
commit 0252a1c1ad95a21bffc50fe00385cdfffea3e7cf
Author: Henry Castro <henry....@collabora.com>
AuthorDate: Wed Mar 25 07:42:20 2026 -0400
Commit: Caolán McNamara <caolan....@collabora.com>
CommitDate: Sun May 17 10:09:26 2026 +0000
browser: a11y: fix dialog size at 400% zoom
When zooming to 400%, the dialog size should remain fixed.
Otherwise, the horizontal scrollbar will not be visible.
Change-Id: I755841dc9ab7c8876193bc85a250bf8b853326ed
Signed-off-by: Henry Castro <henry....@collabora.com>
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1734
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Tested-by: Caolán McNamara <caolan....@collabora.com>
Reviewed-by: Caolán McNamara <caolan....@collabora.com>
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index d452e655d3fb..d0b3211bb490 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -41,6 +41,14 @@
min-width: 400px;
}
+@media (max-width: 480px) {
+
+ .jsdialog-window:not(.modalpopup) .jsdialog-container:not(.snackbar) {
+ min-width: unset;
+ width: 460px;
+ }
+}
+
.jsdialog-container:not(.snackbar) td[role='gridcell'] {
padding-left: 5px;
padding-right: 5px;
@@ -205,6 +213,14 @@ div#autoFillPreviewTooltip .lokdialog.ui-dialog-content.ui-widget-content {
overflow: hidden; /* don't inherit scrollbar from parent */
}
+@media (max-width: 480px) {
+
+ .jsdialog-container .ui-dialog-content > div:not(.ui-scrollwindow) {
+ overflow: unset;
+ }
+}
+
+
.jsdialog-container .lokdialog.ui-dialog-content.ui-widget-content {
overflow: hidden;
}
@@ -216,6 +232,15 @@ div#autoFillPreviewTooltip .lokdialog.ui-dialog-content.ui-widget-content {
line-height: var(--default-height);
padding-left: inherit;
}
+
+@media (max-width: 480px) {
+
+ .jsdialog-container .lokdialog.ui-dialog-content.ui-widget-content {
+ overflow-x: unset;
+ }
+}
+
+
#glowframe > div.ui-frame.jsdialog.sidebar > label,
#softedgeframe > div.ui-frame.jsdialog.sidebar > label {
color: var(--color-main-text);
1 file changed, 25 insertions(+)
New commits:
commit 0252a1c1ad95a21bffc50fe00385cdfffea3e7cf
Author: Henry Castro <henry....@collabora.com>
AuthorDate: Wed Mar 25 07:42:20 2026 -0400
Commit: Caolán McNamara <caolan....@collabora.com>
CommitDate: Sun May 17 10:09:26 2026 +0000
browser: a11y: fix dialog size at 400% zoom
When zooming to 400%, the dialog size should remain fixed.
Otherwise, the horizontal scrollbar will not be visible.
Change-Id: I755841dc9ab7c8876193bc85a250bf8b853326ed
Signed-off-by: Henry Castro <henry....@collabora.com>
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1734
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Tested-by: Caolán McNamara <caolan....@collabora.com>
Reviewed-by: Caolán McNamara <caolan....@collabora.com>
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index d452e655d3fb..d0b3211bb490 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -41,6 +41,14 @@
min-width: 400px;
}
+@media (max-width: 480px) {
+
+ .jsdialog-window:not(.modalpopup) .jsdialog-container:not(.snackbar) {
+ min-width: unset;
+ width: 460px;
+ }
+}
+
.jsdialog-container:not(.snackbar) td[role='gridcell'] {
padding-left: 5px;
padding-right: 5px;
@@ -205,6 +213,14 @@ div#autoFillPreviewTooltip .lokdialog.ui-dialog-content.ui-widget-content {
overflow: hidden; /* don't inherit scrollbar from parent */
}
+@media (max-width: 480px) {
+
+ .jsdialog-container .ui-dialog-content > div:not(.ui-scrollwindow) {
+ overflow: unset;
+ }
+}
+
+
.jsdialog-container .lokdialog.ui-dialog-content.ui-widget-content {
overflow: hidden;
}
@@ -216,6 +232,15 @@ div#autoFillPreviewTooltip .lokdialog.ui-dialog-content.ui-widget-content {
line-height: var(--default-height);
padding-left: inherit;
}
+
+@media (max-width: 480px) {
+
+ .jsdialog-container .lokdialog.ui-dialog-content.ui-widget-content {
+ overflow-x: unset;
+ }
+}
+
+
#glowframe > div.ui-frame.jsdialog.sidebar > label,
#softedgeframe > div.ui-frame.jsdialog.sidebar > label {
color: var(--color-main-text);
"Andreas-Kainz (via cogerrit)"
May 18, 2026, 10:25:20 AM (7 days ago) May 18
to collaboraon...@googlegroups.com
browser/css/toolbar.css | 4 ++--
Author: Andreas Kainz <kai...@gmail.com>
AuthorDate: Wed Apr 29 15:04:29 2026 +0200
Commit: Darshan-Upadhyay <darshan....@collabora.com>
CommitDate: Mon May 18 14:25:02 2026 +0000
NB Tab Home Writer make fontnamecombobox same with than in sidebar (less empty space)
Change-Id: I0606c7c5550b58af053b581bb2ebc070be3b9b7d
Signed-off-by: Andreas-Kainz <kai...@gmail.com>
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1818
Reviewed-by: Darshan-Upadhyay <darshan....@collabora.com>
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index 7df3bdc3b949..4b0cebfa60ba 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -463,8 +463,8 @@ button.leaflet-control-search-next
width: 55px !important;
}
#toolbar-up #fontnamecombobox {
- width: 150px;
- max-width: 150px;
+ min-width: 150px;
+ max-width: 181px;
margin: auto 5px;
}
#toolbar-up #fontsizecombobox {
1 file changed, 2 insertions(+), 2 deletions(-)
New commits:
commit dac48063c68427c3e011da8bbd60b14150d5d6cd
New commits:
Author: Andreas Kainz <kai...@gmail.com>
AuthorDate: Wed Apr 29 15:04:29 2026 +0200
Commit: Darshan-Upadhyay <darshan....@collabora.com>
CommitDate: Mon May 18 14:25:02 2026 +0000
NB Tab Home Writer make fontnamecombobox same with than in sidebar (less empty space)
Change-Id: I0606c7c5550b58af053b581bb2ebc070be3b9b7d
Signed-off-by: Andreas-Kainz <kai...@gmail.com>
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1818
Reviewed-by: Darshan-Upadhyay <darshan....@collabora.com>
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index 7df3bdc3b949..4b0cebfa60ba 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -463,8 +463,8 @@ button.leaflet-control-search-next
width: 55px !important;
}
#toolbar-up #fontnamecombobox {
- width: 150px;
- max-width: 150px;
+ min-width: 150px;
+ max-width: 181px;
margin: auto 5px;
}
#toolbar-up #fontsizecombobox {
"Andreas-Kainz (via cogerrit)"
May 19, 2026, 8:37:28 AM (6 days ago) May 19
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
New commits:
commit 2dff077fb4f21f0f82aa21a21506cdab49bf2ed3
Author: Andreas Kainz <kai...@gmail.com>
AuthorDate: Sat May 2 15:23:30 2026 +0200
Commit: Darshan-Upadhyay <darshan....@collabora.com>
CommitDate: Tue May 19 12:37:12 2026 +0000
Server Audit Dialog fix alignment
Change-Id: I6df32ee1ef25e1e53fe529fd1c834dd229151de5
Signed-off-by: Andreas-Kainz <kai...@gmail.com>
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1886
index f07e0ec51745..8c67df3d041d 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -809,7 +809,7 @@ body button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-f
#ServerAuditDialog .ui-treeview-entry {
display: grid;
- grid-template-columns: var(--btn-img-size-m) 6fr 3fr;
+ grid-template-columns: var(--btn-img-size) 6fr 3fr;
white-space: normal;
}
1 file changed, 1 insertion(+), 1 deletion(-)
New commits:
commit 2dff077fb4f21f0f82aa21a21506cdab49bf2ed3
Author: Andreas Kainz <kai...@gmail.com>
AuthorDate: Sat May 2 15:23:30 2026 +0200
Commit: Darshan-Upadhyay <darshan....@collabora.com>
CommitDate: Tue May 19 12:37:12 2026 +0000
Server Audit Dialog fix alignment
Change-Id: I6df32ee1ef25e1e53fe529fd1c834dd229151de5
Signed-off-by: Andreas-Kainz <kai...@gmail.com>
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1886
Reviewed-by: Darshan-Upadhyay <darshan....@collabora.com>
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
index f07e0ec51745..8c67df3d041d 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -809,7 +809,7 @@ body button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-f
#ServerAuditDialog .ui-treeview-entry {
display: grid;
- grid-template-columns: var(--btn-img-size-m) 6fr 3fr;
+ grid-template-columns: var(--btn-img-size) 6fr 3fr;
white-space: normal;
}
"Darshan-upadhyay1110 (via cogerrit)"
May 22, 2026, 6:05:39 AM (3 days ago) May 22
to collaboraon...@googlegroups.com
browser/css/jsdialogs.css | 7 ++++---
browser/css/toolbar.css | 2 +-
2 files changed, 5 insertions(+), 4 deletions(-)
New commits:
commit 05e718a05c681384495901fe63ada8030a200393
Author: Darshan-upadhyay1110 <darshan....@collabora.com>
AuthorDate: Wed May 20 14:34:30 2026 +0530
Commit: Darshan-Upadhyay <darshan....@collabora.com>
CommitDate: Fri May 22 10:05:06 2026 +0000
cool#15810 combobox: center dropdown arrow inside the button
- This patch will fix the ui-combobox arrow alignment issue
- before this patch The .ui-listbox-arrow triangle sat off-center inside the.ui-combobox-button.
What caused this:
.ui-combobox-button had padding-left only, while .ui-listbox-arrow
carried negative inline margins from its original sibling-overlay
design on a <select>. Inside the combobox button, the arrow is a
child rather than a sibling, so the two asymmetries skewed flex
centering.
Solution:
Symmetrize the button’s inline padding and reset the in-combobox
arrow’s inline margins so justify-content: center places the
triangle at the button’s true center.
Signed-off-by: Darshan-upadhyay1110 <darshan....@collabora.com>
Change-Id: I4a9db28b1b04323416e9c788973feaf797b7374c
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/2973
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -1380,7 +1380,8 @@ img.context-menu-icon {
}
.ui-combobox .ui-listbox-arrow {
- margin-inline-start: -8px;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
}
:dir(rtl) .ui-listbox-arrow {
@@ -1420,8 +1421,8 @@ img.context-menu-icon {
justify-content: center;
border-inline-start: 1px solid var(--color-border);
background-color: transparent;
- padding-left: 20px;
- border : none;
+ padding-inline: 10px;
+ border: none;
}
.ui-combobox-button:hover {
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index b1a0a4a768ad..d122746d6950 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -457,7 +457,7 @@ button.leaflet-control-search-next
color: var(--color-text-darker);
}
#toolbar-up .ui-combobox-button {
- padding-left: 10px;
+ padding-inline: 5px;
}
#fontsizecombobox-input-context-toolbar {
width: 55px !important;
browser/css/toolbar.css | 2 +-
2 files changed, 5 insertions(+), 4 deletions(-)
New commits:
commit 05e718a05c681384495901fe63ada8030a200393
Author: Darshan-upadhyay1110 <darshan....@collabora.com>
AuthorDate: Wed May 20 14:34:30 2026 +0530
Commit: Darshan-Upadhyay <darshan....@collabora.com>
CommitDate: Fri May 22 10:05:06 2026 +0000
cool#15810 combobox: center dropdown arrow inside the button
- This patch will fix the ui-combobox arrow alignment issue
- before this patch The .ui-listbox-arrow triangle sat off-center inside the.ui-combobox-button.
What caused this:
.ui-combobox-button had padding-left only, while .ui-listbox-arrow
carried negative inline margins from its original sibling-overlay
design on a <select>. Inside the combobox button, the arrow is a
child rather than a sibling, so the two asymmetries skewed flex
centering.
Solution:
Symmetrize the button’s inline padding and reset the in-combobox
arrow’s inline margins so justify-content: center places the
triangle at the button’s true center.
Signed-off-by: Darshan-upadhyay1110 <darshan....@collabora.com>
Change-Id: I4a9db28b1b04323416e9c788973feaf797b7374c
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/2973
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index bf370bde1cef..d257c9962eb9 100644
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -1380,7 +1380,8 @@ img.context-menu-icon {
}
.ui-combobox .ui-listbox-arrow {
- margin-inline-start: -8px;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
}
:dir(rtl) .ui-listbox-arrow {
@@ -1420,8 +1421,8 @@ img.context-menu-icon {
justify-content: center;
border-inline-start: 1px solid var(--color-border);
background-color: transparent;
- padding-left: 20px;
- border : none;
+ padding-inline: 10px;
+ border: none;
}
.ui-combobox-button:hover {
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index b1a0a4a768ad..d122746d6950 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -457,7 +457,7 @@ button.leaflet-control-search-next
color: var(--color-text-darker);
}
#toolbar-up .ui-combobox-button {
- padding-left: 10px;
+ padding-inline: 5px;
}
#fontsizecombobox-input-context-toolbar {
width: 55px !important;
"Méven Car (via cogerrit)"
9:26 AM (8 hours ago) 9:26 AM
to collaboraon...@googlegroups.com
browser/css/menubar.css | 29 ++++++++++++++++++++---------
1 file changed, 20 insertions(+), 9 deletions(-)
New commits:
commit 6c32bff405c4c4719ca679875453914a09ca5e68
Author: Méven Car <meve...@collabora.com>
AuthorDate: Thu May 21 14:48:22 2026 +0200
menubar: stop the Collabora logo from flashing on hover in compact mode
#document-header > a.document-logo lives inside .lo-menu, so it
matched the generic `.lo-menu a:hover` and `.lo-menu > li > a:hover`
rules. Both used the `background:` shorthand and wiped the
background-image, while the second one also added a 1px bottom
border that nudged the box. Smartmenus' library rule
`.sm-simple a:hover { background: #eeeeee }` does the same wipe
plus resets background-size to auto, which made the SVG grow to
fill the larger box on hover.
Three changes:
- Swap the two `.lo-menu a(:hover|:focus|:active)` rules from the
`background:` shorthand to `background-color:` so they no longer
wipe background-image/size/repeat/position for any menu entry.
- Indirect the icon URL through `--doc-icon-url` on the writer /
calc / impress / draw icon classes. The shared `.document-logo`
rule reads it via background-image: var(--doc-icon-url), which
covers both the classic toolbar and the notebookbar (where the
logo sits outside .lo-menu).
- Add a single `.lo-menu > #document-header > a.document-logo`
rule re-stating background-color / background-* / border /
padding for every interactive state. The id in the selector
raises specificity above .sm-simple a:hover, so the values win
on their own.
Signed-off-by: Méven Car <meve...@collabora.com>
Change-Id: Ic9f3478d17b31b82826212478f1dc9b2850a42a3
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/3070
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Pedro Silva <pedro...@collabora.com>
diff --git a/browser/css/menubar.css b/browser/css/menubar.css
index 9682cd4d80cc..20c4c274c28b 100644
--- a/browser/css/menubar.css
+++ b/browser/css/menubar.css
@@ -34,6 +34,7 @@
position: relative;
width: 30px;
height: 30px;
+ background-image: var(--doc-icon-url);
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center;
@@ -254,7 +255,7 @@ nav.hasnotebookbar [id^='save'].saved::after {
color: var(--color-main-text);
}
.lo-menu a:hover, .lo-menu a:focus, .lo-menu a:active, .lo-menu a.highlighted {
- background: var(--color-background-darker);
+ background-color: var(--color-background-darker);
color: var(--color-text-darker);
}
.lo-menu > li, .lo-menu > li > .disabled {
@@ -266,11 +267,24 @@ nav.hasnotebookbar [id^='save'].saved::after {
color: var(--color-text-light);
}
.lo-menu > li > a:hover, .lo-menu > li > a:focus, .lo-menu > li > a:active, .lo-menu > li > a.highlighted {
- background: var(--color-background-darker);
+ background-color: var(--color-background-darker);
color: var(--color-text-darker);
border-color: var(--color-border-darker);
border-bottom: 1px solid var(--color-border-darker);
}
+.lo-menu > #document-header > a.document-logo,
+.lo-menu > #document-header > a.document-logo:hover,
+.lo-menu > #document-header > a.document-logo:focus,
+.lo-menu > #document-header > a.document-logo:active,
+.lo-menu > #document-header > a.document-logo.highlighted {
+ background-color: transparent;
+ background-image: var(--doc-icon-url);
+ background-size: 16px 16px;
+ background-repeat: no-repeat;
+ background-position: center;
+ border: 1px solid transparent;
+ padding: var(--spacing-m);
+}
.lo-menu > li > a.highlighted {
border-bottom-color: var(--color-border-dark);
}
@@ -416,22 +430,19 @@ nav.hasnotebookbar [id^='save'].saved::after {
}
.writer-icon-img {
- background-image: url('images/x-office-document.svg');
+ --doc-icon-url: url('images/x-office-document.svg');
}
.calc-icon-img {
- background-image: url('images/x-office-spreadsheet.svg');
+ --doc-icon-url: url('images/x-office-spreadsheet.svg');
}
.impress-icon-img {
- background-image: url('images/x-office-presentation.svg');
+ --doc-icon-url: url('images/x-office-presentation.svg');
}
.draw-icon-img {
- background-image: url('images/x-office-drawing.svg');
- background-size: 16px 16px;
- background-repeat: no-repeat;
- background-position: center;
+ --doc-icon-url: url('images/x-office-drawing.svg');
}
#menu-last-mod a {
1 file changed, 20 insertions(+), 9 deletions(-)
New commits:
commit 6c32bff405c4c4719ca679875453914a09ca5e68
Author: Méven Car <meve...@collabora.com>
AuthorDate: Thu May 21 14:48:22 2026 +0200
Commit: Pedro Pinto Silva <pedro...@collabora.com>
CommitDate: Mon May 25 13:25:15 2026 +0000
menubar: stop the Collabora logo from flashing on hover in compact mode
#document-header > a.document-logo lives inside .lo-menu, so it
matched the generic `.lo-menu a:hover` and `.lo-menu > li > a:hover`
rules. Both used the `background:` shorthand and wiped the
background-image, while the second one also added a 1px bottom
border that nudged the box. Smartmenus' library rule
`.sm-simple a:hover { background: #eeeeee }` does the same wipe
plus resets background-size to auto, which made the SVG grow to
fill the larger box on hover.
Three changes:
- Swap the two `.lo-menu a(:hover|:focus|:active)` rules from the
`background:` shorthand to `background-color:` so they no longer
wipe background-image/size/repeat/position for any menu entry.
- Indirect the icon URL through `--doc-icon-url` on the writer /
calc / impress / draw icon classes. The shared `.document-logo`
rule reads it via background-image: var(--doc-icon-url), which
covers both the classic toolbar and the notebookbar (where the
logo sits outside .lo-menu).
- Add a single `.lo-menu > #document-header > a.document-logo`
rule re-stating background-color / background-* / border /
padding for every interactive state. The id in the selector
raises specificity above .sm-simple a:hover, so the values win
on their own.
Signed-off-by: Méven Car <meve...@collabora.com>
Change-Id: Ic9f3478d17b31b82826212478f1dc9b2850a42a3
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/3070
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Pedro Silva <pedro...@collabora.com>
diff --git a/browser/css/menubar.css b/browser/css/menubar.css
index 9682cd4d80cc..20c4c274c28b 100644
--- a/browser/css/menubar.css
+++ b/browser/css/menubar.css
@@ -34,6 +34,7 @@
position: relative;
width: 30px;
height: 30px;
+ background-image: var(--doc-icon-url);
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center;
@@ -254,7 +255,7 @@ nav.hasnotebookbar [id^='save'].saved::after {
color: var(--color-main-text);
}
.lo-menu a:hover, .lo-menu a:focus, .lo-menu a:active, .lo-menu a.highlighted {
- background: var(--color-background-darker);
+ background-color: var(--color-background-darker);
color: var(--color-text-darker);
}
.lo-menu > li, .lo-menu > li > .disabled {
@@ -266,11 +267,24 @@ nav.hasnotebookbar [id^='save'].saved::after {
color: var(--color-text-light);
}
.lo-menu > li > a:hover, .lo-menu > li > a:focus, .lo-menu > li > a:active, .lo-menu > li > a.highlighted {
- background: var(--color-background-darker);
+ background-color: var(--color-background-darker);
color: var(--color-text-darker);
border-color: var(--color-border-darker);
border-bottom: 1px solid var(--color-border-darker);
}
+.lo-menu > #document-header > a.document-logo,
+.lo-menu > #document-header > a.document-logo:hover,
+.lo-menu > #document-header > a.document-logo:focus,
+.lo-menu > #document-header > a.document-logo:active,
+.lo-menu > #document-header > a.document-logo.highlighted {
+ background-color: transparent;
+ background-image: var(--doc-icon-url);
+ background-size: 16px 16px;
+ background-repeat: no-repeat;
+ background-position: center;
+ border: 1px solid transparent;
+ padding: var(--spacing-m);
+}
.lo-menu > li > a.highlighted {
border-bottom-color: var(--color-border-dark);
}
@@ -416,22 +430,19 @@ nav.hasnotebookbar [id^='save'].saved::after {
}
.writer-icon-img {
- background-image: url('images/x-office-document.svg');
+ --doc-icon-url: url('images/x-office-document.svg');
}
.calc-icon-img {
- background-image: url('images/x-office-spreadsheet.svg');
+ --doc-icon-url: url('images/x-office-spreadsheet.svg');
}
.impress-icon-img {
- background-image: url('images/x-office-presentation.svg');
+ --doc-icon-url: url('images/x-office-presentation.svg');
}
.draw-icon-img {
- background-image: url('images/x-office-drawing.svg');
- background-size: 16px 16px;
- background-repeat: no-repeat;
- background-position: center;
+ --doc-icon-url: url('images/x-office-drawing.svg');
}
#menu-last-mod a {
"Andreas-Kainz (via cogerrit)"
9:33 AM (8 hours ago) 9:33 AM
to collaboraon...@googlegroups.com
browser/css/toolbar.css | 2 +-
Author: Andreas Kainz <kai...@gmail.com>
AuthorDate: Sat May 2 01:23:27 2026 +0200
Statusbar Zoom switch when click multipage zoom > 100% to < 100%
Change-Id: I910082b7b395f659356c9cd3e0a75e27943d7d9e
Signed-off-by: Andreas-Kainz <kai...@gmail.com>
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1876
index d122746d6950..4e43c987659d 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -171,7 +171,7 @@
margin-top: 3px;
}
#toolbar-down #zoom {
- min-width: 43px;
+ min-width: 56px;
}
#toolbar-down #zoom .unolabel::after {
content: '%';
1 file changed, 1 insertion(+), 1 deletion(-)
New commits:
commit 7ab16c6d3e89fbfee25b23a5fbf340095d67d4d0
New commits:
Author: Andreas Kainz <kai...@gmail.com>
AuthorDate: Sat May 2 01:23:27 2026 +0200
Commit: Pedro Pinto Silva <pedro...@collabora.com>
CommitDate: Mon May 25 13:33:28 2026 +0000
Statusbar Zoom switch when click multipage zoom > 100% to < 100%
Change-Id: I910082b7b395f659356c9cd3e0a75e27943d7d9e
Signed-off-by: Andreas-Kainz <kai...@gmail.com>
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1876
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Pedro Silva <pedro...@collabora.com>
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
Reviewed-by: Pedro Silva <pedro...@collabora.com>
index d122746d6950..4e43c987659d 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -171,7 +171,7 @@
margin-top: 3px;
}
#toolbar-down #zoom {
- min-width: 43px;
+ min-width: 56px;
}
#toolbar-down #zoom .unolabel::after {
content: '%';
Reply all
Reply to author
Forward
0 new messages