libreoffice-online/loleaflet/css/jsdialogs.css
Pedro Pinto Silva 608326b61e MacroSelectorDialog: Style Description
- Align description group with the Macro name group
  as it's related to that
- Ensure paragraph is set with the right capitalization

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I25d4a1f811225f6efd46bfa0733635fa4544281f
2021-03-15 13:56:00 +01:00

615 lines
11 KiB
CSS

/* JSDialog */
.jsdialog.root-container {
margin: .5em 1em; /*same as in .ui-dialog */
}
.jsdialog-container {
position: absolute;
z-index: 1105;
}
.jsdialog-container .ui-dialog-content {
background-color: white !important;
font-family: var(--jquery-ui-font);
}
.jsdialog.vertical p, .ui-frame-label {
margin: 0px;
color: #666;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}
.jsdialog.ui-separator.vertical {
height: 100%;
padding-left: 6px;
/* border-left: 1px dashed #888; */
background-image: linear-gradient(#888 22%, rgba(255,255,255,0) 0%);
background-position: left center;
background-size: 1px 14px;
background-repeat: repeat-y;
box-shadow: inset 0 34px 0 0 white;
}
.jsdialog.ui-separator.horizontal {
width: 100%;
padding-top: 6px;
/* border-left: 1px dashed #888; */
background-image: linear-gradient(#888 22%, rgba(255,255,255,0) 0%);
background-position: center top;
background-size: 14px 1px;
background-repeat: repeat-x;
box-shadow: inset 0 34px 0 0 white;
}
td.jsdialog:hover *,
#table-box3:hover p {
color: #333;
}
.jsdialog.row {
display: table-row;
}
.jsdialog.cell {
display: table-cell;
vertical-align: middle;
}
td.jsdialog .jsdialog.cell,
[id^='table-dialog-action_area'] .jsdialog.cell{
padding: 4px;
}
.jsdialog.vertical {
width: max-content;
}
.jsdialog.vertical:not([id^='table-dialog-action_area']) > .jsdialog.row,
td.jsdialog > [id^='table-box'] {
display: table;
width: 100%;
}
.jsdialog.ui-alignment {
margin: 0px;
display: block;
}
.jsdialog.ui-grid {
border-spacing: 0px;
}
/* Expander */
.jsdialog.ui-expander {
box-shadow: 0 1px 0px 0 #f1f1f1;
}
#options.ui-expander {
margin-top: 8px;
}
.ui-expander-label {
color: #666;
}
.ui-expander-label::before,
.ui-treeview-expandable > .ui-treeview-expander::before {
content: '>';
color: transparent;
margin-right: 5px;
background: transparent url('images/lc_menu_chevron.svg') no-repeat center right;
}
.ui-expander-label.expanded::before,
.ui-treeview-expandable.collapsed > .ui-treeview-expander::before {
content: 'V';
margin: 0px;
position: absolute;
transform: rotate(90deg);
left: 16px;
background: transparent url('images/lc_menu_chevron.svg') no-repeat center;
filter: brightness(0.5);
}
.ui-treeview-expandable > .ui-treeview-expander::before {
margin-right: 6px !important;
display: inline-block;
position: relative !important;
left: 0px !important;
}
.ui-expander-label.expanded {
padding-left: 14px; /*adding extra padding to account for image absolute position*/
color: #444;
}
.ui-expander:hover {
cursor: pointer;
}
.ui-expander-content > .root-container.jsdialog {
margin: 4px 0px;
}
/* TreeView */
.ui-treeview {
display: block;
border: 1px solid silver;
border-radius: 2px;
overflow-y: auto;
overflow-x: hidden;
}
.ui-treeview.disabled {
background-color: silver;
color: var(--gray-light-txt--color) !important;
}
.ui-treeview-body {
display: block;
min-height: 100px;
min-width: 100px;
max-height: 150px;
width: 100%;
}
.ui-treeview-cell.with-sub-dialog {
cursor: context-menu;
}
.ui-treeview-expandable.collapsed + ul {
display: none;
}
.ui-treeview-body > ul {
margin: 0;
padding: 0;
}
.ui-treeview-body ul {
list-style-type: none;
}
.ui-treeview-entry {
display: flex;
width: 100%;
}
.ui-treeview-entry:not(.autofilter) {
padding-left: 2px;
}
input[type='checkbox'].autofilter, .jsdialog input[type='checkbox'] {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #f4f4f4;
margin: 1px 8px;
box-shadow: inset 0px 0px 0px 1px gray;
}
input[type='checkbox']:checked.autofilter, .jsdialog input[type='checkbox']:checked {
border-color: transparent;
background: url('images/popup_select_current.svg') no-repeat center;
box-shadow: none;
}
.ui-textarea.jsdialog {
max-width: 400px;
}
.ui-treeview-entry span {
width: 100%;
}
.ui-treeview-entry.mobile-wizard {
line-height: 40px;
padding-left: 20px;
}
.ui-treeview-entry:hover,
.ui-treeview-entry.selected,
.ui-listview-entry:hover,
.ui-listview-entry.selected {
background-color: silver;
}
#mobile-wizard .ui-treeview-body input[type='checkbox'] {
float: none;
vertical-align: middle;
}
.ui-treeview.droptarget {
border: 1px solid #888;
}
.ui-treeview.droptarget:hover{
border: 1px solid #888;
box-shadow: 0 0 2px 0 #777;
}
/* input text */
.jsdialog.ui-edit {
line-height: 28px;
max-height: 32px;
}
#search_edit.ui-edit.autofilter {
width: 100%;
width: -moz-available;
width: -webkit-fill-available;
width: fill-available;
}
/* checkbox */
.jsdialog.checkbutton {
white-space: nowrap;
}
.jsdialog.checkbutton input,
.jsdialog.checkbutton label {
vertical-align: middle;
}
.jsdialog.checkbutton label {
padding: 0px 2px;
}
/* Radio button */
.jsdialog input[type='radio'] {
vertical-align: middle;
margin: 0px 4px 0px 0px;
}
.jsdialog .radiobutton > label {
vertical-align: middle;
}
.jsdialog input[type='radio'][disabled='disabled'] ~ label {
color: var(--gray-light-txt--color);
}
/* listbox */
.jsdialog.ui-listbox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-width: 100px;
height: 32px;
line-height: normal;
font-size: 14px;
font-family: var(--jquery-ui-font);
border: 1px solid #CCC;
border-radius: 3px;
padding-right: 2em;
padding-left: 0.4em;
margin: 2px 0px;
background-color: #F1F1F1;
}
.ui-listbox::-ms-expand {
display: none;
}
.ui-listbox-arrow {
content: '';
background: url('images/jquery-ui-lightness/ui-icons_222222_256x240.png') no-repeat #F1F1F1;
background-position: -67px -18px;
display: inline-block;
width: 11px;
height: 11px;
position: relative;
top: 1px;
left: -18px;
cursor: pointer;
pointer-events: none;
}
.ui-listbox[disabled='disabled'] ~ .ui-listbox-arrow {
opacity: 0.5;
cursor: auto;
}
/* button box */
.jsdialog.ui-button-box-right {
float: right;
}
.jsdialog.ui-button-box-left {
float: left;
}
/* Icon View */
.ui-iconview {
overflow: scroll;
display: inline-flex;
flex-wrap: wrap;
justify-content: space-between;
}
.ui-iconview.mobile-wizard {
justify-content: space-around;
}
.ui-iconview-entry {
float: left;
text-align: center;
position: relative;
flex-direction: row;
align-self: center;
border: 2px solid transparent;
border-radius: 3px;
flex: 1;
}
.ui-iconview-entry.selected {
border: 2px solid gray;
}
/* Autofilter dropdown */
.autofilter.row {
display: table-row;
}
.autofilter.cell {
display: table-cell;
vertical-align: middle;
padding: 2px;
}
.autofilter-container {
background-color: white;
border: solid 1px silver;
position: absolute;
z-index: 1105;
padding: 10px;
font-family: var(--jquery-ui-font);
}
.autofilter-container #menu.ui-treeview .ui-treeview-body {
height: auto;
width: 100%;
padding: 8px 1px;
}
.autofilter-container #toggle_all.checkbutton {
display: flex;
}
.autofilter-container #menu + #search_edit {
display: block;
}
#mobile-wizard #toggle_all.checkbutton + #select_current,
.autofilter-container #select_current {
background: url('images/popup_select_current.svg') no-repeat center;
}
.autofilter-container #select_current {
height: 16px;
width: 16px;
margin: 8px;
border: none;
}
#mobile-wizard #toggle_all.checkbutton + #select_current + #unselect_current,
.autofilter-container #unselect_current {
background: url('images/popup_unselect_current.svg') no-repeat center;
}
.autofilter-container #unselect_current {
height: 16px;
width: 16px;
margin: 8px 8px 8px 0px;
border: none;
}
.autofilter-container #toggle_all.checkbutton > label,
.autofilter-container #toggle_all.checkbutton > input {
height: 18px;
line-height: normal;
}
.autofilter-container #check_tree_box.ui-treeview .ui-treeview-body,
.autofilter-container #check_list_box.ui-treeview .ui-treeview-body {
width: 100%;
min-width: 200px;
max-height: 150px;
}
.autofilter-container-submenu > .autofilter-container {
padding: 0px;
}
.autofilter-container-submenu .autofilter.root-container .ui-treeview {
border-color: transparent;
}
/* Reference buttons */
.jsdialog-container #source-button,
.jsdialog-container #destination-button,
.jsdialog-container #refbutton,
.jsdialog-container #assign,
.jsdialog-container #output-range-button,
.jsdialog-container #input-range-button {
background: url('images/refinp1.svg') no-repeat center;
}
.jsdialog-container.collapsed #source-button,
.jsdialog-container.collapsed #destination-button,
.jsdialog-container.collapsed #refbutton,
.jsdialog-container.collapsed #assign,
.jsdialog-container.collapsed #output-range-button,
.jsdialog-container.collapsed #input-range-button {
background: url('images/refinp2.svg') no-repeat center;
}
/* Word count dialog */
#label9, #documentlabel-mobile {
color: #636363 !important;
}
#documentlabel-mobile {
padding-top: 10px;
}
#wordslabel,
#inclspaceslabel,
#exclspaceslabel,
#cjkcharsft,
#wordslabel2,
#inclspaceslabel2,
#exclspaceslabel2,
#cjkcharsft2
{
float: left;
clear: left;
width: 70%;
color: #636363 !important;
}
#selectwords,
#selectchars,
#selectcharsnospaces,
#selectcjkchars,
#docwords,
#docchars,
#doccharsnospaces,
#doccjkchars
{
float: right;
clear: right;
width: 20%;
border-bottom: none;
color: #636363 !important;
}
/* Dialog-specific excelptions*/
#DefineNameDialog .cell.jsdialog,
#ManageNamesDialog .cell.jsdialog {
padding-left: 0px;
}
#table-Selection .jsdialog.ui-listbox {
margin: 8px 2px 2px;
}
#SelectSourceDialog .ui-frame-label {
display: none;
}
#hideitems {
border: none;
}
/* Fontwork dialog */
#FontworkGalleryDialog #ctlFavoriteswin {
width: 400px;
height: 400px;
}
#FontworkGalleryDialog #label1 {
display: none;
}
/* Macros dialos */
#MacroWarnMedium p {
max-width: 400px;
color: #333;
text-transform: none;
}
#MacroSelectorDialog #helpmacro {
margin-bottom: 8px;
text-transform: none;
font-size: 12px;
}
#MacroSelectorDialog #table-box2 {
width: auto;
}
#MacroSelectorDialog #table-box2 > .row > .cell.jsdialog {
width: auto;
}
#MacroSelectorDialog #table-box2 > .row > .cell.jsdialog:first-of-type {
width: 47%;
}
#MacroSelectorDialog #table-frame1 {
width: auto;
margin-left: 47%;
}
#MacroSelectorDialog #description {
text-transform: none;
}
#MacroSelectorDialog #table-frame3 {
width: 100%;
}
#MacroSelectorDialog #table-frame3 .jsdialog.ui-alignment,
#MacroSelectorDialog #table-frame2,
#MacroSelectorDialog #table-frame2 .vertical.jsdialog.ui-alignment {
width: auto;
}
#MacroSelectorDialog #commands,
#MacroSelectorDialog #categories {
height: 150px;
}
#MacroSelectorDialog #categories {
box-sizing: border-box;
border-color: transparent;
padding-right: 8px
}
#MacroSelectorDialog #categories .ui-treeview-entry.selected {
color: #222;
background-color: #dfdfdf;
border-radius: 3px;
border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
}
#MacroSelectorDialog #categories .ui-treeview-entry.selected::after {
margin-right: -6px;
margin-right: -11px;
color: #dfdfdf;
content: '\23F5';
font-size: 16px;
}
#MacroSelectorDialog #categories .ui-treeview-entry {
color: #555;
}
#MacroSelectorDialog #categories .ui-treeview-entry:hover {
box-shadow: inset -6px 0 0 white;
}
#MacroSelectorDialog #categories > tbody > ul > li > ul .ui-treeview-expandable.selected > .ui-treeview::before {
/* visibility: hidden; hide when javascript sets properly expanders*/
}
#MacroSelectorDialog #categories .ui-treeview-entry:hover, .ui-treeview-entry.selected, .ui-listview-entry:hover, .ui-listview-entry.selected {
background-color: #dfdfdf;
}
#MacroSelectorDialog #table-frame3 .jsdialog.ui-treeview-entry {
padding-left: 8px;
}