d6ddae75b2
We can set those so, the total size is 28px (same as the grid cell) while keeping svg 16px size this in turn centers the icon within its parent Also we can then use the same 5px (that we use for normal button margin) for the column-gap so everything aligns well Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ib13a376fe71e308f9146c291acfbe3a941a4ef57
303 lines
6.8 KiB
CSS
303 lines
6.8 KiB
CSS
/* general */
|
|
|
|
.sidebar * {
|
|
font-family: var(--jquery-ui-font);
|
|
text-transform: none !important;
|
|
}
|
|
|
|
img.sidebar.ui-image {
|
|
/* Images that are not buttons (e.g. spinfield)
|
|
16px + 6px + 6px = 28px, same height as grid cell */
|
|
padding: 6px;
|
|
}
|
|
|
|
.sidebar .ui-content .unobutton {
|
|
margin: 0;
|
|
}
|
|
|
|
#document-container:not(.mobile) + #sidebar-dock-wrapper {
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
[data-userinterfacemode='classic'] #document-container:not(.mobile) + #sidebar-dock-wrapper,
|
|
#document-container.spreadsheet-doctype:not(.mobile) + #sidebar-dock-wrapper {
|
|
border-inline-start: 1px solid var(--color-border);
|
|
}
|
|
.sidebar .menu-entry-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
|
|
/* expander section header */
|
|
|
|
.sidebar.ui-expander {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.sidebar.ui-expander-label {
|
|
color: var(--color-main-text);
|
|
font-size: var(--header-font-size);
|
|
line-height: var(--header-height);
|
|
padding-inline: 8px;
|
|
}
|
|
|
|
.ui-expander-icon-right .sidebar.unotoolbutton {
|
|
margin: 0px !important;
|
|
}
|
|
|
|
.ui-expander.jsdialog.sidebar .ui-expander-icon-right,
|
|
.ui-expander.jsdialog.sidebar .ui-expander-icon-right * {
|
|
display: block;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-inline-end: 10px;
|
|
}
|
|
|
|
.ui-expander.jsdialog.sidebar .ui-expander-icon-right img {
|
|
filter: brightness(2);
|
|
}
|
|
|
|
.ui-expander.jsdialog.sidebar .ui-expander-icon-right:hover img {
|
|
filter: none;
|
|
}
|
|
|
|
#softedgeframe .sidebar.ui-expander-content,
|
|
#glowframe .sidebar.ui-expander-content {
|
|
width: 100% !important; /* frame inside frame */
|
|
}
|
|
|
|
#AlignmentPropertyPanel.sidebar.ui-grid #box3,
|
|
#ParaPropertyPanel.sidebar.ui-grid #box1.sidebar.ui-grid-cell,
|
|
#NumberFormatPropertyPanel.sidebar.ui-grid #grid1 {
|
|
justify-content: space-between !important;
|
|
}
|
|
|
|
/* section content */
|
|
|
|
.sidebar.ui-expander-content {
|
|
padding-inline: 10px;
|
|
width: 300px;
|
|
row-gap: 4px;
|
|
column-gap: 4px;
|
|
align-items: center;
|
|
line-height: var(--default-height);
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#fontheight,
|
|
#AlignmentPropertyPanel #textorientbox,
|
|
.sidebar.ui-grid.ui-grid-cell > div {
|
|
justify-content: end;
|
|
display: flex;
|
|
}
|
|
|
|
div.sidebar.ui-grid-cell.checkbutton,
|
|
div.sidebar.ui-grid .checkbutton.sidebar,
|
|
#ShadowPropertyPanel #SHOW_SHADOW,
|
|
#NumberFormatPropertyPanel.sidebar.ui-grid div.sidebar.ui-grid-cell:nth-child(2n+1),
|
|
#AlignmentPropertyPanel #indentbuttons, #SidebarTextPanel.sidebar.ui-grid div.sidebar.ui-grid-cell:nth-child(2n+1),
|
|
#ParaPropertyPanel.sidebar.ui-grid div.sidebar.ui-grid-cell:nth-child(2n) {
|
|
justify-content: start;
|
|
}
|
|
|
|
/* widgets */
|
|
|
|
.sidebar.spinfieldcontainer input {
|
|
color: var(--color-text-dark);
|
|
background-color: var(--color-background-dark);
|
|
}
|
|
|
|
.menubutton.sidebar span {
|
|
display: none;
|
|
font-size: var(--default-font-size);
|
|
}
|
|
|
|
.menubutton.sidebar:hover span {
|
|
position: absolute;
|
|
display: block;
|
|
width: auto;
|
|
background-color: var(--color-background-darker);
|
|
color: var(--color-text-darker);
|
|
padding: 2px 4px;
|
|
border-radius: var(--border-radius);
|
|
white-space: nowrap;
|
|
margin-inline-start: -14px;
|
|
}
|
|
|
|
.sidebar.ui-grid.ui-grid-cell .menubutton {
|
|
justify-content: space-between;
|
|
justify-self: end;
|
|
padding: 4px;
|
|
margin-right: 1px;
|
|
}
|
|
|
|
/* widget width */
|
|
|
|
.sidebar.ui-pushbutton,
|
|
.sidebar.spinfield,
|
|
.sidebar.ui-listbox,
|
|
.sidebar.menubutton {
|
|
width: 121px;
|
|
}
|
|
|
|
#gradientstyle > .sidebar.ui-listbox,
|
|
#gradangle > .sidebar.spinfield,
|
|
#fontsizecombobox .sidebar.ui-listbox,
|
|
#TableEditPanel .sidebar.spinfieldcontainer input,
|
|
#ParaPropertyPanel .sidebar.spinfieldcontainer input {
|
|
min-width: 87px;
|
|
width: 87px;
|
|
}
|
|
|
|
#fontnamecombobox > .sidebar.jsdialog.ui-listbox,
|
|
#applystyle > .sidebar.jsdialog.ui-listbox {
|
|
width: 198px;
|
|
}
|
|
|
|
/* widget selected */
|
|
|
|
/* non selected */
|
|
#clearFormatting,
|
|
.hasnotebookbar .ui-content.unotoolbutton.has-label,
|
|
.hasnotebookbar .ui-content.unotoolbutton.inline,
|
|
.hasnotebookbar .ui-content.unotoolbutton:not(.has-label):not(.inline),
|
|
.sidebar.unotoolbutton {
|
|
background-color: transparent;
|
|
border: 1px solid transparent;
|
|
color: var(--color-main-text);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
/* selected */
|
|
.hasnotebookbar .ui-content.unotoolbutton.selected.has-label,
|
|
.hasnotebookbar .ui-content.unotoolbutton.selected.inline,
|
|
.hasnotebookbar .ui-content.unotoolbutton.selected:not(.has-label):not(.inline),
|
|
.sidebar.unotoolbutton.selected {
|
|
background-color: var(--color-background-dark);
|
|
border: 1px solid var(--color-border-dark);
|
|
color: var(--color-text-dark);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
/* selected hover */
|
|
.hasnotebookbar .ui-content.unotoolbutton.selected:hover,
|
|
.unotoolbutton.notebookbar:hover,
|
|
.hasnotebookbar .ui-content.unotoolbutton.selected:not(.has-label):not(.inline):hover,
|
|
.sidebar.unotoolbutton:hover,
|
|
.sidebar.unotoolbutton.selected:hover {
|
|
background-color: var(--color-background-darker) !important;
|
|
border: 1px solid var(--color-border-darker);
|
|
color: var(--color-text-darker);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
|
|
/* fixes */
|
|
|
|
.sidebar.ui-grid-cell .sidebar.ui-pushbutton {
|
|
margin: 0;
|
|
}
|
|
.sidebar.unotoolbutton {
|
|
border: 1px solid transparent;
|
|
margin-right: 5px;
|
|
}
|
|
.sidebar.jsdialog.checkbutton {
|
|
font-size: var(--default-font-size);
|
|
}
|
|
|
|
/* writer */
|
|
|
|
#PosSizePropertyPanel.sidebar #selectrotationtype,
|
|
#PosSizePropertyPanel.sidebar #ratio {
|
|
justify-content: end;
|
|
}
|
|
#ParaPropertyPanel.sidebar #box3 {
|
|
display: grid;
|
|
justify-content: start;
|
|
row-gap: 4px;
|
|
}
|
|
|
|
#ParaPropertyPanel.sidebar #indentfieldbox {
|
|
display: grid;
|
|
row-gap: 4px;
|
|
}
|
|
|
|
#ParaPropertyPanel .sidebar.ui-grid-cell {
|
|
/* Same as sidebar button margins */
|
|
column-gap: 5px;
|
|
}
|
|
|
|
button#button2.ui-pushbutton.jsdialog.sidebar {
|
|
width: 151px;
|
|
padding: 4px;
|
|
position: relative;
|
|
left: -10px;
|
|
}
|
|
|
|
#ParaPropertyPanel.sidebar.ui-grid #indentfieldbox {
|
|
width: 158px;
|
|
}
|
|
|
|
#TableEditPanel.sidebar.ui-grid #delete_label {
|
|
width: 118px;
|
|
}
|
|
|
|
/* calc */
|
|
|
|
/* cell appearance use one row */
|
|
#CellAppearancePropertyPanel.sidebar div {
|
|
grid-template-columns: repeat(5, auto) !important;
|
|
}
|
|
|
|
#table-textorientbox.sidebar .jsdialog .radiobutton {
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
#table-textorientbox.sidebar .jsdialog input[type='radio'] {
|
|
background: none !important;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
/* fixes sidebar width in calc (textorientbox, alignment buttons were too big) */
|
|
#AlignmentPropertyPanel button {
|
|
min-width: 32px;
|
|
width: 32px;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
|
|
/* Charts */
|
|
|
|
.sidebar#ChartTypePanel #cmb_chartType-input,
|
|
.sidebar#ChartTypePanel #\33 dscheme-input,
|
|
.sidebar#ChartTypePanel .ui-listbox,
|
|
.sidebar#ChartTypePanel .ui-pushbutton,
|
|
.sidebar#ChartTypePanel .ui-scrollwindow,
|
|
.sidebar#ChartTypePanel #stack,
|
|
.sidebar#ChartElementsPanel .ui-listbox {
|
|
justify-content: start;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar#ChartTypePanel #stack:not(.hidden) + #grid6 {
|
|
display: block !important;
|
|
}
|
|
|
|
.sidebar#ChartTypePanel #stack.hidden + #grid6 {
|
|
display: none;
|
|
}
|
|
|
|
/* not available commands*/
|
|
|
|
#orientationcontrol,
|
|
#rotation {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#orientationcontrol,
|
|
#rotation, #grid1-cell-5-1,
|
|
#rotationlabel {
|
|
height: 0;
|
|
}
|