[Libreoffice-commits] online.git: loleaflet/css

Pedro Pinto Silva (via logerrit) logerrit at kemper.freedesktop.org
Mon Jul 27 14:25:21 UTC 2020


 loleaflet/css/mobilewizard.css |    6 +++---
 loleaflet/css/notebookbar.css  |   32 ++++++++++++++++++++++++--------
 2 files changed, 27 insertions(+), 11 deletions(-)

New commits:
commit 65e3a8de12693a4e32b8d0250b1cacdf580ca50a
Author:     Pedro Pinto Silva <pedro.silva at collabora.com>
AuthorDate: Mon Jul 27 13:16:25 2020 +0200
Commit:     Pedro Silva <pedro.silva at collabora.com>
CommitDate: Mon Jul 27 16:25:02 2020 +0200

    Notebookbar: Aesthetic fixes and make sure mobilewizard rules from mobile do not affect desktop
    
    * Some rules from mobile were affecting notebookbar layout (e.g.: writer: tab table)
    * Fix paddings in every .unolabel
    * Adjust .unoarrow and add hover state
    * Remove duplicated selectors (mobilewizard.css)
    * Add rules (from mobilewizard.css) that are needed uin the notebookbar to notebookbar.css with proper parent: .hasnotebookbar
    
    Change-Id: I22282c53ede39d7952bde1ea9625b4d928aaaea0
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/99477
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Tested-by: Jenkins
    Reviewed-by: Pedro Silva <pedro.silva at collabora.com>

diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css
index 7bd7cb36c..127e12dfd 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -646,17 +646,17 @@ a.leaflet-control-zoom-in {
 	vertical-align: top;
 	padding-left: 4%;
 }
-#buttonnone + label, #buttonbefore + label, #buttonafter + label, #buttonoptimal + label, #buttonparallel + label, #buttonnone + label, #buttonthrough + label{
+#buttonnone + label, #buttonbefore + label, #buttonafter + label, #buttonoptimal + label, #buttonparallel + label, #buttonthrough + label{
 	padding-left: 0;
 }
 #Color > img{
 	border-radius:100px;
 	background-color: #696969;
 }
-#SendToBack > span, #ObjectBackOne > span, #ObjectForwardOne > span, #BringToFront > span, #SetObjectToBackground > span, #SetObjectToForeground > span, #FlipVertical > span, #FlipHorizontal > span, #Bold > span, #Italic > span, #Underline > span, #Strikeout > span, #StyleApply > span, #StyleUpdateByExample > span, #StyleNewByExample > span, #Shadowed > span, #Grow > span, #Shrink > span, #Color > span, #Spacing > span, #SuperScript > span, #SubScript > span, #AlignLeft > span, #AlignRight > span, #AlignHorizontalCenter > span, #AlignBlock > span, #ParaLeftToRight > span, #ParaRightToLeft > span, #AlignTop > span, #AlignVCenter > span, #AlignBottom > span, #IncrementIndent > span, #DecrementIndent > span, #LeftPara > span, #RightPara > span, #CenterPara > span, #JustifyPara > span, #DefaultBullet > span, #DefaultNumbering > span, #ParaspaceIncrease > span, #ParaspaceDecrease > span, #LineSpacing > span, #HangingIndent > span, #CellVertTop > span, #CellVertCenter > span, #CellVertBot
 tom > span, .mobile-wizard > div[id*='Table'] > span, div[id*='Row'] > span,  div[id*='Column'] > span, .mobile-wizard > div[id*='Cell'] > span, div[id^=Outline] > span, #nolines > img{
