libreoffice-online/loleaflet/css/notebookbar.css
Pedro Pinto Silva e382efb79a Notebookbar: Writer: fix Home misaligned icns
Change-Id: I8f8e249527664be910658e8550ff7e69f9746287
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/101408
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
2020-08-26 16:41:33 +02:00

703 lines
16 KiB
CSS

/* tabs */
.ui-tabs.notebookbar {
display: inline-block;
z-index: 1000;
padding: 0px;
height: 100%;
}
.ui-tab.notebookbar {
float: left;
font-size: 12pt;
font-family: var(--loleaflet-font);
line-height: 20px;
color: dimgray;
height: 24px;
padding: 0px 1em;
background: var(--gray-bg-color);
padding-top: 7px;
}
.ui-tab.hidden.notebookbar {
display: none;
}
.ui-tab.selected.notebookbar {
border: none;
border-radius: 0px;
background: #fff;
box-shadow: 0 3px 0px 0px #fff, 0px -1px 8px -4px rgba(105, 105, 105, 0.4), -1px -15px 15px -4px rgb(77, 130, 184, 0.1);
}
.main-nav.hasnotebookbar.text-color-indicator .ui-tab.selected.notebookbar{
color: rgb(3, 105, 163);
color: var(rgb(--blue1-txt-primary-color));
text-shadow: 0px 0px 0.2px rgb(3, 105, 163);
text-shadow: 0px 0px 0.2px var(rgb(--blue1-txt-primary-color));
}
.main-nav.hasnotebookbar.spreadsheet-color-indicator .ui-tab.selected.notebookbar{
color: rgb(16, 104, 2);
color: var(rgb(--green0-txt-primary-color));
text-shadow: 0px 0px 0.2px rgb(16, 104, 2);
text-shadow: 0px 0px 0.2px var(rgb(--green0-txt-primary-color));
}
.main-nav.hasnotebookbar.presentation-color-indicator .ui-tab.selected.notebookbar{
color: rgb(163, 62, 3);
color: var(rgb(--orange1-txt-primary-color));
text-shadow: 0px 0px 0.2px rgb(163, 62, 3);
text-shadow: 0px 0px 0.2px var(rgb(--orange1-txt-primary-color));
}
.ui-tab.notebookbar:hover:not(.selected) {
border-radius: 0.1px;
background-color: #f9f9f9;
cursor: pointer;
color: #555;
}
/* Document Logo */
.main-nav.hasnotebookbar #document-header {
float: left;
}
/* shortcuts bar */
.notebookbar-shortcuts-bar {
display: inline-block;
position: relative;
z-index: 10000;
}
.notebookbar-shortcuts-bar > table {
display: block;
height: 33px;
}
.notebookbar-shortcuts-bar .unotoolbutton.notebookbar {
margin-right: 10px;
}
.notebookbar-shortcuts-bar .unotoolbutton.notebookbar .unobutton {
width: 16px !important;
height: 16px !important;
margin-right: 0px;
margin-top: 3px;
}
/* Hamburger icon: from shortcutsbar (notebookbar) */
.hasnotebookbar.text-color-indicator #shortcuts-menubar-icon,
.hasnotebookbar.text-color-indicator #shortcuts-menubar-icon:before,
.hasnotebookbar.text-color-indicator #shortcuts-menubar-icon:after {
background: rgb(3, 105, 163);
background: var(rgb(--blue1-txt-primary-color));
}
.hasnotebookbar.presentation-color-indicator #shortcuts-menubar-icon,
.hasnotebookbar.presentation-color-indicator #shortcuts-menubar-icon:before,
.hasnotebookbar.presentation-color-indicator #shortcuts-menubar-icon:after {
background: rgb(163, 62, 3);
background: var(rgb(--orange1-txt-primary-color));
}
.hasnotebookbar.spreadsheet-color-indicator #shortcuts-menubar-icon,
.hasnotebookbar.spreadsheet-color-indicator #shortcuts-menubar-icon:before,
.hasnotebookbar.spreadsheet-color-indicator #shortcuts-menubar-icon:after {
background: rgb(16, 104, 2);
background: var(rgb(--green0-txt-primary-color));
}
.hasnotebookbar .notebookbar-shortcuts-bar #Menubar > li > a {
cursor: pointer;
border: none;
background: var(--gray-bg-color);
height: 20px;
}
.hasnotebookbar #shortcuts-menubar-icon {
position: absolute;
top: 52%;
left: 0px;
height: 1px;
width: 13px;
-webkit-transition: all 0.25s;
transition: all 0.25s;
margin-left: 8px;
}
.hasnotebookbar #shortcuts-menubar-icon:before,
.hasnotebookbar #shortcuts-menubar-icon:after {
position: absolute;
top: 52%;
left: 0px;
height: 1px;
width: 13px;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.hasnotebookbar #shortcuts-menubar-icon:before {
content: '';
top: -6px;
left: 0;
}
.hasnotebookbar #shortcuts-menubar-icon:after {
content: '';
top: 6px;
left: 0;
}
/* options section */
.notebookbar-options-section {
display: inline;
position: fixed;
right: 0px;
z-index: 1000;
}
/* root container */
.notebookbar-scroll-wrapper {
overflow-x: scroll;
overflow-y: hidden;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
height: 84px;
}
.root-container.notebookbar {
display: table;
}
.notebookbar-scroll-wrapper::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
#toolbar-wrapper.hasnotebookbar {
position: fixed;
z-index: 11;
}
.cell.notebookbar {
display: table-cell;
vertical-align: middle;
padding: 2px;
}
.row.notebookbar {
display: table-row;
}
.vertical.notebookbar {
width: max-content;
}
/* unobuttons */
.hasnotebookbar .ui-content .unobutton {
width: 32px;
height: 32px;
margin-right: 5px;
vertical-align: middle;
}
.hasnotebookbar .ui-content.unobutton.selected {
-webkit-filter: grayscale(0) brightness(90%) sepia(90%) hue-rotate(-179deg) saturate(800%) contrast(0.7);
filter: grayscale(0) brightness(90%) sepia(90%) hue-rotate(-179deg) saturate(800%) contrast(0.7);
box-shadow: 0 0 0px 8px rgba(230, 230, 230, 0.24);
border-radius: 0.1px;
background-color: rgba(230, 230, 230, 0.24);
}
div[id*='Row'].notebookbar, div[id*='Column'].notebookbar, #SendToBack.notebookbar, #ObjectBackOne.notebookbar, #ObjectForwardOne.notebookbar, #BringToFront.notebookbar, #SetObjectToBackground.notebookbar, #SetObjectToForeground.notebookbar, #FlipVertical.notebookbar, #FlipHorizontal.notebookbar, #Bold.notebookbar, #Italic.notebookbar, #Underline.notebookbar, #Strikeout.notebookbar, #StyleApply.notebookbar, #StyleUpdateByExample.notebookbar, #StyleNewByExample.notebookbar, #Shadowed.notebookbar, #Grow.notebookbar, #Shrink.notebookbar, #Spacing.notebookbar, #SuperScript.notebookbar, #SubScript.notebookbar,#AlignLeft.notebookbar, #AlignRight.notebookbar, #AlignHorizontalCenter.notebookbar, #AlignBlock.notebookbar, #ParaRightToLeft.notebookbar, #ParaLeftToRight.notebookbar, #AlignTop.notebookbar, #AlignVCenter.notebookbar, #AlignBottom.notebookbar, #IncrementIndent.notebookbar, #DecrementIndent.notebookbar, #LeftPara.notebookbar, #RightPara.notebookbar, #CenterPara.notebookbar, #JustifyPara.notebookbar, #DefaultBullet.notebookbar, #DefaultNumbering.notebookbar, #ParaspaceIncrease.notebookbar, #ParaspaceDecrease.notebookbar, #LineSpacing.notebookbar, #HangingIndent.notebookbar, #CellVertTop.notebookbar, #CellVertCenter.notebookbar, #CellVertBottom.notebookbar, #DeleteTable.notebookbar, #MergeCells.notebookbar{
padding: 0px !important;
margin: 0px 5px 0px 0px !important;
}
/* avoid bug with arrow in new line when window is small */
#LineSpacing.notebookbar,
#table-Home-Section-Insert #table-LineB9 #InsertGraphic.notebookbar,
#table-Home-Section-Insert #table-GroupB20 #InsertTable.notebookbar {
width: 50px;
}
#table-Home-Section-Insert #table-LineB9 #InsertGraphic.notebookbar{
width: auto;
margin-left: -2px;
}
#LineSpacing.notebookbar {
margin-left: -14px !important;
}
#buttonbefore.notebookbar, #buttonafter.notebookbar, #buttonoptimal.notebookbar, #buttonparallel.notebookbar, #buttonnone.notebookbar, #buttonthrough.notebookbar, #bottom.notebookbar, #top.notebookbar, #standard.notebookbar, #Bold.notebookbar, #Italic.notebookbar, #Underline.notebookbar, #Strikeout.notebookbar{
margin: 0px !important;
padding: 0px !important;
}
.unotoolbutton.notebookbar {
margin-right: 5px !important;
}
.unotoolbutton.notebookbar .unobutton {
width: 24px !important;
height: 24px !important;
margin-right: 0px !important;
}
.unotoolbutton.notebookbar .unolabel {
font-family: var(--loleaflet-font);
color: #696969;
color: var(--gray-light-txt--color);
padding: 0px 5px !important;
}
.unotoolbutton.notebookbar .unoarrow {
border: 4px solid transparent;
border-top: 5px solid #8D99A7;
display: inline-block;
margin-left: 3px;
}
.unotoolbutton.notebookbar:hover .unoarrow {
border-top: 5px solid #4c566a;
}
.unotoolbutton.notebookbar .unobutton.selected {
box-shadow: 0 0 0px 4px rgba(230, 230, 230, 0.24) !important;
}
#table-HomeTab .unospan-uptoolbar:not(.disabled) {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
background: linear-gradient(to left, #e6e6e600, #e6e6e652 30%);
}
#table-HomeTab .unospan-downtoolbar:not(.disabled) {
background: linear-gradient(to right, #e6e6e600, #e6e6e652 30%);
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
#table-HomeTab .unospan-uptoolbar:not(.disabled):hover{
box-shadow: -2px 0 2px 2px #e6e6e6b0;
}
#table-HomeTab .unospan-downtoolbar:not(.disabled):hover{
box-shadow: 2px 0 2px 2px #e6e6e6b0;
}
#table-HomeTab .unospan-uptoolbar img, #table-HomeTab .unospan-downtoolbar img {
width: 18px !important;
height: 18px !important;
padding: 4px;
}
.unotoolbutton.notebookbar:not(.disabled):hover, #clearFormatting.notebookbar div img:hover {
box-shadow: 0 0 0px 4px #e6e6e6b0;
border-radius: 0.1px;
background-color: #e6e6e6b0;
cursor: pointer;
}
.unotoolbutton.notebookbar .selected-color {
height: 5px;
width: 24px;
position: relative;
top: -4px;
border: 1px solid silver;
}
.unotoolbutton.notebookbar .unobutton.selected + .ui-content.unolabel {
color: rgb(3, 105, 163) !important;
color: var(--blue1-txt-primary-color) !important;
}
.unotoolbutton.notebookbar.disabled:not(.unospan-shortcutstoolbox), .mobile-wizard-widebutton.disabled {
color: silver;
border-radius: 4px;
background: #c0c0c04a;
}
.unotoolbutton.notebookbar.disabled img, .mobile-wizard-widebutton.disabled img {
-webkit-filter: grayscale(100%) brightness(100%);
filter: grayscale(100%) brightness(100%);
}
.unotoolbutton.notebookbar {
text-align: center;
}
.unotoolbutton.notebookbar.has-label > *{ /*so they stay side by side*/
display: table-cell;
}
.unotoolbutton.notebookbar.has-label {
text-align: center;
}
.unotoolbutton.notebookbar.has-label:not(.inline) img {
width: 32px !important;
height: 32px !important;
padding-left: 25%;
}
/* unobuttons with inline labels */
.inline.notebookbar {
float: left;
width: max-content;
white-space: nowrap;
display: inline-table;
}
#FormatPaintbrush span
{
display: none;
}
/* comboboxes in readonly mode on mobile devices */
.notebookbar-scroll-wrapper .select2-container {
z-index: auto !important;
}
/* Writer */
/* Home tab */
#table-HomeTab {
margin-left: -16px;/*force alignment: clipboard elements*/
margin-top: -5px;
}
#clearFormatting.notebookbar div img {
width: 24px !important;
height: 24px !important;
}
#clearFormatting.notebookbar {
height: 24px !important;
}
#table-fontsize .select2.select2-container {
width: 60px !important;
}
#Paste.notebookbar img, #InsertAnnotation.notebookbar img, #SearchDialog.notebookbar img {
height: 32px !important;
width: 32px !important;
}
#ControlCodes.notebookbar {
margin-left: 35px !important;
}
#fontnamecombobox.notebookbar ~ .select2 {
width: 150px !important;
}
#fontsizecombobox.notebookbar ~ .select2 {
width: 50px !important;
}
#applystyle.notebookbar ~ .select2 {
width: 170px !important;
}
#Copy.notebookbar,
#clearFormatting.notebookbar {
margin-top: 10px;
}
#table-GroupB19 #table-GroupB93.notebookbar {
margin-left: -60px;
}
#table-stylescontainer #style1,
#table-stylescontainer #style2,
#table-stylescontainer #style3,
#table-stylescontainer #style4
{
border: 1px dashed lightgray;
cursor: pointer;
}
#table-stylescontainer #style4 {
border-right: 1px dashed transparent;
}
#table-stylescontainer #style1:hover,
#table-stylescontainer #style2:hover,
#table-stylescontainer #style3:hover,
#table-stylescontainer #style4:hover
{
border: 1px solid lightgray;
}
/* Insert Tab */
#table-Insert {
margin-top: 10px;
}
#table-Insert-Section-Pagebreak #InsertPagebreak.notebookbar img,
#table-Insert-Section-Table #InsertTable.notebookbar img,
#InsertObjectChart.notebookbar img,
#table-Insert-Section-Image #InsertGraphic.notebookbar img,
#HyperlinkDialog.notebookbar img,
#InsertFieldCtrl.notebookbar img,
#BasicShapes.notebookbar img,
#table-Insert-Section-Symbol #CharmapControl.notebookbar img
{
height: 32px !important;
width: 32px !important;
}
#table-InsertTab.notebookbar #table-GroupB18 #table-SectionBottom32
{
display: none;
}
/* Layout Tab */
#FormatGroup.notebookbar img,
#BringToFront.notebookbar img,
#ObjectForwardOne.notebookbar img,
#SendToBack.notebookbar img,
#ObjectBackOne.notebookbar img,
#PageDialog.notebookbar img
{
height: 32px !important;
width: 32px !important;
}
#table-Layout-Section-ParaMargin {
display: none;
}
/* References Tab */
#table-ReferencesTab
{
margin-top: 10px;
}
#InsertMultiIndex.notebookbar img,
#table-Reference-Section-Reference #InsertFootnote.notebookbar img,
#table-Reference-Section-Reference #InsertReferenceField.notebookbar img,
#InsertAuthoritiesEntry.notebookbar img,
#UpdateAll.notebookbar img,
#InsertReferenceField.notebookbar img
{
height: 32px !important;
width: 32px !important;
}
#table-Reference-Section-Field.notebookbar
{
display: none;
}
/* Format Tab */
#table-Format-Section.notebookbar {
margin-top: 15px;
}
/* Table Tab */
#table-Table-Section-Layout #InsertCaptionDialog.notebookbar img,
#BorderDialog.notebookbar img,
#MergeCells.notebookbar img,
#EntireCell.notebookbar img,
#OptimizeTable.notebookbar img,
#AutoFormat.notebookbar img,
#TableSort.notebookbar img,
#TableNumberFormatDialog.notebookbar img,
#TableDialog.notebookbar img
{
height: 32px !important;
width: 32px !important;
}
#table-Table-Section-Merge #table-GroupB61 #SplitCell.notebookbar img,
#table-Table-Section-Select #table-GroupB65 #SelectTable.notebookbar img
{
height: 24px !important;
width: 24px !important;
}
#NumberFormatPercent.notebookbar {
margin-right: 10px;
}
#table-box17.notebookbar #BackgroundColor {
padding-left: 15px;
}
/* Review Tab */
#table-ReviewTab {
margin-top: 10px;
}
#SpellingAndGrammarDialog.notebookbar img,
#ThesaurusDialog.notebookbar img,
#TrackChanges.notebookbar img,
#ShowTrackedChanges.notebookbar img,
#ProtectTraceChangeMode.notebookbar img,
#EditDoc.notebookbar img,
#AcceptTrackedChanges.notebookbar img
{
height: 32px !important;
width: 32px !important;
}
/* Help tab */
#table-Help-Section {
margin-top: 30px;
}
/* File tab */
#table-File-Section {
margin-top: 10px;
}
/* Draw tab */
#table-Draw #table-box16 #table-first16.notebookbar,
#table-DrawTab #table-GroupB74 #table-SectionBottom48.notebookbar {
display: none;
}
/* Calc */
/* Home tab */
#table-HomeTab #table-PasteBox1 #table-SectionBottom10 #SortAscending.notebookbar,
#table-HomeTab #table-PasteBox1 #table-SectionBottom10 #DataFilterAutoFilter.notebookbar,
#table-InsertTab #table-GroupB26 #table-SectionBottom32.notebookbar,
#table-Home-Section-Find #SearchDialog.notebookbar
{
display: none;
}
#table-numbertype .select2.select2-container {
width: 170px !important;
}
/* Review Tab */
#SpellDialog.notebookbar img,
#TraceChangeMode.notebookbar img,
#AcceptChanges.notebookbar img,
#Protect.notebookbar img,
#ToolProtectionDocument.notebookbar img
{
height: 32px !important;
width: 32px !important;
}
#table-ReviewTab #table-Review #AcceptChanges.notebookbar {
display: none;
}
/* Sheet Tab */
#table-Sheet-Section.notebookbar {
margin-top: 10px;
}
/* Data Tab */
#table-DataTab {
margin-top: 10px;
}
#table-DataTab #table-ViewMenu3.notebookbar {
display: none;
}
/* Impress */
/* Home Tab */
#table-shapes15 #BasicShapes.notebookbar,
#table-HomeTab #table-SectionBottom10.notebookbar #Presentation
{
display: none;
}
#table-SectionBottom5 #Text.notebookbar img
{
height: 32px !important;
width: 32px !important;
}
/* Insert Tab */
#table-Insert #HeaderAndFooter.notebookbar {
min-width: 160px;
}
#table-Insert-Section-DrawText #Text.notebookbar img,
#table-Insert-Section-Slide #InsertPage.notebookbar img
{
height: 32px !important;
width: 32px !important;
}
/* Review Tab */
#table-GroupB42 #DeleteAllAnnotation.notebookbar img
{
height: 32px !important;
width: 32px !important;
}
#table-GroupB37 #InsertAnnotation.notebookbar
{
display: none;
}
/* Table Tab */
#table-box11 #FrameLineColor.notebookbar img,
#table-Table-Section-Merge #SplitCell.notebookbar img,
#table-Table-Section-Select #SelectTable.notebookbar img
{
height: 32px !important;
width: 32px !important;
}
/* Draw Tab */
#table-DrawTab #table-box6 #XLineColor.notebookbar {
margin-left: -10px;
}
#table-DrawTab #table-Draw #table-GroupB102.notebookbar {
margin-left: -70px;
}
/* other */
.ui-drawing-area-container
{
position: relative;
}
.ui-drawing-area-loader
{
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
margin-left: auto;
margin-right: auto;
position: relative;
top: 25%;
}
.ui-drawing-area-loader-container
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}