strepsirrhini/libreoffice-online
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
libreoffice-online/browser/css/btns.css

95 lines
2.1 KiB
CSS
Raw Normal View History

Don't load btn hover status CSS rules when on mobile Better to make sure we only use those on desktop. Otherwise, a tap can trigger undesirable rules (changing bg etc) Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I838328a55ee8943eccbbe8d69b99f76640fb3a69
2022-08-31 06:23:57 -05:00
/* For btns hover status see device-desktop.css */
Dialog style update bottom buttons are better align with buttons get hover effect with correct color vars display: flex; and justify-content: space-between; dialog get a border and a box-shadow widget-header use --color-background-darker colors Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: I1e77434b1d4fc166a22a9774bb3168852456d3d3
2022-02-12 16:25:01 -06:00
.jsdialog *[disabled] {
JS btn: fix disabled status With changes from 76121778cac405508839484bae120dfa78a70a61 - We started to overwrite default user agent styles and with it decreasing the difference between disabled and enabled buttons making it very difficult to distinguish between the two. - Also border width was set to different values (disabled btn getting it from our stylesheet and enabled from browsers styles) causing the btn to "jump" in size and position when changing between states Fix those and add new css vars for btns so to avoid mistakes in the future Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I3ec865ecbbff44c90357d1d6de44a2e6f633bc3f
2022-03-14 08:07:12 -05:00
color: var(--color-text-lighter);
Fix spinfieldcontainer and disabled .jsdialog items Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: Ie715f3829d42efd2536c5653127e9a143ce91147
2023-04-28 17:23:12 -05:00
border: 1px solid var(--color-border-lighter);
background: var(--color-background-lighter);
Dialog style update bottom buttons are better align with buttons get hover effect with correct color vars display: flex; and justify-content: space-between; dialog get a border and a box-shadow widget-header use --color-background-darker colors Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: I1e77434b1d4fc166a22a9774bb3168852456d3d3
2022-02-12 16:25:01 -06:00
}
jsdialog: add symbols support for buttons - symbols are standard images for buttons - are shown as images: "symbol_<SYMBOL_NAME>.svg" Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I034c07ad299376837f65726f7ec1bceabb50ba01
2022-04-09 15:41:06 -05:00
/*limit icon to button height*/
button.jsdialog img {
max-height: 100%;
}
Remove unused vex definitions. Signed-off-by: Gökay Şatır <gokaysatir@collabora.com> Change-Id: I16a5df46bced608952c22bf979808bc735645366
2023-03-16 03:01:32 -05:00
.annotation-btns-container {
Annotations: Fix cancel confirm btns flex CSS and add class for container This affects annotations (vex) and jsdialogs - Set annotations btns' container to flex so we can reduce CSS rules around specific buttons ---- Before we were relying solely on cancel button to change the layout, by setting it to flex and let ok/submit/confirm btn untouched. This was causing some inconsistencies plus it was forcing us to add CSS on a case by case instead of fixing the root cause Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ia4ab1de407ca7658242282181eeb215fb6dc0d99
2022-03-16 06:13:30 -05:00
display: flex;
flex-direction: row;
justify-content: end;
Allow buttons in vex dialogs to wrap ported from: PR: https://github.com/CollaboraOnline/online/pull/4976 In cases when the button text is too long or when using CO in, for example, DE language and when the length of the parent dialog was not enough the btns would not stack up, instead that would overlap. This would make reading those btns impossible. ![vex-btns-overlap](https://archive.org/download/csv-overlap-btn-labels/CSV-overlap-btn-labels.png) Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I801ea330db21add35d0a81466a1fba9501a61899
2022-07-04 09:13:27 -05:00
flex-wrap: wrap;
Annotations: Fix cancel confirm btns flex CSS and add class for container This affects annotations (vex) and jsdialogs - Set annotations btns' container to flex so we can reduce CSS rules around specific buttons ---- Before we were relying solely on cancel button to change the layout, by setting it to flex and let ok/submit/confirm btn untouched. This was causing some inconsistencies plus it was forcing us to add CSS on a case by case instead of fixing the root cause Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ia4ab1de407ca7658242282181eeb215fb6dc0d99
2022-03-16 06:13:30 -05:00
}
Don't use vex btn default btn CSS classes (rename) By Renaming .vex-dialog-button-primary -> .button-primary and .vex-dialog-button-secondary -> .button-secondary - So we can remove duplicity on CSS buttons - Easier to set vex primary and secondary button to use our css classes - This way there is no need to hunt those specific cases down. - Update cypress tests Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I82f4b33560367805eeeeb5aec9af8d1abd313788
2022-08-30 07:50:28 -05:00
.button-secondary,
Fix huge dropdown arrow of form control and missing button border Signed-off-by: Gülşah Köse <gulsah.kose@collabora.com> Change-Id: I752691d09195e0fc6e502736a5b809fe8d92aa50
2023-05-16 06:49:29 -05:00
button:not(.ui-tab):not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button) {
Reduce CSS selectors targeting buttons You can now, since 1db5e39ef7e3f4916e49fcb81815e4b9846a3579 got merged, rely solely on button-primary and button-secondary class. Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ic0eb08b443ab6c523d69e50df197eb0d3850fbd4
2022-08-30 06:57:55 -05:00
box-sizing: border-box;
JSDialog: style btns, add generic btns file and reuse, fix font-family.. Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ib4518c60a6304ac175290e5231ed25738c0d44ef
2020-12-08 05:23:14 -06:00
height: 32px;
line-height: 0em;
Dialog style update bottom buttons are better align with buttons get hover effect with correct color vars display: flex; and justify-content: space-between; dialog get a border and a box-shadow widget-header use --color-background-darker colors Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: I1e77434b1d4fc166a22a9774bb3168852456d3d3
2022-02-12 16:25:01 -06:00
color: var(--color-main-text);
font-size var instead of hardcoded numbers Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: Ib3879450d1114b92270f2b8c6a682b0472583c1b
2022-02-23 17:52:15 -06:00
font-size: var(--default-font-size);
JSDialog: style btns, add generic btns file and reuse, fix font-family.. Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ib4518c60a6304ac175290e5231ed25738c0d44ef
2020-12-08 05:23:14 -06:00
min-width: 62px;
Dialog style update bottom buttons are better align with buttons get hover effect with correct color vars display: flex; and justify-content: space-between; dialog get a border and a box-shadow widget-header use --color-background-darker colors Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: I1e77434b1d4fc166a22a9774bb3168852456d3d3
2022-02-12 16:25:01 -06:00
background-color: var(--color-background-dark);
Reduce CSS selectors targeting buttons You can now, since 1db5e39ef7e3f4916e49fcb81815e4b9846a3579 got merged, rely solely on button-primary and button-secondary class. Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ic0eb08b443ab6c523d69e50df197eb0d3850fbd4
2022-08-30 06:57:55 -05:00
border: 1px solid var(--color-btn-border);
Add Color Scheme Var's to dialog, popup widgets Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: I8f0170b181f88ed8e4b3f1b9a4303a9f21ab0083
2022-02-24 18:12:41 -06:00
border: 1px solid var(--color-border-dark);
Dialog style update bottom buttons are better align with buttons get hover effect with correct color vars display: flex; and justify-content: space-between; dialog get a border and a box-shadow widget-header use --color-background-darker colors Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: I1e77434b1d4fc166a22a9774bb3168852456d3d3
2022-02-12 16:25:01 -06:00
border-radius: var(--border-radius);
jsdialog: button box Change-Id: Ic0b2d36bb84b2521e2cb96fe1c754480f1fa3395 Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
2020-12-09 00:57:25 -06:00
margin: 5px;
JSDialog: make icon btns share existent styles, Fix dialog exceptions, use dialog ids Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I19b5de53085a22a516941f9e45a98853a80bdac7
2020-12-10 10:43:03 -06:00
vertical-align: middle;
jsdialog: use minial size of a dialog needed Use 'position: absolute' in jsdialog-window and jsdialog-container so we don't stretch the dialog. It will use minimal needed size. Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I7b38b9200e190cfc184bf4bfe8b7bd814c60d5a6
2023-05-10 04:11:33 -05:00
width: max-content;
JSDialog: style btns, add generic btns file and reuse, fix font-family.. Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ib4518c60a6304ac175290e5231ed25738c0d44ef
2020-12-08 05:23:14 -06:00
}
Don't use vex btn default btn CSS classes (rename) By Renaming .vex-dialog-button-primary -> .button-primary and .vex-dialog-button-secondary -> .button-secondary - So we can remove duplicity on CSS buttons - Easier to set vex primary and secondary button to use our css classes - This way there is no need to hunt those specific cases down. - Update cypress tests Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I82f4b33560367805eeeeb5aec9af8d1abd313788
2022-08-30 07:50:28 -05:00
.button-primary {
JSDialog: style btns, add generic btns file and reuse, fix font-family.. Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ib4518c60a6304ac175290e5231ed25738c0d44ef
2020-12-08 05:23:14 -06:00
height: 32px;
line-height: 0em;
btns.css use var colors Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: Ib431ad04a143779d5a6e40f705fbcd561a3adb9c
2022-03-12 04:37:06 -06:00
color: var(--color-primary-text);
JSDialog: style btns, add generic btns file and reuse, fix font-family.. Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ib4518c60a6304ac175290e5231ed25738c0d44ef
2020-12-08 05:23:14 -06:00
min-width: 62px;
btns.css use var colors Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: Ib431ad04a143779d5a6e40f705fbcd561a3adb9c
2022-03-12 04:37:06 -06:00
background-color: var(--color-primary);
border: 1px solid var(--color-primary-dark);
Add Color Scheme Var's to dialog, popup widgets Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: I8f0170b181f88ed8e4b3f1b9a4303a9f21ab0083
2022-02-24 18:12:41 -06:00
border-radius: var(--border-radius);
JSDialog: Autofilter: Fix font, Fix Ok btn, Fix search width, Fix submenu, Fix entries - Use existent font variable - Update btns acording to last changes and add missing margins - Make sure search input field occupies all available space - Submenu: Remove extra border as it has already one (since it's a box inside of a box without any other siblings) - Make sure entries inside of Autofilter do not have additional padding Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ia7cc4690b99f46976ed1f7590fbbc6fd606cf9f1
2020-12-09 08:30:10 -06:00
margin: 5px;
JSDialog: make icon btns share existent styles, Fix dialog exceptions, use dialog ids Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I19b5de53085a22a516941f9e45a98853a80bdac7
2020-12-10 10:43:03 -06:00
vertical-align: middle;
jsdialog: use minial size of a dialog needed Use 'position: absolute' in jsdialog-window and jsdialog-container so we don't stretch the dialog. It will use minimal needed size. Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I7b38b9200e190cfc184bf4bfe8b7bd814c60d5a6
2023-05-10 04:11:33 -05:00
width: max-content;
JSDialog: make icon btns share existent styles, Fix dialog exceptions, use dialog ids Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I19b5de53085a22a516941f9e45a98853a80bdac7
2020-12-10 10:43:03 -06:00
}
.jsdialog.ui-button-box.end {
margin-top: 8px;
Dialog style update bottom buttons are better align with buttons get hover effect with correct color vars display: flex; and justify-content: space-between; dialog get a border and a box-shadow widget-header use --color-background-darker colors Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: I1e77434b1d4fc166a22a9774bb3168852456d3d3
2022-02-12 16:25:01 -06:00
display: flex;
justify-content: space-between;
JSDialog: Fix listbox disabled value and style surrounding elements - radio buttons - label - listbox and listbox-arrow - make sure disable elements do not get hover styles Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Icb3f4171a431fe794c2a97848952219a6bb2bee0
2020-12-15 09:05:52 -06:00
}
JSDialog: Fix disabled btn Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I8f718371584d8fce1078179a2312f585ee8adcce
2020-12-14 03:41:25 -06:00
.jsdialog.ui-button-box button[disabled='disabled'] {
Color Var: btns.css use var colors Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: I7af79aeafd53039227d6aa8ad6f837c92b7f4a34
2022-02-27 03:50:34 -06:00
color: var(--color-text-lighter) !important;
background-color: var(--color-background-lighter) !important;
border-color: var(--color-border-lighter) !important;
jsdialog: style all buttons Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I919f4948962e378fcd4690ca9cfa73fa4a273146
2021-07-16 03:38:52 -05:00
}
jsdialog: don't show hidden buttons Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I9c63aad2884198b0977b9528849dc4c2f80d413b
2021-10-22 05:52:37 -05:00
.ui-button-box .jsdialog.ui-pushbutton:not(.hidden) {
jsdialog: style all buttons Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I919f4948962e378fcd4690ca9cfa73fa4a273146
2021-07-16 03:38:52 -05:00
display: initial !important;
jsdialog: fix buttons alignment Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: Ia5dbe5099bc65c01ab43eb720d676e4fd57c63f2
2021-07-28 02:55:38 -05:00
}
Fix disabled buttons inconsistencies Primary buttons, secondary buttons and others are getting styled differently for the same 'disabled' status. Plus, they are react on hover which can lead the user to wrongly think they are active. - Fix inconsistencies and make it clear that they are all disabled Example dialog: Find and replace Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I45be52ecda264d0af9a53a70c222d1047a3cdf73
2023-01-19 07:42:14 -06:00
.ui-pushbutton[disabled] {
color: var(--color-text-lighter) !important;
use css vars for disabled buttons Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: I8f88682fefb13a010dab89e758b077e2199fe6b0
2023-04-28 17:38:17 -05:00
background-color: var(--color-background-lighter) !important;
border: 1px solid var(--color-border-lighter) !important;
Fix disabled buttons inconsistencies Primary buttons, secondary buttons and others are getting styled differently for the same 'disabled' status. Plus, they are react on hover which can lead the user to wrongly think they are active. - Fix inconsistencies and make it clear that they are all disabled Example dialog: Find and replace Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I45be52ecda264d0af9a53a70c222d1047a3cdf73
2023-01-19 07:42:14 -06:00
}
.ui-pushbutton[disabled]:hover {
cursor: not-allowed !important;
use css vars for disabled buttons Signed-off-by: andreas kainz <kainz.a@gmail.com> Change-Id: I8f88682fefb13a010dab89e758b077e2199fe6b0
2023-04-28 17:38:17 -05:00
background: var(--color-background-darker) !important;
Fix disabled buttons inconsistencies Primary buttons, secondary buttons and others are getting styled differently for the same 'disabled' status. Plus, they are react on hover which can lead the user to wrongly think they are active. - Fix inconsistencies and make it clear that they are all disabled Example dialog: Find and replace Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I45be52ecda264d0af9a53a70c222d1047a3cdf73
2023-01-19 07:42:14 -06:00
}
jsdialog: fix buttons alignment (update) Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I25f85163e1dbdedbff4cdbf29f7a98e30d145cf1
2021-07-28 02:55:38 -05:00
/* button box */
jsdialog: simplify css for button box this fixes layout of 2 rows of button boxes, example: manage names in Calc Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I7fbafa4ab3a234e8406e25167ca533195fee51ba
2023-05-31 02:28:05 -05:00
.jsdialog.ui-button-box {
display: grid;
Add float logical values fallback for buttonboxes Before this commit, browsers such as chrome (without enabling experimental features) were not supporting those float values Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I2530e7bf46d161ac980559c181a4e03947edbeee
2023-01-05 04:00:22 -06:00
}
jsdialog: fix buttons alignment Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: Ia5dbe5099bc65c01ab43eb720d676e4fd57c63f2
2021-07-28 02:55:38 -05:00
.jsdialog.ui-button-box-right {
display: flex;
jsdialog: simplify css for button box this fixes layout of 2 rows of button boxes, example: manage names in Calc Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I7fbafa4ab3a234e8406e25167ca533195fee51ba
2023-05-31 02:28:05 -05:00
justify-self: end;
JSDialog: add margin offsets to buttonbox L and R Fixes the misalignment, before this commit: the safe margin present in every button was correct but for the cases where the button is placed to the further left or further right edge of the dialog -> it looked misaligned Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ibadeaf6cf736b07229d60f99b5af72865f26e23f
2023-01-03 05:17:27 -06:00
margin-inline-end: -5px;
jsdialog: fix buttons alignment (update) Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I25f85163e1dbdedbff4cdbf29f7a98e30d145cf1
2021-07-28 02:55:38 -05:00
}
.jsdialog.ui-button-box-left {
jsdialog: simplify css for button box this fixes layout of 2 rows of button boxes, example: manage names in Calc Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I7fbafa4ab3a234e8406e25167ca533195fee51ba
2023-05-31 02:28:05 -05:00
display: flex;
justify-self: start;
JSDialog: add margin offsets to buttonbox L and R Fixes the misalignment, before this commit: the safe margin present in every button was correct but for the cases where the button is placed to the further left or further right edge of the dialog -> it looked misaligned Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ibadeaf6cf736b07229d60f99b5af72865f26e23f
2023-01-03 05:17:27 -06:00
margin-inline-start: -5px;
browser: update CSS class names rename loleaflet -> cool Change-Id: Ia9c14ccef395c0a2290b083396e35c2058342dbf Signed-off-by: Henry Castro <hcastro@collabora.com>
2021-11-03 06:49:45 -05:00
}
Reference in a new issue Copy permalink