libreoffice-online/browser/css/btns.css
Pedro Pinto Silva 2e863c37ee 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-09-06 17:01:21 +02:00

86 lines
1.9 KiB
CSS

/* For btns hover status see device-desktop.css */
.jsdialog-container .ui-button-box button,
.vex.vex-theme-plain .vex-dialog-button {
font-family: var(--jquery-ui-font);
text-transform: full-size-kana;
}
.jsdialog *[disabled] {
color: var(--color-text-lighter);
border: 1px solid var(--color-btn-border-dis);
filter: grayscale(1);
opacity: 0.7;
}
/*limit icon to button height*/
button.jsdialog img {
max-height: 100%;
}
.annotation-btns-container,
.vex-dialog-buttons {
display: flex;
flex-direction: row;
justify-content: end;
flex-wrap: wrap;
}
.button-secondary,
button:not(.ui-corner-all):not(.button-primary) {
box-sizing: border-box;
height: 32px;
line-height: 0em;
color: var(--color-main-text);
font-size: var(--default-font-size);
min-width: 62px;
background-color: var(--color-background-dark);
border: 1px solid var(--color-btn-border);
border: 1px solid var(--color-border-dark);
border-radius: var(--border-radius);
margin: 5px;
vertical-align: middle;
}
.button-primary {
height: 32px;
line-height: 0em;
color: var(--color-primary-text);
min-width: 62px;
background-color: var(--color-primary);
border: 1px solid var(--color-primary-dark);
border-radius: var(--border-radius);
margin: 5px;
vertical-align: middle;
}
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons {
margin-right: -5px; /* Account for child element (button)'s margin */
}
.jsdialog.ui-button-box.end {
margin-top: 8px;
display: flex;
justify-content: space-between;
}
.jsdialog.ui-button-box button[disabled='disabled'] {
color: var(--color-text-lighter) !important;
background-color: var(--color-background-lighter) !important;
border-color: var(--color-border-lighter) !important;
}
.ui-button-box .jsdialog.ui-pushbutton:not(.hidden) {
display: initial !important;
}
/* button box */
.jsdialog.ui-button-box-right {
display: flex;
float: inline-end;
}
.jsdialog.ui-button-box-left {
float: inline-start;
}