+#mobile-wizard #SendToBack > span, #mobile-wizard #ObjectBackOne > span, #mobile-wizard  #ObjectForwardOne > span, #mobile-wizard #BringToFront > span, #mobile-wizard #SetObjectToBackground > span, #mobile-wizard #SetObjectToForeground > #mobile-wizard span, #mobile-wizard #FlipVertical > span, #mobile-wizard #FlipHorizontal > span, #mobile-wizard #Bold > span, #mobile-wizard #Italic > span, #mobile-wizard #Underline > span, #mobile-wizard #Strikeout > span, #mobile-wizard #StyleApply > span, #mobile-wizard #StyleUpdateByExample > span, #mobile-wizard #StyleNewByExample > span, #mobile-wizard #Shadowed > span, #mobile-wizard #Grow > span, #mobile-wizard #Shrink > span, #mobile-wizard #Color > span, #mobile-wizard #Spacing > span, #mobile-wizard #SuperScript > span, #mobile-wizard #SubScript > span, #mobile-wizard #AlignLeft > span, #mobile-wizard #AlignRight > span, #mobile-wizard #AlignHorizontalCenter > span, #mobile-wizard #AlignBlock > span, #mobile-wizard #ParaLeftToRight > spa
 n, #mobile-wizard #ParaRightToLeft > span, #mobile-wizard #AlignTop > span, #mobile-wizard #AlignVCenter > span, #mobile-wizard #AlignBottom > span, #mobile-wizard #IncrementIndent > span, #mobile-wizard #DecrementIndent > span, #mobile-wizard #LeftPara > span, #mobile-wizard #RightPara > span, #mobile-wizard #CenterPara > span, #mobile-wizard #JustifyPara > span, #mobile-wizard #DefaultBullet > span, #mobile-wizard #DefaultNumbering > span, #mobile-wizard #ParaspaceIncrease > span, #mobile-wizard #ParaspaceDecrease > span, #mobile-wizard #LineSpacing > span, #mobile-wizard #HangingIndent > span, #mobile-wizard #CellVertTop > span, #mobile-wizard #CellVertCenter > span, #mobile-wizard #CellVertBottom > span, #mobile-wizard div[id*='Table'] > span, #mobile-wizard div[id*='Row'] > span,  #mobile-wizard div[id*='Column'] > span, #mobile-wizard div[id*='Cell'] > span, #mobile-wizard div[id^='Outline'] > span, #mobile-wizard #nolines > img{
 	display: none !important;
 }
