Fix search box overlapping on mobile (#450)

* fix searchbox overlapping on mobile

* also adjust log in background color in theme

* Fix unit tests

Author: jancborchardt

apps/theming/lib/controller/themingcontroller.php

@@ -73,7 +73,7 @@ public function __construct(
 		IRootFolder $rootFolder
 	) {
 		parent::__construct($appName, $request);
-		
+
 		$this->template = $template;
 		$this->l = $l;
 		$this->config = $config;
@@ -216,7 +216,7 @@ public function getStylesheet() {
 		$color = $this->config->getAppValue($this->appName, 'color');
 		if($color !== '') {
 			$responseCss .= sprintf(
-				'#body-user #header,#body-settings #header,#body-public #header {background-color: %s}',
+				'#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}',
 				$color
 			);
 		}

apps/theming/tests/lib/controller/ThemingControllerTest.php

@@ -327,7 +327,7 @@ public function testGetStylesheetWithOnlyColor() {
 			->with('theming', 'backgroundMime', '')
 			->willReturn('');
 
-		$expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header {background-color: #000}', 'style', 'text/css');
+		$expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}', 'style', 'text/css');
 		$expected->cacheFor(3600);
 		@$this->assertEquals($expected, $this->themingController->getStylesheet());
 	}
@@ -354,7 +354,7 @@ public function testGetStylesheetWithOnlyColorInvert() {
 			->with('theming', 'backgroundMime', '')
 			->willReturn('');
 
-		$expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header {background-color: #fff}#header .header-appname, #expandDisplayName { color: #000000; } #header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); } .searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }', 'style', 'text/css');
+		$expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}#header .header-appname, #expandDisplayName { color: #000000; } #header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); } .searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }', 'style', 'text/css');
 		$expected->cacheFor(3600);
 		@$this->assertEquals($expected, $this->themingController->getStylesheet());
 	}
@@ -443,7 +443,7 @@ public function testGetStylesheetWithAllCombined() {
 			->with('theming', 'backgroundMime', '')
 			->willReturn('image/png');
 
-		$expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header {background-color: #000}#header .logo {
+		$expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}#header .logo {
 				background-image: url(\'./logo?v=0\');
 			}
 			#header .logo-icon {
@@ -477,7 +477,7 @@ public function testGetStylesheetWithAllCombinedInverted() {
 			->with('theming', 'backgroundMime', '')
 			->willReturn('image/png');
 
-		$expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header {background-color: #fff}#header .logo {
+		$expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}#header .logo {
 				background-image: url(\'./logo?v=0\');
 			}
 			#header .logo-icon {

core/css/styles.css

@@ -118,7 +118,7 @@ a.two-factor-cancel {
 	width: 155px;
 	max-width: 50%;
 	cursor: text;
-	background-color: transparent;
+	background-color: #0082c9;
 	border: 1px solid rgba(255, 255, 255, .5);
 }