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

102 lines
2.5 KiB
CSS
Raw Normal View History

Vex and jsdialog btns use the same btn font Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Idf286a6f3356b1827421540167b23931731519fd
2021-02-17 08:14:37 -06:00
.jsdialog-container .ui-button-box button,
.vex.vex-theme-plain .vex-dialog-button {
font-family: var(--jquery-ui-font);
text-transform: full-size-kana;
}
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);
border: 1px solid var(--color-btn-border-dis);
filter: grayscale(1);
opacity: 0.7;
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%;
}
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
.annotation-btns-container,
.vex-dialog-buttons {
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
}
Refactor commentSection buttons to avoid using multiple css classes This commit does not change functionality Add generic 'button-secondary' and 'button-primary' to buttons - so we don't need to hunt each button from annotations (cancel, save, reply) additional plus: targeting any css class that has button-primary allow to target in the future cases like vex-dialog-button-primary Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ie70867e3248ff70afdbe154593e4d02ec24c46df
2022-03-23 12:57:50 -05:00
[class*='button-secondary'],
Vex btns: secondary re-use btn style Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ib956440e4d79254c8cb5323a375046e4d4bc191e
2021-02-16 06:19:50 -06:00
.vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-secondary {
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: 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
}
Refactor commentSection buttons to avoid using multiple css classes This commit does not change functionality Add generic 'button-secondary' and 'button-primary' to buttons - so we don't need to hunt each button from annotations (cancel, save, reply) additional plus: targeting any css class that has button-primary allow to target in the future cases like vex-dialog-button-primary Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ie70867e3248ff70afdbe154593e4d02ec24c46df
2022-03-23 12:57:50 -05:00
[class*='button-secondary']:hover,
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
.ui-pushbutton.jsdialog:not(#ok):not(.sidebar):hover,
.ui-button-box.jsdialog #cancel:hover,
.cell.jsdialog > button:not(#ok):hover,
.ui-button-box.jsdialog button:not(#ok):hover,
.vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-secondary:hover {
cursor: pointer;
color: var(--color-text-darker) !important;
Switch hover color to a lighter color We need to use a lighter/ highlight color for hover so we then be able to use darker backgrounds for disabled status and even pressed status (active) Also this automatically fixes the hover status for on/off switchers on the toolbar (e.g.:sidebar trigger). Now they also react onmouseover With this change Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I5efc41e3e7d13c10cf2d714acefee08f99e6af1a
2022-03-23 13:39:02 -05:00
background-color: var(--color-background-lighter) !important;
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: 1px solid var(--color-border-darker);
}
Refactor commentSection buttons to avoid using multiple css classes This commit does not change functionality Add generic 'button-secondary' and 'button-primary' to buttons - so we don't need to hunt each button from annotations (cancel, save, reply) additional plus: targeting any css class that has button-primary allow to target in the future cases like vex-dialog-button-primary Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ie70867e3248ff70afdbe154593e4d02ec24c46df
2022-03-23 12:57:50 -05:00
[class*='button-primary'],
Fix Vex btns: apply existent btn style Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: I7787588ccce5ce4042cdd553b781114cf0627fbe
2021-02-16 05:29:52 -06:00
.vex.vex-theme-plain .vex-dialog-button.vex-dialog-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;
}
Add missing hover state for primary buttons Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ic1fea0b40bbbcbb6b77bfe29b3df1786da53b7e9
2022-03-23 13:05:48 -05:00
[class*='button-primary']:hover {
background-color: var(--color-primary-lighter);
}
Vex btns: secondary re-use btn style Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ib956440e4d79254c8cb5323a375046e4d4bc191e
2021-02-16 06:19:50 -06:00
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons {
margin-right: -5px; /* Account for child element (button)'s margin */
}
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
}
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: 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;
RTL: order of buttons in dialog Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I72707a9bee4d7c06764dbe209bd3aced6ea48468
2021-12-22 05:47:21 -06:00
float: inline-end;
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 {
RTL: order of buttons in dialog Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I72707a9bee4d7c06764dbe209bd3aced6ea48468
2021-12-22 05:47:21 -06:00
float: inline-start;
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