-#SendToBack, #ObjectBackOne, #ObjectForwardOne, #BringToFront, #SetObjectToBackground, #SetObjectToForeground, #FlipVertical, #FlipHorizontal, #Bold, #Italic, #Underline, #Strikeout, #StyleApply, #StyleUpdateByExample, #StyleNewByExample, #Shadowed, #Grow, #Shrink, #Spacing, #SuperScript, #SubScript,#AlignLeft, #AlignRight, #AlignHorizontalCenter, #AlignBlock, #ParaRightToLeft, #ParaLeftToRight, #AlignTop, #AlignVCenter, #AlignBottom, #IncrementIndent, #DecrementIndent, #LeftPara, #RightPara, #CenterPara, #JustifyPara, #DefaultBullet, #DefaultNumbering, #ParaspaceIncrease, #ParaspaceDecrease, #LineSpacing, #HangingIndent, #CellVertTop, #CellVertCenter, #CellVertBottom, #ParaspaceIncrease, #ParaspaceDecrease, div[id*='Row'], div[id*='Column'], #DeleteTable, #MergeCells, div[id^=Outline], .mobile-wizard > #EntireCell, .mobile-wizard > #SelectTable, .mobile-wizard > #EntireColumn, .mobile-wizard > #EntireRow, .mobile-wizard > #SplitCell, .mobile-wizard > #SplitTable{
+#mobile-wizard #SendToBack, #mobile-wizard #ObjectBackOne, #mobile-wizard #ObjectForwardOne, #mobile-wizard #BringToFront, #mobile-wizard #SetObjectToBackground, #mobile-wizard #SetObjectToForeground, #mobile-wizard #FlipVertical, #mobile-wizard #FlipHorizontal, #mobile-wizard #Bold, #mobile-wizard #Italic, #mobile-wizard #Underline, #Strikeout, #mobile-wizard #StyleApply, #mobile-wizard #StyleUpdateByExample, #mobile-wizard #StyleNewByExample, #mobile-wizard #Shadowed, #mobile-wizard #Grow, #mobile-wizard #Shrink, #mobile-wizard #Spacing, #mobile-wizard #SuperScript, #mobile-wizard #SubScript, #mobile-wizard #AlignLeft, #mobile-wizard #AlignRight, #mobile-wizard #AlignHorizontalCenter, #mobile-wizard #AlignBlock, #mobile-wizard #ParaRightToLeft, #mobile-wizard #ParaLeftToRight, #mobile-wizard #AlignTop, #mobile-wizard #AlignVCenter, #mobile-wizard #AlignBottom, #mobile-wizard #IncrementIndent, #mobile-wizard #DecrementIndent, #mobile-wizard #LeftPara, #mobile-wizard #RightPara, #mo
 bile-wizard #CenterPara, #mobile-wizard #JustifyPara, #mobile-wizard #DefaultBullet, #mobile-wizard #DefaultNumbering, #mobile-wizard #ParaspaceIncrease, #mobile-wizard #ParaspaceDecrease, #mobile-wizard #LineSpacing, #mobile-wizard #HangingIndent, #mobile-wizard #CellVertTop, #mobile-wizard #CellVertCenter, #mobile-wizard #CellVertBottom, #mobile-wizard div[id*='Row'], #mobile-wizard div[id*='Column'], #mobile-wizard #DeleteTable, #mobile-wizard #MergeCells, #mobile-wizard div[id^='Outline'], #mobile-wizard #EntireCell, #mobile-wizard #SelectTable, #mobile-wizard #EntireColumn, #mobile-wizard #EntireRow, #mobile-wizard #SplitCell, #mobile-wizard #SplitTable{
 	padding: 16px 28px 16px 4% !important;
 	margin: 0px !important;
 	float:left;
diff --git a/loleaflet/css/notebookbar.css b/loleaflet/css/notebookbar.css
index 906cbb76a..09626e911 100644
--- a/loleaflet/css/notebookbar.css
+++ b/loleaflet/css/notebookbar.css
@@ -100,7 +100,22 @@
 
 /* unobuttons */
 
-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, #Justif
 yPara.notebookbar, #DefaultBullet.notebookbar, #DefaultNumbering.notebookbar, #ParaspaceIncrease.notebookbar, #ParaspaceDecrease.notebookbar, #LineSpacing.notebookbar, #HangingIndent.notebookbar, #CellVertTop.notebookbar, #CellVertCenter.notebookbar, #CellVertBottom.notebookbar, #ParaspaceIncrease.notebookbar, #ParaspaceDecrease.notebookbar, #DeleteTable.notebookbar, #MergeCells.notebookbar{
+.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 #e6e6e640;
+	border-radius: 0.1px;
+	background-color: #e6e6e640;
+}
+
+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, #Justif
 yPara.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;
 }
@@ -128,17 +143,18 @@ div[id*='Row'].notebookbar, div[id*='Column'].notebookbar, #SendToBack.notebookb
 .unotoolbutton.notebookbar .unolabel {
 	font-family:  var(--loleaflet-font);
 	color: var(--gray-light-txt--color);
-	padding-left: 5px !important;
+	padding: 0px 5px !important;
 }
 
 .unotoolbutton.notebookbar .unoarrow {
-	margin-left: 5px;
-	border: solid #555;
-	border-width: 0 3px 3px 0;
+	border: 4px solid transparent;
+	border-top: 5px solid #8D99A7;
 	display: inline-block;
-	padding: 3px;
-	transform: rotate(45deg);
-	-webkit-transform: rotate(45deg);
+	margin-left: 3px;
+}
+
+.unotoolbutton.notebookbar:hover .unoarrow {
+	border-top: 5px solid #4c566a;
 }
 
 .unotoolbutton.notebookbar .unobutton.selected {


More information about the Libreoffice-commits mailing list