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

[Pedro Pinto Silva (via logerrit)]

 loleaflet/css/leaflet.css      |    4 ++--
 loleaflet/css/loleaflet.css    |    5 +++--
 loleaflet/css/menubar.css      |    4 ++--
 loleaflet/css/mobilewizard.css |    2 +-
 loleaflet/css/notebookbar.css  |   20 ++++++++++++++++++--
 loleaflet/css/spreadsheet.css  |    2 +-
 6 files changed, 27 insertions(+), 10 deletions(-)

New commits:
commit a8db0d749ff9898866957d53eaa849ca6a195257
Author:     Pedro Pinto Silva <pedro.silva at collabora.com>
AuthorDate: Fri Jul 24 09:56:19 2020 +0200
Commit:     Pedro Silva <pedro.silva at collabora.com>
CommitDate: Fri Jul 24 11:01:10 2020 +0200

    Notebookbar: Fix tab shadow so it does bleed out when collapsed and
    
    * increase distinction between disabled and enabled buttons,
    * make the Selected buttons to use the same main blue color
    * make the Selected buttons with text to change their text color as well
    * Use --gray-bg-color across all files
    
    Change-Id: I50b8ab86216211de37ef6c4d2b2c6baddc783ae7
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/99349
    Tested-by: Jenkins
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Pedro Silva <pedro.silva at collabora.com>

diff --git a/loleaflet/css/leaflet.css b/loleaflet/css/leaflet.css
index f4bd5abf0..6507c634c 100644
--- a/loleaflet/css/leaflet.css
+++ b/loleaflet/css/leaflet.css
@@ -827,7 +827,7 @@ input.clipboard {
 }
 
 .loleaflet-ruler {
-	background-color: #efefef;
+	background-color: var(--gray-bg-color);
 	height: 20px;
 	width: 100vw;
 	margin: 0px;
@@ -942,7 +942,7 @@ input.clipboard {
 
 .loleaflet-ruler-margin {
 	height: 100%;
-	background-color: #efefef;
+	background-color: var(--gray-bg-color);
 	}
 
 .loleaflet-ruler-left {
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index c48eaca1b..c50080654 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -16,8 +16,9 @@
 	--blue1-txt-primary-color: #0369A3;
 	--green0-txt-primary-color: #106802; /*green1 lacks contrast against white*/
 	--orange1-txt-primary-color: #A33E03;
-	
+
 	--gray-light-txt--color: #696969;
+	--gray-bg-color: #EFEFEF;
 }
 #document-container {
 	border-top: 1px solid #B6B6B6;
@@ -323,7 +324,7 @@ body {
 	font-family: var(--loleaflet-font) !important;
 	font-size: 13px;
 	text-align: left;
-	background-color: #efefef;
+	background-color: var(--gray-bg-color);
 	box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
 	color: #222;
 	border: none;
diff --git a/loleaflet/css/menubar.css b/loleaflet/css/menubar.css
index 07ca96221..ea7a311c9 100644
--- a/loleaflet/css/menubar.css
+++ b/loleaflet/css/menubar.css
@@ -51,7 +51,7 @@
 }
 
 .main-nav.hasnotebookbar{
-	background: #efefef;
+	background: var(--gray-bg-color);
 	margin-top: 0px;
 }
 
@@ -144,7 +144,7 @@
     overflow: hidden;
     padding-top: 0;
     padding-bottom: 0;
-    background-color: #efefef;
+    background-color: var(--gray-bg-color);
 }
 /* lo-menu customizations end */
 
diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css
index 549e7b40b..6a35251d0 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -662,7 +662,7 @@ a.leaflet-control-zoom-in {
 	float:left;
 }
 #MergeCells > span{
-	color: #4d82b8;
+	color: var(--blue1-txt-primary-color);
 	text-align: end;
 	vertical-align: bottom;
 }
diff --git a/loleaflet/css/notebookbar.css b/loleaflet/css/notebookbar.css
index 410426a50..f2683637c 100644
--- a/loleaflet/css/notebookbar.css
+++ b/loleaflet/css/notebookbar.css
@@ -16,7 +16,7 @@
 	color: dimgray;
 	height: 24px;
 	padding: 0px 1em;
-	background: #efefef;
+	background: var(--gray-bg-color);
 	padding-top: 7px;
 }
 
@@ -24,7 +24,7 @@
 	border: none;
 	border-radius: 0px;
 	background: #fff;
-	box-shadow: 0 6px 0px 0px white, 0px 0 8px -4px rgba(105, 105, 105, 0.4), -2px 0 15px -4px rgba(77, 130, 184, 0.1);
+	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: var(--blue1-txt-primary-color);
@@ -165,6 +165,22 @@ div[id*='Row'].notebookbar, div[id*='Column'].notebookbar, #SendToBack.notebookb
 	border: 1px solid silver;
 }
 
+.unotoolbutton.notebookbar .unobutton.selected + .ui-content.unolabel {
+	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%);
+}
+
+
 /* unobuttons with inline labels */
 
 .inline.notebookbar {
diff --git a/loleaflet/css/spreadsheet.css b/loleaflet/css/spreadsheet.css
index 84768bb4b..3f4ebe5c9 100644
--- a/loleaflet/css/spreadsheet.css
+++ b/loleaflet/css/spreadsheet.css
@@ -28,7 +28,7 @@
 	overflow: hidden;
 	white-space: nowrap;
 
-	background-color: #efefef;
+	background-color: var(--gray-bg-color);
 	}
 
 .spreadsheet-tab-scroll {