From 31f75e50b67050c09368805ef911569bcaceeeeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 8 Nov 2016 13:36:35 +0100 Subject: [PATCH 01/43] Cache and compile base MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- lib/private/Template/CSSResourceLocator.php | 2 + lib/private/Template/ResourceLocator.php | 27 +++++ lib/private/Template/SCSSCacher.php | 110 ++++++++++++++++++++ 3 files changed, 139 insertions(+) mode change 100644 => 100755 lib/private/Template/CSSResourceLocator.php mode change 100644 => 100755 lib/private/Template/ResourceLocator.php create mode 100755 lib/private/Template/SCSSCacher.php diff --git a/lib/private/Template/CSSResourceLocator.php b/lib/private/Template/CSSResourceLocator.php old mode 100644 new mode 100755 index ffeaf765ff5..353555a6811 --- a/lib/private/Template/CSSResourceLocator.php +++ b/lib/private/Template/CSSResourceLocator.php @@ -32,6 +32,8 @@ class CSSResourceLocator extends ResourceLocator { public function doFind($style) { if (strpos($style, '3rdparty') === 0 && $this->appendIfExist($this->thirdpartyroot, $style.'.css') + || $this->cacheAndAppendScssIfExist($this->serverroot, $style.'.scss') + || $this->cacheAndAppendScssIfExist($this->serverroot, 'core/'.$style.'.scss') || $this->appendIfExist($this->serverroot, $style.'.css') || $this->appendIfExist($this->serverroot, 'core/'.$style.'.css') ) { diff --git a/lib/private/Template/ResourceLocator.php b/lib/private/Template/ResourceLocator.php old mode 100644 new mode 100755 index 420317d27ac..37360a98d91 --- a/lib/private/Template/ResourceLocator.php +++ b/lib/private/Template/ResourceLocator.php @@ -106,6 +106,33 @@ abstract class ResourceLocator { return false; } + /** + * cache and append the scss $file if exist at $root + * + * @param string $root path to check + * @param string $file the filename + * @param string|null $webRoot base for path, default map $root to $webRoot + * @return bool True if the resource was found and cached, false otherwise + */ + protected function cacheAndAppendScssIfExist($root, $file, $webRoot = null) { + if (is_file($root.'/'.$file)) { + $scssCache = new \OC\Template\SCSSCacher( + $this->logger, + $root, + $file); + + if($scssCache->process()) { + $this->append($root, $scssCache->getCachedSCSS(), $webRoot, false); + $this->logger->debug($root.'/'.$file.' compiled and successfully cached', ['app' => 'SCSSPHP']); + return true; + } else { + $this->logger->error('Failed to compile and/or save '.$root.'/'.$file, ['app' => 'SCSSPHP']); + return false; + } + } + return false; + } + /** * append the $file resource at $root * diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php new file mode 100755 index 00000000000..c53257d1a0f --- /dev/null +++ b/lib/private/Template/SCSSCacher.php @@ -0,0 +1,110 @@ +. + * + */ + +namespace OC\Template; + +use Leafo\ScssPhp\Compiler; +use Leafo\ScssPhp\Exception\ParserException; + +class SCSSCacher { + + protected $root; + protected $file; + protected $fileName; + protected $fileLoc; + protected $fileCache; + protected $rootCssLoc; + + /** Cache folder from serverroot */ + private $scssCache = "assets"; + + + /** @var \OCP\ILogger */ + protected $logger; + + /** + * @param \OCP\ILogger $logger + * @param string $root + * @param string $file + */ + public function __construct(\OCP\ILogger $logger, $root, $file) { + $this->logger = $logger; + $this->root = $root; + $this->file = explode('/', $root.'/'.$file); + + $this->fileName = array_pop($this->file); + $this->fileLoc = implode('/', $this->file); + $this->fileCache = str_replace('.scss', '.css', $this->scssCache.'/'.$this->fileName); + + // base uri to css file + $this->rootCssLoc = explode('/', $file); + array_pop($this->rootCssLoc); + $this->rootCssLoc = implode('/', $this->rootCssLoc); + } + + public function process() { + + if($this->is_cached($this->root.'/'.$this->fileCache, $this->fileLoc.'/'.$this->fileName)) { + return true; + } else { + return $this->cache(); + } + return false; + } + + private function is_cached($in, $out) { + if (! is_file($out) || filemtime($in) > filemtime($out)) { + return true; + } + return false; + } + + private function cache() { + $scss = new Compiler(); + $scss->setImportPaths($this->fileLoc); + + if(\OC::$server->getSystemConfig()->getValue('debug')) { + // Debug mode + $scss->setFormatter('Leafo\ScssPhp\Formatter\Expanded'); + $scss->setLineNumberStyle(Compiler::LINE_COMMENTS); + } else { + $scss->setFormatter('Leafo\ScssPhp\Formatter\Crunched'); + } + + try { + $compiledScss = $scss->compile('@import "'.$this->fileName.'";'); + } catch(ParserException $e) { + $this->logger->error($e, ['app' => 'SCSSPHP']); + return false; + } + return file_put_contents($this->fileCache, $this->rebaseUrls($compiledScss)); + } + + private function rebaseUrls($css) { + $re = '/url\([\'"](.*)[\'"]\)/x'; + $subst = 'url(\'../'.$this->rootCssLoc.'/$1\')'; + return preg_replace($re, $subst, $css); + } + + public function getCachedSCSS() { + return $this->fileCache; + } +} From cf73e71ff16027099ff5b006f445f7d193b0c5e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 8 Nov 2016 21:45:43 +0100 Subject: [PATCH 02/43] Debug log fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- lib/private/Template/SCSSCacher.php | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index c53257d1a0f..50e6eb4851d 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -95,7 +95,12 @@ class SCSSCacher { $this->logger->error($e, ['app' => 'SCSSPHP']); return false; } - return file_put_contents($this->fileCache, $this->rebaseUrls($compiledScss)); + + if(file_put_contents($this->fileCache, $this->rebaseUrls($compiledScss))) { + $this->logger->debug($root.'/'.$file.' compiled and successfully cached', ['app' => 'SCSSPHP']); + return true; + } + return false; } private function rebaseUrls($css) { From 3a7d6846facec4e03966ab8e03f0fcbd946a8ef0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 9 Nov 2016 11:18:43 +0100 Subject: [PATCH 03/43] Appdata integration 1 & log fix 2 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- lib/private/Template/CSSResourceLocator.php | 12 ++++- lib/private/Template/ResourceLocator.php | 6 +-- lib/private/Template/SCSSCacher.php | 49 ++++++++++++++------- lib/private/TemplateLayout.php | 3 +- 4 files changed, 49 insertions(+), 21 deletions(-) diff --git a/lib/private/Template/CSSResourceLocator.php b/lib/private/Template/CSSResourceLocator.php index 353555a6811..2e1db9a6757 100755 --- a/lib/private/Template/CSSResourceLocator.php +++ b/lib/private/Template/CSSResourceLocator.php @@ -26,14 +26,22 @@ namespace OC\Template; class CSSResourceLocator extends ResourceLocator { + + protected $appData; + + public function __construct(\OCP\ILogger $logger, $theme, $core_map, $party_map, $appData) { + $this->appData = $appData; + parent::__construct($logger, $theme, $core_map, $party_map); + } + /** * @param string $style */ public function doFind($style) { if (strpos($style, '3rdparty') === 0 && $this->appendIfExist($this->thirdpartyroot, $style.'.css') - || $this->cacheAndAppendScssIfExist($this->serverroot, $style.'.scss') - || $this->cacheAndAppendScssIfExist($this->serverroot, 'core/'.$style.'.scss') + || $this->cacheAndAppendScssIfExist($this->serverroot, $style.'.scss', $this->appData) + || $this->cacheAndAppendScssIfExist($this->serverroot, 'core/'.$style.'.scss', $this->appData) || $this->appendIfExist($this->serverroot, $style.'.css') || $this->appendIfExist($this->serverroot, 'core/'.$style.'.css') ) { diff --git a/lib/private/Template/ResourceLocator.php b/lib/private/Template/ResourceLocator.php index 37360a98d91..89a3a1b025b 100755 --- a/lib/private/Template/ResourceLocator.php +++ b/lib/private/Template/ResourceLocator.php @@ -114,16 +114,16 @@ abstract class ResourceLocator { * @param string|null $webRoot base for path, default map $root to $webRoot * @return bool True if the resource was found and cached, false otherwise */ - protected function cacheAndAppendScssIfExist($root, $file, $webRoot = null) { + protected function cacheAndAppendScssIfExist($root, $file, $appData, $webRoot = null) { if (is_file($root.'/'.$file)) { $scssCache = new \OC\Template\SCSSCacher( $this->logger, $root, - $file); + $file, + $appData); if($scssCache->process()) { $this->append($root, $scssCache->getCachedSCSS(), $webRoot, false); - $this->logger->debug($root.'/'.$file.' compiled and successfully cached', ['app' => 'SCSSPHP']); return true; } else { $this->logger->error('Failed to compile and/or save '.$root.'/'.$file, ['app' => 'SCSSPHP']); diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index 50e6eb4851d..43160a9c169 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -23,46 +23,53 @@ namespace OC\Template; use Leafo\ScssPhp\Compiler; use Leafo\ScssPhp\Exception\ParserException; +use OCP\Files\NotFoundException; class SCSSCacher { protected $root; + protected $folder; protected $file; protected $fileName; protected $fileLoc; protected $fileCache; protected $rootCssLoc; - /** Cache folder from serverroot */ - private $scssCache = "assets"; - - /** @var \OCP\ILogger */ protected $logger; + protected $appData; /** * @param \OCP\ILogger $logger * @param string $root * @param string $file */ - public function __construct(\OCP\ILogger $logger, $root, $file) { + public function __construct(\OCP\ILogger $logger, $root, $file, $appData) { $this->logger = $logger; + $this->appData = $appData; $this->root = $root; $this->file = explode('/', $root.'/'.$file); - $this->fileName = array_pop($this->file); + $this->fileNameSCSS = array_pop($this->file); + $this->fileNameCSS = str_replace('.scss', '.css', $this->fileNameSCSS); $this->fileLoc = implode('/', $this->file); - $this->fileCache = str_replace('.scss', '.css', $this->scssCache.'/'.$this->fileName); // base uri to css file $this->rootCssLoc = explode('/', $file); array_pop($this->rootCssLoc); $this->rootCssLoc = implode('/', $this->rootCssLoc); + + try { + $this->folder = $this->appData->getFolder('css'); + } catch(NotFoundException $e) { + // creating css appdata folder + $this->folder = $this->appData->newFolder('css'); + } } public function process() { - if($this->is_cached($this->root.'/'.$this->fileCache, $this->fileLoc.'/'.$this->fileName)) { + if($this->is_cached()) { return true; } else { return $this->cache(); @@ -70,33 +77,45 @@ class SCSSCacher { return false; } - private function is_cached($in, $out) { - if (! is_file($out) || filemtime($in) > filemtime($out)) { - return true; - } + private function is_cached() { + try{ + $cachedfile = $this->folder->getFile($this->fileNameCSS); + if( $cachedfile->getMTime() > filemtime($this->fileLoc.'/'.$this->fileNameSCSS) + && $cachedfile->getSize() > 0 ) { + return true; + } + } catch(NotFoundException $e) { + return false; + } return false; } private function cache() { $scss = new Compiler(); $scss->setImportPaths($this->fileLoc); - if(\OC::$server->getSystemConfig()->getValue('debug')) { // Debug mode $scss->setFormatter('Leafo\ScssPhp\Formatter\Expanded'); $scss->setLineNumberStyle(Compiler::LINE_COMMENTS); } else { + // Compression $scss->setFormatter('Leafo\ScssPhp\Formatter\Crunched'); } try { - $compiledScss = $scss->compile('@import "'.$this->fileName.'";'); + $cachedfile = $this->folder->getFile($this->fileNameCSS); + } catch(NotFoundException $e) { + $cachedfile = $this->folder->newFile($this->fileNameCSS); + } + + try { + $compiledScss = $scss->compile('@import "'.$this->fileNameSCSS.'";'); } catch(ParserException $e) { $this->logger->error($e, ['app' => 'SCSSPHP']); return false; } - if(file_put_contents($this->fileCache, $this->rebaseUrls($compiledScss))) { + if($cachedfile->putContent($this->rebaseUrls($compiledScss))) { $this->logger->debug($root.'/'.$file.' compiled and successfully cached', ['app' => 'SCSSPHP']); return true; } diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php index ad9f8bac0e4..96f612c313c 100644 --- a/lib/private/TemplateLayout.php +++ b/lib/private/TemplateLayout.php @@ -188,7 +188,8 @@ class TemplateLayout extends \OC_Template { \OC::$server->getLogger(), $theme, array( \OC::$SERVERROOT => \OC::$WEBROOT ), - array( \OC::$SERVERROOT => \OC::$WEBROOT )); + array( \OC::$SERVERROOT => \OC::$WEBROOT ), + \OC::$server->getAppDataDir('server')); $locator->find($styles); return $locator->getResources(); } From 1caaa7f4cd05e45a02ead069adf8625d7b192dcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 9 Nov 2016 13:39:08 +0100 Subject: [PATCH 04/43] Appdata integration 2 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/Controller/CssController.php | 83 +++++++++++++++++++ core/routes.php | 1 + .../DependencyInjection/DIContainer.php | 5 ++ lib/private/CssManager.php | 63 ++++++++++++++ lib/private/Server.php | 15 ++++ lib/private/Template/CSSResourceLocator.php | 7 ++ lib/private/Template/ResourceLocator.php | 1 + lib/private/Template/SCSSCacher.php | 41 +++++++-- lib/public/ICssManager.php | 38 +++++++++ 9 files changed, 248 insertions(+), 6 deletions(-) create mode 100644 core/Controller/CssController.php create mode 100644 lib/private/CssManager.php create mode 100644 lib/public/ICssManager.php diff --git a/core/Controller/CssController.php b/core/Controller/CssController.php new file mode 100644 index 00000000000..45a188adba6 --- /dev/null +++ b/core/Controller/CssController.php @@ -0,0 +1,83 @@ +. + * + */ + +namespace OC\Core\Controller; + +use OC\AppFramework\Utility\TimeFactory; +use OCP\AppFramework\Controller; +use OCP\AppFramework\Http; +use OCP\AppFramework\Http\NotFoundResponse; +use OCP\AppFramework\Http\FileDisplayResponse; +use OCP\ICssManager; +use OCP\IRequest; + + +class CssController extends Controller { + + /** @var ICssManager */ + protected $cssManager; + + /** @var TimeFactory */ + protected $timeFactory; + + + + /** + * @param string $appName + * @param IRequest $request + * @param ICssManager $cssManager + * @param TimeFactory $timeFactory + */ + public function __construct($appName, IRequest $request, ICssManager $cssManager, TimeFactory $timeFactory) { + parent::__construct($appName, $request); + + $this->cssManager = $cssManager; + $this->timeFactory = $timeFactory; + } + + /** + * @NoAdminRequired + * @NoCSRFRequired + * + * @param string $fileName css filename with extension + * @return text/css + */ + public function getCss($fileName) { + try { + $cssFile = $this->cssManager->getCss($fileName); + } catch(NotFoundException $e) { + return new NotFoundResponse(); + } + + if ($cssFile !== false) { + $response = new FileDisplayResponse($cssFile, Http::STATUS_OK, ['Content-Type' => 'text/css']); + $response->cacheFor(86400); + $expires = new \DateTime(); + $expires->setTimestamp($this->timeFactory->getTime()); + $expires->add(new \DateInterval('PT24H')); + $response->addHeader('Expires', $expires->format(\DateTime::RFC2822)); + $response->addHeader('Pragma', 'cache'); + return $response; + } else { + return new NotFoundResponse(); + } + } +} diff --git a/core/routes.php b/core/routes.php index 2b8080a3b7b..dec979c8ce2 100644 --- a/core/routes.php +++ b/core/routes.php @@ -55,6 +55,7 @@ $application->registerRoutes($this, [ ['name' => 'OCJS#getConfig', 'url' => '/core/js/oc.js', 'verb' => 'GET'], ['name' => 'Preview#getPreview', 'url' => '/core/preview', 'verb' => 'GET'], ['name' => 'Preview#getPreview', 'url' => '/core/preview.png', 'verb' => 'GET'], + ['name' => 'Css#getCss', 'url' => '/css/{fileName}', 'verb' => 'GET'], ], 'ocs' => [ ['root' => '/cloud', 'name' => 'OCS#getCapabilities', 'url' => '/capabilities', 'verb' => 'GET'], diff --git a/lib/private/AppFramework/DependencyInjection/DIContainer.php b/lib/private/AppFramework/DependencyInjection/DIContainer.php index ac42960f54d..57e7749ca86 100644 --- a/lib/private/AppFramework/DependencyInjection/DIContainer.php +++ b/lib/private/AppFramework/DependencyInjection/DIContainer.php @@ -95,6 +95,11 @@ class DIContainer extends SimpleContainer implements IAppContainer { return $this->getServer()->getAvatarManager(); }); + + $this->registerService('OCP\\ICssManager', function($c) { + return $this->getServer()->getCssManager(); + }); + $this->registerService('OCP\\Activity\\IManager', function($c) { return $this->getServer()->getActivityManager(); }); diff --git a/lib/private/CssManager.php b/lib/private/CssManager.php new file mode 100644 index 00000000000..016227b9c3f --- /dev/null +++ b/lib/private/CssManager.php @@ -0,0 +1,63 @@ +. + * + */ + +namespace OC; + +use OCP\Files\IAppData; +use OCP\Files\NotFoundException; +use OCP\ICssManager; + +/** + * This class implements methods to access SCSS cached files + */ +class CssManager implements ICssManager { + + /** @var IAppData */ + private $appData; + + /** + * CssManager constructor. + * + * @param IAppData $appData + */ + public function __construct(IAppData $appData) { + $this->appData = $appData; + } + + /** + * Get the css file and return ISimpleFile + * + * @param string $fileName css filename with extension + * @return ISimpleFile + */ + public function getCss($fileName) { + try { + $folder = $this->appData->getFolder('css'); + } catch(NotFoundException $e) { + throw new NotFoundException(); + } + try { + return $folder->getFile($fileName); + } catch(NotFoundException $e) { + throw new NotFoundException(); + } + } +} diff --git a/lib/private/Server.php b/lib/private/Server.php index 5bc72e3614f..2dbf827844d 100644 --- a/lib/private/Server.php +++ b/lib/private/Server.php @@ -417,6 +417,11 @@ class Server extends ServerContainer implements IServerContainer { $c->getConfig() ); }); + $this->registerService('CssManager', function (Server $c) { + return new CssManager( + $c->getAppDataDir('server') + ); + }); $this->registerService('Logger', function (Server $c) { $logClass = $c->query('AllConfig')->getSystemValue('log_type', 'file'); // TODO: Drop backwards compatibility for config in the future @@ -908,6 +913,16 @@ class Server extends ServerContainer implements IServerContainer { return $this->query('AvatarManager'); } + + /** + * Returns the css manager + * + * @return \OCP\ICssManager + */ + public function getCssManager() { + return $this->query('CssManager'); + } + /** * Returns the root folder of ownCloud's data directory * diff --git a/lib/private/Template/CSSResourceLocator.php b/lib/private/Template/CSSResourceLocator.php index 2e1db9a6757..0d190959ea1 100755 --- a/lib/private/Template/CSSResourceLocator.php +++ b/lib/private/Template/CSSResourceLocator.php @@ -29,6 +29,13 @@ class CSSResourceLocator extends ResourceLocator { protected $appData; + /** + * @param \OCP\ILogger $logger + * @param string $theme + * @param array $core_map + * @param array $party_map + * @param IAppData $appData + */ public function __construct(\OCP\ILogger $logger, $theme, $core_map, $party_map, $appData) { $this->appData = $appData; parent::__construct($logger, $theme, $core_map, $party_map); diff --git a/lib/private/Template/ResourceLocator.php b/lib/private/Template/ResourceLocator.php index 89a3a1b025b..21a4ce927e1 100755 --- a/lib/private/Template/ResourceLocator.php +++ b/lib/private/Template/ResourceLocator.php @@ -111,6 +111,7 @@ abstract class ResourceLocator { * * @param string $root path to check * @param string $file the filename + * @param IAppData $appData the appData folder * @param string|null $webRoot base for path, default map $root to $webRoot * @return bool True if the resource was found and cached, false otherwise */ diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index 43160a9c169..def9ecd276e 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -30,19 +30,21 @@ class SCSSCacher { protected $root; protected $folder; protected $file; - protected $fileName; + protected $fileNameSCSS; + protected $fileNameCSS; protected $fileLoc; - protected $fileCache; protected $rootCssLoc; /** @var \OCP\ILogger */ protected $logger; + /** @var \OCP\Files\IAppData */ protected $appData; /** * @param \OCP\ILogger $logger * @param string $root * @param string $file + * @param \OCP\Files\IAppData $appData */ public function __construct(\OCP\ILogger $logger, $root, $file, $appData) { $this->logger = $logger; @@ -50,8 +52,10 @@ class SCSSCacher { $this->root = $root; $this->file = explode('/', $root.'/'.$file); + /* filenames */ $this->fileNameSCSS = array_pop($this->file); $this->fileNameCSS = str_replace('.scss', '.css', $this->fileNameSCSS); + $this->fileLoc = implode('/', $this->file); // base uri to css file @@ -67,6 +71,10 @@ class SCSSCacher { } } + /** + * Process the caching process if needed + * @return boolean + */ public function process() { if($this->is_cached()) { @@ -77,6 +85,10 @@ class SCSSCacher { return false; } + /** + * Check if the file is cached or not + * @return boolean + */ private function is_cached() { try{ $cachedfile = $this->folder->getFile($this->fileNameCSS); @@ -90,6 +102,10 @@ class SCSSCacher { return false; } + /** + * Cache the file with AppData + * @return boolean + */ private function cache() { $scss = new Compiler(); $scss->setImportPaths($this->fileLoc); @@ -108,6 +124,7 @@ class SCSSCacher { $cachedfile = $this->folder->newFile($this->fileNameCSS); } + // Compile try { $compiledScss = $scss->compile('@import "'.$this->fileNameSCSS.'";'); } catch(ParserException $e) { @@ -115,20 +132,32 @@ class SCSSCacher { return false; } - if($cachedfile->putContent($this->rebaseUrls($compiledScss))) { - $this->logger->debug($root.'/'.$file.' compiled and successfully cached', ['app' => 'SCSSPHP']); + try { + $cachedfile->putContent($this->rebaseUrls($compiledScss)); + $this->logger->debug($this->rootCssLoc.'/'.$this->fileNameSCSS.' compiled and successfully cached', ['app' => 'SCSSPHP']); return true; + } catch(NotFoundException $e) { + return false; } return false; } + /** + * Add the correct uri prefix to make uri valid again + * @param string $css + * @return string + */ private function rebaseUrls($css) { $re = '/url\([\'"](.*)[\'"]\)/x'; - $subst = 'url(\'../'.$this->rootCssLoc.'/$1\')'; + $subst = 'url(\'../../../'.$this->rootCssLoc.'/$1\')'; return preg_replace($re, $subst, $css); } + /** + * Return the cached css file uri + * @return string + */ public function getCachedSCSS() { - return $this->fileCache; + return "index.php/css/".$this->fileNameCSS; } } diff --git a/lib/public/ICssManager.php b/lib/public/ICssManager.php new file mode 100644 index 00000000000..0af1472b5c4 --- /dev/null +++ b/lib/public/ICssManager.php @@ -0,0 +1,38 @@ +. + * + */ + +namespace OCP; + +/** + * This class provides scss functionality + * @since 11.0.0 + */ + +interface ICssManager { + + /** + * Get the css file and return ISimpleFile + * + * @param string $fileName css filename with extension + * @return ISimpleFile + */ + public function getCss($fileName); +} From 12717bfd72d715cd6b2c96ffc4bb247229ee6432 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 9 Nov 2016 14:46:11 +0100 Subject: [PATCH 05/43] log app name fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- lib/private/Template/ResourceLocator.php | 2 +- lib/private/Template/SCSSCacher.php | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/private/Template/ResourceLocator.php b/lib/private/Template/ResourceLocator.php index 21a4ce927e1..bb4cfa94f6c 100755 --- a/lib/private/Template/ResourceLocator.php +++ b/lib/private/Template/ResourceLocator.php @@ -127,7 +127,7 @@ abstract class ResourceLocator { $this->append($root, $scssCache->getCachedSCSS(), $webRoot, false); return true; } else { - $this->logger->error('Failed to compile and/or save '.$root.'/'.$file, ['app' => 'SCSSPHP']); + $this->logger->error('Failed to compile and/or save '.$root.'/'.$file, ['app' => 'server']); return false; } } diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index def9ecd276e..c9a7045d592 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -128,13 +128,13 @@ class SCSSCacher { try { $compiledScss = $scss->compile('@import "'.$this->fileNameSCSS.'";'); } catch(ParserException $e) { - $this->logger->error($e, ['app' => 'SCSSPHP']); + $this->logger->error($e, ['app' => 'server']); return false; } try { $cachedfile->putContent($this->rebaseUrls($compiledScss)); - $this->logger->debug($this->rootCssLoc.'/'.$this->fileNameSCSS.' compiled and successfully cached', ['app' => 'SCSSPHP']); + $this->logger->debug($this->rootCssLoc.'/'.$this->fileNameSCSS.' compiled and successfully cached', ['app' => 'server']); return true; } catch(NotFoundException $e) { return false; From 6697bae6aad38d6a362f8342ce2428abf25846fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 9 Nov 2016 15:18:36 +0100 Subject: [PATCH 06/43] Url generator fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- lib/private/Template/SCSSCacher.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index c9a7045d592..42f3e1758f8 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -24,6 +24,7 @@ namespace OC\Template; use Leafo\ScssPhp\Compiler; use Leafo\ScssPhp\Exception\ParserException; use OCP\Files\NotFoundException; +use OCP\IURLGenerator; class SCSSCacher { @@ -158,6 +159,6 @@ class SCSSCacher { * @return string */ public function getCachedSCSS() { - return "index.php/css/".$this->fileNameCSS; + return substr(\OC::$server->getURLGenerator()->linkToRoute('core.Css.getCss', array('fileName' => $this->fileNameCSS)), 1); } } From 2f5f1096ad3d754ae4e55d5e53be44e5bba9db19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 9 Nov 2016 15:21:13 +0100 Subject: [PATCH 07/43] Since fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- lib/private/CssManager.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/private/CssManager.php b/lib/private/CssManager.php index 016227b9c3f..77e1e421eae 100644 --- a/lib/private/CssManager.php +++ b/lib/private/CssManager.php @@ -27,7 +27,9 @@ use OCP\ICssManager; /** * This class implements methods to access SCSS cached files + * @since 11.0.0 */ + class CssManager implements ICssManager { /** @var IAppData */ From 3b62003c9c085dc76357220fc83f14bcf96c60a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 10 Nov 2016 16:16:33 +0100 Subject: [PATCH 08/43] Injection fix and log appname fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/Controller/CssController.php | 5 ++--- lib/private/Template/CSSResourceLocator.php | 14 +++++++++++--- lib/private/Template/ResourceLocator.php | 8 +++++--- lib/private/Template/SCSSCacher.php | 17 ++++++++++++----- 4 files changed, 30 insertions(+), 14 deletions(-) diff --git a/core/Controller/CssController.php b/core/Controller/CssController.php index 45a188adba6..31ec801d21c 100644 --- a/core/Controller/CssController.php +++ b/core/Controller/CssController.php @@ -54,7 +54,7 @@ class CssController extends Controller { } /** - * @NoAdminRequired + * @PublicPage * @NoCSRFRequired * * @param string $fileName css filename with extension @@ -76,8 +76,7 @@ class CssController extends Controller { $response->addHeader('Expires', $expires->format(\DateTime::RFC2822)); $response->addHeader('Pragma', 'cache'); return $response; - } else { - return new NotFoundResponse(); } + return new NotFoundResponse(); } } diff --git a/lib/private/Template/CSSResourceLocator.php b/lib/private/Template/CSSResourceLocator.php index 0d190959ea1..8e1cb3a761a 100755 --- a/lib/private/Template/CSSResourceLocator.php +++ b/lib/private/Template/CSSResourceLocator.php @@ -27,7 +27,12 @@ namespace OC\Template; class CSSResourceLocator extends ResourceLocator { + /** @var IAppData */ protected $appData; + /** @var \OCP\IURLGenerator */ + protected $urlGenerator; + /** @var \OCP\Files\IConfig */ + protected $systemConfig; /** * @param \OCP\ILogger $logger @@ -36,8 +41,11 @@ class CSSResourceLocator extends ResourceLocator { * @param array $party_map * @param IAppData $appData */ - public function __construct(\OCP\ILogger $logger, $theme, $core_map, $party_map, $appData) { + public function __construct(\OCP\ILogger $logger, $theme, $core_map, $party_map, \OCP\Files\IAppData $appData, \OCP\IURLGenerator $urlGenerator, $systemConfig) { $this->appData = $appData; + $this->urlGenerator = $urlGenerator; + $this->systemConfig = $systemConfig; + parent::__construct($logger, $theme, $core_map, $party_map); } @@ -47,8 +55,8 @@ class CSSResourceLocator extends ResourceLocator { public function doFind($style) { if (strpos($style, '3rdparty') === 0 && $this->appendIfExist($this->thirdpartyroot, $style.'.css') - || $this->cacheAndAppendScssIfExist($this->serverroot, $style.'.scss', $this->appData) - || $this->cacheAndAppendScssIfExist($this->serverroot, 'core/'.$style.'.scss', $this->appData) + || $this->cacheAndAppendScssIfExist($this->serverroot, $style.'.scss', $this->appData, $this->urlGenerator, $this->systemConfig) + || $this->cacheAndAppendScssIfExist($this->serverroot, 'core/'.$style.'.scss', $this->appData, $this->urlGenerator, $this->systemConfig) || $this->appendIfExist($this->serverroot, $style.'.css') || $this->appendIfExist($this->serverroot, 'core/'.$style.'.css') ) { diff --git a/lib/private/Template/ResourceLocator.php b/lib/private/Template/ResourceLocator.php index bb4cfa94f6c..d5187ef0710 100755 --- a/lib/private/Template/ResourceLocator.php +++ b/lib/private/Template/ResourceLocator.php @@ -115,19 +115,21 @@ abstract class ResourceLocator { * @param string|null $webRoot base for path, default map $root to $webRoot * @return bool True if the resource was found and cached, false otherwise */ - protected function cacheAndAppendScssIfExist($root, $file, $appData, $webRoot = null) { + protected function cacheAndAppendScssIfExist($root, $file, $appData, $urlGenerator, $systemConfig, $webRoot = null) { if (is_file($root.'/'.$file)) { $scssCache = new \OC\Template\SCSSCacher( $this->logger, $root, $file, - $appData); + $appData, + $urlGenerator, + $systemConfig); if($scssCache->process()) { $this->append($root, $scssCache->getCachedSCSS(), $webRoot, false); return true; } else { - $this->logger->error('Failed to compile and/or save '.$root.'/'.$file, ['app' => 'server']); + $this->logger->error('Failed to compile and/or save '.$root.'/'.$file, ['app' => 'core']); return false; } } diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index 42f3e1758f8..a5f4f510204 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -40,6 +40,10 @@ class SCSSCacher { protected $logger; /** @var \OCP\Files\IAppData */ protected $appData; + /** @var \OCP\IURLGenerator */ + protected $urlGenerator; + /** @var \OCP\Files\IConfig */ + protected $systemConfig; /** * @param \OCP\ILogger $logger @@ -47,9 +51,12 @@ class SCSSCacher { * @param string $file * @param \OCP\Files\IAppData $appData */ - public function __construct(\OCP\ILogger $logger, $root, $file, $appData) { + public function __construct(\OCP\ILogger $logger, $root, $file, \OCP\Files\IAppData $appData, \OCP\IURLGenerator $urlGenerator, $systemConfig) { $this->logger = $logger; $this->appData = $appData; + $this->urlGenerator = $urlGenerator; + $this->systemConfig = $systemConfig; + $this->root = $root; $this->file = explode('/', $root.'/'.$file); @@ -110,7 +117,7 @@ class SCSSCacher { private function cache() { $scss = new Compiler(); $scss->setImportPaths($this->fileLoc); - if(\OC::$server->getSystemConfig()->getValue('debug')) { + if($this->systemConfig->getValue('debug')) { // Debug mode $scss->setFormatter('Leafo\ScssPhp\Formatter\Expanded'); $scss->setLineNumberStyle(Compiler::LINE_COMMENTS); @@ -129,13 +136,13 @@ class SCSSCacher { try { $compiledScss = $scss->compile('@import "'.$this->fileNameSCSS.'";'); } catch(ParserException $e) { - $this->logger->error($e, ['app' => 'server']); + $this->logger->error($e, ['app' => 'core']); return false; } try { $cachedfile->putContent($this->rebaseUrls($compiledScss)); - $this->logger->debug($this->rootCssLoc.'/'.$this->fileNameSCSS.' compiled and successfully cached', ['app' => 'server']); + $this->logger->debug($this->rootCssLoc.'/'.$this->fileNameSCSS.' compiled and successfully cached', ['app' => 'core']); return true; } catch(NotFoundException $e) { return false; @@ -159,6 +166,6 @@ class SCSSCacher { * @return string */ public function getCachedSCSS() { - return substr(\OC::$server->getURLGenerator()->linkToRoute('core.Css.getCss', array('fileName' => $this->fileNameCSS)), 1); + return substr($this->urlGenerator->linkToRoute('core.Css.getCss', array('fileName' => $this->fileNameCSS)), 1); } } From 9a21d988242b8c6463891da7857d6b91caea7a2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 10 Nov 2016 16:20:50 +0100 Subject: [PATCH 09/43] Regex fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- lib/private/Template/SCSSCacher.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index a5f4f510204..502088f1688 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -156,7 +156,7 @@ class SCSSCacher { * @return string */ private function rebaseUrls($css) { - $re = '/url\([\'"](.*)[\'"]\)/x'; + $re = '/url\([\'"]([\.\w?=\/-]*)[\'"]\)/x'; $subst = 'url(\'../../../'.$this->rootCssLoc.'/$1\')'; return preg_replace($re, $subst, $css); } From 35b13b856b5ed2ab2c91a171b7c07b9fe60de721 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 10 Nov 2016 16:22:03 +0100 Subject: [PATCH 10/43] Appdata location fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- lib/private/Template/SCSSCacher.php | 4 ++-- lib/private/TemplateLayout.php | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index 502088f1688..800b6b18bac 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -72,10 +72,10 @@ class SCSSCacher { $this->rootCssLoc = implode('/', $this->rootCssLoc); try { - $this->folder = $this->appData->getFolder('css'); + $this->folder = $this->appData->getFolder('core'); } catch(NotFoundException $e) { // creating css appdata folder - $this->folder = $this->appData->newFolder('css'); + $this->folder = $this->appData->newFolder('core'); } } diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php index 96f612c313c..9711b0ff2f8 100644 --- a/lib/private/TemplateLayout.php +++ b/lib/private/TemplateLayout.php @@ -189,7 +189,9 @@ class TemplateLayout extends \OC_Template { $theme, array( \OC::$SERVERROOT => \OC::$WEBROOT ), array( \OC::$SERVERROOT => \OC::$WEBROOT ), - \OC::$server->getAppDataDir('server')); + \OC::$server->getAppDataDir('css'), + \OC::$server->getURLGenerator(), + \OC::$server->getSystemConfig()); $locator->find($styles); return $locator->getResources(); } From 6380d503af3252e0fea8d25e8bbe2f91d5aee1da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 10 Nov 2016 16:36:58 +0100 Subject: [PATCH 11/43] Css cache folder name fix, route fix and various fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/Controller/CssController.php | 5 +++-- core/routes.php | 2 +- lib/private/CssManager.php | 5 +++-- lib/private/Server.php | 2 +- lib/private/Template/CSSResourceLocator.php | 10 ++++++---- lib/private/Template/ResourceLocator.php | 6 ++++-- lib/private/Template/SCSSCacher.php | 14 ++++++++------ lib/public/ICssManager.php | 3 ++- 8 files changed, 28 insertions(+), 19 deletions(-) diff --git a/core/Controller/CssController.php b/core/Controller/CssController.php index 31ec801d21c..323dd21496b 100644 --- a/core/Controller/CssController.php +++ b/core/Controller/CssController.php @@ -58,11 +58,12 @@ class CssController extends Controller { * @NoCSRFRequired * * @param string $fileName css filename with extension + * @param string $appName css folder name * @return text/css */ - public function getCss($fileName) { + public function getCss($fileName, $appName) { try { - $cssFile = $this->cssManager->getCss($fileName); + $cssFile = $this->cssManager->getCss($fileName, $appName); } catch(NotFoundException $e) { return new NotFoundResponse(); } diff --git a/core/routes.php b/core/routes.php index dec979c8ce2..6f1892d19ac 100644 --- a/core/routes.php +++ b/core/routes.php @@ -55,7 +55,7 @@ $application->registerRoutes($this, [ ['name' => 'OCJS#getConfig', 'url' => '/core/js/oc.js', 'verb' => 'GET'], ['name' => 'Preview#getPreview', 'url' => '/core/preview', 'verb' => 'GET'], ['name' => 'Preview#getPreview', 'url' => '/core/preview.png', 'verb' => 'GET'], - ['name' => 'Css#getCss', 'url' => '/css/{fileName}', 'verb' => 'GET'], + ['name' => 'Css#getCss', 'url' => '/css/{appName}/{fileName}', 'verb' => 'GET'], ], 'ocs' => [ ['root' => '/cloud', 'name' => 'OCS#getCapabilities', 'url' => '/capabilities', 'verb' => 'GET'], diff --git a/lib/private/CssManager.php b/lib/private/CssManager.php index 77e1e421eae..e22cb069306 100644 --- a/lib/private/CssManager.php +++ b/lib/private/CssManager.php @@ -48,11 +48,12 @@ class CssManager implements ICssManager { * Get the css file and return ISimpleFile * * @param string $fileName css filename with extension + * @param string $appName css app name * @return ISimpleFile */ - public function getCss($fileName) { + public function getCss($fileName, $appName) { try { - $folder = $this->appData->getFolder('css'); + $folder = $this->appData->getFolder($appName); } catch(NotFoundException $e) { throw new NotFoundException(); } diff --git a/lib/private/Server.php b/lib/private/Server.php index 2dbf827844d..a8825f9ff24 100644 --- a/lib/private/Server.php +++ b/lib/private/Server.php @@ -419,7 +419,7 @@ class Server extends ServerContainer implements IServerContainer { }); $this->registerService('CssManager', function (Server $c) { return new CssManager( - $c->getAppDataDir('server') + $c->getAppDataDir('css') ); }); $this->registerService('Logger', function (Server $c) { diff --git a/lib/private/Template/CSSResourceLocator.php b/lib/private/Template/CSSResourceLocator.php index 8e1cb3a761a..b592dd63ae1 100755 --- a/lib/private/Template/CSSResourceLocator.php +++ b/lib/private/Template/CSSResourceLocator.php @@ -27,11 +27,11 @@ namespace OC\Template; class CSSResourceLocator extends ResourceLocator { - /** @var IAppData */ + /** @var \OCP\Files\IAppData */ protected $appData; /** @var \OCP\IURLGenerator */ protected $urlGenerator; - /** @var \OCP\Files\IConfig */ + /** @var \OC\SystemConfig */ protected $systemConfig; /** @@ -39,9 +39,11 @@ class CSSResourceLocator extends ResourceLocator { * @param string $theme * @param array $core_map * @param array $party_map - * @param IAppData $appData + * @param \OCP\Files\IAppData $appData + * @param \OCP\IURLGenerator $urlGenerator + * @param \OC\SystemConfig $systemConfig */ - public function __construct(\OCP\ILogger $logger, $theme, $core_map, $party_map, \OCP\Files\IAppData $appData, \OCP\IURLGenerator $urlGenerator, $systemConfig) { + public function __construct(\OCP\ILogger $logger, $theme, $core_map, $party_map, \OCP\Files\IAppData $appData, \OCP\IURLGenerator $urlGenerator, \OC\SystemConfig $systemConfig) { $this->appData = $appData; $this->urlGenerator = $urlGenerator; $this->systemConfig = $systemConfig; diff --git a/lib/private/Template/ResourceLocator.php b/lib/private/Template/ResourceLocator.php index d5187ef0710..07a4387df8a 100755 --- a/lib/private/Template/ResourceLocator.php +++ b/lib/private/Template/ResourceLocator.php @@ -111,7 +111,9 @@ abstract class ResourceLocator { * * @param string $root path to check * @param string $file the filename - * @param IAppData $appData the appData folder + * @param \OCP\Files\IAppData $appData + * @param \OCP\IURLGenerator $urlGenerator + * @param \OC\SystemConfig $systemConfig * @param string|null $webRoot base for path, default map $root to $webRoot * @return bool True if the resource was found and cached, false otherwise */ @@ -126,7 +128,7 @@ abstract class ResourceLocator { $systemConfig); if($scssCache->process()) { - $this->append($root, $scssCache->getCachedSCSS(), $webRoot, false); + $this->append($root, $scssCache->getCachedSCSS('core'), $webRoot, false); return true; } else { $this->logger->error('Failed to compile and/or save '.$root.'/'.$file, ['app' => 'core']); diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index 800b6b18bac..e72e122155c 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -42,7 +42,7 @@ class SCSSCacher { protected $appData; /** @var \OCP\IURLGenerator */ protected $urlGenerator; - /** @var \OCP\Files\IConfig */ + /** @var \OC\SystemConfig */ protected $systemConfig; /** @@ -50,8 +50,10 @@ class SCSSCacher { * @param string $root * @param string $file * @param \OCP\Files\IAppData $appData + * @param \OCP\IURLGenerator $urlGenerator + * @param \OC\SystemConfig $systemConfig */ - public function __construct(\OCP\ILogger $logger, $root, $file, \OCP\Files\IAppData $appData, \OCP\IURLGenerator $urlGenerator, $systemConfig) { + public function __construct(\OCP\ILogger $logger, $root, $file, \OCP\Files\IAppData $appData, \OCP\IURLGenerator $urlGenerator, \OC\SystemConfig $systemConfig) { $this->logger = $logger; $this->appData = $appData; $this->urlGenerator = $urlGenerator; @@ -90,7 +92,6 @@ class SCSSCacher { } else { return $this->cache(); } - return false; } /** @@ -107,7 +108,7 @@ class SCSSCacher { } catch(NotFoundException $e) { return false; } - return false; + return false; } /** @@ -163,9 +164,10 @@ class SCSSCacher { /** * Return the cached css file uri + * @param string $appName the app name * @return string */ - public function getCachedSCSS() { - return substr($this->urlGenerator->linkToRoute('core.Css.getCss', array('fileName' => $this->fileNameCSS)), 1); + public function getCachedSCSS($appName) { + return substr($this->urlGenerator->linkToRoute('core.Css.getCss', array('fileName' => $this->fileNameCSS, 'appName' => $appName)), 1); } } diff --git a/lib/public/ICssManager.php b/lib/public/ICssManager.php index 0af1472b5c4..776ffefd823 100644 --- a/lib/public/ICssManager.php +++ b/lib/public/ICssManager.php @@ -32,7 +32,8 @@ interface ICssManager { * Get the css file and return ISimpleFile * * @param string $fileName css filename with extension + * @param string $appName css app name * @return ISimpleFile */ - public function getCss($fileName); + public function getCss($fileName, $appName); } From 1f769e6e76c3741d322b8856929f723f755c9f79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 15 Nov 2016 11:15:44 +0100 Subject: [PATCH 12/43] Fix php docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- .../DependencyInjection/DIContainer.php | 1 - lib/private/CssManager.php | 1 + lib/private/Server.php | 2 -- lib/private/Template/SCSSCacher.php | 36 ++++++++++--------- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/lib/private/AppFramework/DependencyInjection/DIContainer.php b/lib/private/AppFramework/DependencyInjection/DIContainer.php index 57e7749ca86..3e514ca533d 100644 --- a/lib/private/AppFramework/DependencyInjection/DIContainer.php +++ b/lib/private/AppFramework/DependencyInjection/DIContainer.php @@ -95,7 +95,6 @@ class DIContainer extends SimpleContainer implements IAppContainer { return $this->getServer()->getAvatarManager(); }); - $this->registerService('OCP\\ICssManager', function($c) { return $this->getServer()->getCssManager(); }); diff --git a/lib/private/CssManager.php b/lib/private/CssManager.php index e22cb069306..8ab9a778b1c 100644 --- a/lib/private/CssManager.php +++ b/lib/private/CssManager.php @@ -50,6 +50,7 @@ class CssManager implements ICssManager { * @param string $fileName css filename with extension * @param string $appName css app name * @return ISimpleFile + * @throws NotFoundException */ public function getCss($fileName, $appName) { try { diff --git a/lib/private/Server.php b/lib/private/Server.php index a8825f9ff24..381ac3fa983 100644 --- a/lib/private/Server.php +++ b/lib/private/Server.php @@ -903,7 +903,6 @@ class Server extends ServerContainer implements IServerContainer { return $this->query('SystemTagObjectMapper'); } - /** * Returns the avatar manager, used for avatar functionality * @@ -913,7 +912,6 @@ class Server extends ServerContainer implements IServerContainer { return $this->query('AvatarManager'); } - /** * Returns the css manager * diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index e72e122155c..0b22e44d7c6 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -28,27 +28,29 @@ use OCP\IURLGenerator; class SCSSCacher { - protected $root; - protected $folder; - protected $file; - protected $fileNameSCSS; - protected $fileNameCSS; - protected $fileLoc; - protected $rootCssLoc; + /** + * @var string The root path to the nextcloud installation + * @var array The exploded absolute path to the file + * @var string The scss filename with extension + * @var string The css filename with extension + * @var string Absolute path to scss file location folder + * @var string Path to scss file from the root installation + * @var OC\Files\SimpleFS\SimpleFolder The folder we're putting our compiled css files + */ + protected $root, $file, $fileNameSCSS, $fileNameCSS, $fileLoc, $rootCssLoc, $folder; - /** @var \OCP\ILogger */ - protected $logger; - /** @var \OCP\Files\IAppData */ - protected $appData; - /** @var \OCP\IURLGenerator */ - protected $urlGenerator; - /** @var \OC\SystemConfig */ - protected $systemConfig; + /** + * @var \OCP\ILogger + * @var \OCP\Files\IAppData + * @var \OCP\IURLGenerator + * @var \OC\SystemConfig + */ + protected $logger, $appData, $urlGenerator, $systemConfig; /** * @param \OCP\ILogger $logger - * @param string $root - * @param string $file + * @param string $root Root path to the nextcloud installation + * @param string $file * @param \OCP\Files\IAppData $appData * @param \OCP\IURLGenerator $urlGenerator * @param \OC\SystemConfig $systemConfig From 2816177ecb8349de87677a83d9dabbdc069fd346 Mon Sep 17 00:00:00 2001 From: Roeland Jago Douma Date: Tue, 22 Nov 2016 11:42:46 +0100 Subject: [PATCH 13/43] Code cleanup Signed-off-by: Roeland Jago Douma --- core/Controller/CssController.php | 2 +- lib/private/CssManager.php | 13 +++---------- lib/private/Server.php | 4 ++-- lib/private/Template/SCSSCacher.php | 5 ++--- lib/public/ICssManager.php | 4 ++++ 5 files changed, 12 insertions(+), 16 deletions(-) diff --git a/core/Controller/CssController.php b/core/Controller/CssController.php index 323dd21496b..a8d182418d4 100644 --- a/core/Controller/CssController.php +++ b/core/Controller/CssController.php @@ -59,7 +59,7 @@ class CssController extends Controller { * * @param string $fileName css filename with extension * @param string $appName css folder name - * @return text/css + * @return FileDisplayResponse|NotFoundResponse */ public function getCss($fileName, $appName) { try { diff --git a/lib/private/CssManager.php b/lib/private/CssManager.php index 8ab9a778b1c..ba5ce0dd2bf 100644 --- a/lib/private/CssManager.php +++ b/lib/private/CssManager.php @@ -23,6 +23,7 @@ namespace OC; use OCP\Files\IAppData; use OCP\Files\NotFoundException; +use OCP\Files\SimpleFS\ISimpleFile; use OCP\ICssManager; /** @@ -53,15 +54,7 @@ class CssManager implements ICssManager { * @throws NotFoundException */ public function getCss($fileName, $appName) { - try { - $folder = $this->appData->getFolder($appName); - } catch(NotFoundException $e) { - throw new NotFoundException(); - } - try { - return $folder->getFile($fileName); - } catch(NotFoundException $e) { - throw new NotFoundException(); - } + $folder = $this->appData->getFolder($appName); + return $folder->getFile($fileName); } } diff --git a/lib/private/Server.php b/lib/private/Server.php index 381ac3fa983..b3449f14c35 100644 --- a/lib/private/Server.php +++ b/lib/private/Server.php @@ -417,7 +417,7 @@ class Server extends ServerContainer implements IServerContainer { $c->getConfig() ); }); - $this->registerService('CssManager', function (Server $c) { + $this->registerService(CssManager::class, function (Server $c) { return new CssManager( $c->getAppDataDir('css') ); @@ -918,7 +918,7 @@ class Server extends ServerContainer implements IServerContainer { * @return \OCP\ICssManager */ public function getCssManager() { - return $this->query('CssManager'); + return $this->query(CssManager::class); } /** diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index 0b22e44d7c6..db08653c884 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -23,8 +23,8 @@ namespace OC\Template; use Leafo\ScssPhp\Compiler; use Leafo\ScssPhp\Exception\ParserException; +use OC\Files\SimpleFS\SimpleFolder; use OCP\Files\NotFoundException; -use OCP\IURLGenerator; class SCSSCacher { @@ -35,7 +35,7 @@ class SCSSCacher { * @var string The css filename with extension * @var string Absolute path to scss file location folder * @var string Path to scss file from the root installation - * @var OC\Files\SimpleFS\SimpleFolder The folder we're putting our compiled css files + * @var SimpleFolder The folder we're putting our compiled css files */ protected $root, $file, $fileNameSCSS, $fileNameCSS, $fileLoc, $rootCssLoc, $folder; @@ -150,7 +150,6 @@ class SCSSCacher { } catch(NotFoundException $e) { return false; } - return false; } /** diff --git a/lib/public/ICssManager.php b/lib/public/ICssManager.php index 776ffefd823..38801502974 100644 --- a/lib/public/ICssManager.php +++ b/lib/public/ICssManager.php @@ -21,6 +21,9 @@ namespace OCP; +use OCP\Files\NotFoundException; +use OCP\Files\SimpleFS\ISimpleFile; + /** * This class provides scss functionality * @since 11.0.0 @@ -34,6 +37,7 @@ interface ICssManager { * @param string $fileName css filename with extension * @param string $appName css app name * @return ISimpleFile + * @throws NotFoundException */ public function getCss($fileName, $appName); } From 95d85ba8eb3ba65d457fbfe935fe60eda878f2e8 Mon Sep 17 00:00:00 2001 From: Roeland Jago Douma Date: Tue, 22 Nov 2016 12:08:53 +0100 Subject: [PATCH 14/43] Do not add ICssManager to OCP We can add it later if needed Signed-off-by: Roeland Jago Douma --- core/Application.php | 4 +++ core/Controller/CssController.php | 9 ++++--- lib/private/CssManager.php | 3 +-- lib/private/Server.php | 14 ---------- lib/public/ICssManager.php | 43 ------------------------------- 5 files changed, 10 insertions(+), 63 deletions(-) delete mode 100644 lib/public/ICssManager.php diff --git a/core/Application.php b/core/Application.php index 545b5fe420b..ec93c50b445 100644 --- a/core/Application.php +++ b/core/Application.php @@ -31,6 +31,7 @@ namespace OC\Core; use OC\AppFramework\Utility\SimpleContainer; +use OC\CssManager; use OC\Security\IdentityProof\Manager; use OCP\AppFramework\App; use OCP\Files\IAppData; @@ -57,5 +58,8 @@ class Application extends App { \OC::$server->getCrypto() ); }); + $container->registerService(CssManager::class, function () { + return new CssManager(\OC::$server->getAppDataDir('css')); + }); } } diff --git a/core/Controller/CssController.php b/core/Controller/CssController.php index a8d182418d4..eb5e8d55b26 100644 --- a/core/Controller/CssController.php +++ b/core/Controller/CssController.php @@ -22,17 +22,18 @@ namespace OC\Core\Controller; use OC\AppFramework\Utility\TimeFactory; +use OC\CssManager; use OCP\AppFramework\Controller; use OCP\AppFramework\Http; use OCP\AppFramework\Http\NotFoundResponse; use OCP\AppFramework\Http\FileDisplayResponse; -use OCP\ICssManager; +use OCP\Files\NotFoundException; use OCP\IRequest; class CssController extends Controller { - /** @var ICssManager */ + /** @var CssManager */ protected $cssManager; /** @var TimeFactory */ @@ -43,10 +44,10 @@ class CssController extends Controller { /** * @param string $appName * @param IRequest $request - * @param ICssManager $cssManager + * @param CssManager $cssManager * @param TimeFactory $timeFactory */ - public function __construct($appName, IRequest $request, ICssManager $cssManager, TimeFactory $timeFactory) { + public function __construct($appName, IRequest $request, CssManager $cssManager, TimeFactory $timeFactory) { parent::__construct($appName, $request); $this->cssManager = $cssManager; diff --git a/lib/private/CssManager.php b/lib/private/CssManager.php index ba5ce0dd2bf..e0f710b8d7c 100644 --- a/lib/private/CssManager.php +++ b/lib/private/CssManager.php @@ -24,14 +24,13 @@ namespace OC; use OCP\Files\IAppData; use OCP\Files\NotFoundException; use OCP\Files\SimpleFS\ISimpleFile; -use OCP\ICssManager; /** * This class implements methods to access SCSS cached files * @since 11.0.0 */ -class CssManager implements ICssManager { +class CssManager { /** @var IAppData */ private $appData; diff --git a/lib/private/Server.php b/lib/private/Server.php index b3449f14c35..cc295dccd17 100644 --- a/lib/private/Server.php +++ b/lib/private/Server.php @@ -417,11 +417,6 @@ class Server extends ServerContainer implements IServerContainer { $c->getConfig() ); }); - $this->registerService(CssManager::class, function (Server $c) { - return new CssManager( - $c->getAppDataDir('css') - ); - }); $this->registerService('Logger', function (Server $c) { $logClass = $c->query('AllConfig')->getSystemValue('log_type', 'file'); // TODO: Drop backwards compatibility for config in the future @@ -912,15 +907,6 @@ class Server extends ServerContainer implements IServerContainer { return $this->query('AvatarManager'); } - /** - * Returns the css manager - * - * @return \OCP\ICssManager - */ - public function getCssManager() { - return $this->query(CssManager::class); - } - /** * Returns the root folder of ownCloud's data directory * diff --git a/lib/public/ICssManager.php b/lib/public/ICssManager.php deleted file mode 100644 index 38801502974..00000000000 --- a/lib/public/ICssManager.php +++ /dev/null @@ -1,43 +0,0 @@ -. - * - */ - -namespace OCP; - -use OCP\Files\NotFoundException; -use OCP\Files\SimpleFS\ISimpleFile; - -/** - * This class provides scss functionality - * @since 11.0.0 - */ - -interface ICssManager { - - /** - * Get the css file and return ISimpleFile - * - * @param string $fileName css filename with extension - * @param string $appName css app name - * @return ISimpleFile - * @throws NotFoundException - */ - public function getCss($fileName, $appName); -} From 763814f057cce0221d298aa045eaee20fa067a51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 23 Nov 2016 17:56:05 +0100 Subject: [PATCH 15/43] Css installation page fallback MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/installation.css | 9 +++++++++ lib/private/TemplateLayout.php | 9 +++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 core/css/installation.css diff --git a/core/css/installation.css b/core/css/installation.css new file mode 100644 index 00000000000..a57f7c00eaa --- /dev/null +++ b/core/css/installation.css @@ -0,0 +1,9 @@ +/* + * Installation css file. + * This file is used on the install page only when the database + * isn't set, preventing scss files to be stored using the AppdataController. + * It should contain every style needed to correctly display the installation template. + * + */ + + \ No newline at end of file diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php index 9711b0ff2f8..8c8f9cfc33b 100644 --- a/lib/private/TemplateLayout.php +++ b/lib/private/TemplateLayout.php @@ -159,8 +159,13 @@ class TemplateLayout extends \OC_Template { $this->append( 'jsfiles', $web.'/'.$file . '?v=' . self::$versionHash); } - // Add the css files - $cssFiles = self::findStylesheetFiles(\OC_Util::$styles); + // Add the css files and check if server is already installed to prevent + // appdata initialisation before database configuration + if(\OC::$server->getSystemConfig()->getValue('installed', false)) { + $cssFiles = self::findStylesheetFiles(\OC_Util::$styles); + } else { + $cssFiles = array(array(\OC::$SERVERROOT, '', 'core/css/installation.css')); + } $this->assign('cssfiles', array()); $this->assign('printcssfiles', []); $this->assign('versionHash', self::$versionHash); From bd5bcd2d8d32f2f7422ecc47caddda69a92d525e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 24 Nov 2016 17:20:35 +0100 Subject: [PATCH 16/43] Installation css & template edit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/installation.css | 726 ++++++++++++++++++++++++++++++++- lib/private/TemplateLayout.php | 6 +- 2 files changed, 724 insertions(+), 8 deletions(-) diff --git a/core/css/installation.css b/core/css/installation.css index a57f7c00eaa..b57024336e4 100644 --- a/core/css/installation.css +++ b/core/css/installation.css @@ -1,9 +1,721 @@ /* - * Installation css file. - * This file is used on the install page only when the database - * isn't set, preventing scss files to be stored using the AppdataController. - * It should contain every style needed to correctly display the installation template. - * - */ +* Installation css file. +* This file is used on the install page only when the database +* isn't set, preventing scss files to be stored using the AppdataController. +* It should contain every style needed to correctly display the installation template. +* +*/ +html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + cursor: default; +} - \ No newline at end of file +html, body { + height: 100%; +} + +article, aside, dialog, figure, footer, header, hgroup, nav, section { + display: block; +} + +body { + line-height: 1.5; +} + +table { + border-collapse: separate; + border-spacing: 0; + white-space: nowrap; +} + +caption, th, td { + text-align: left; + font-weight: normal; +} + +table, td, th { + vertical-align: middle; +} + +a { + border: 0; + color: #000; + text-decoration: none; + cursor: pointer; +} +a * { + cursor: pointer; +} + +input { + cursor: pointer; +} +input * { + cursor: pointer; +} + +select, .button span, label { + cursor: pointer; +} + +ul { + list-style: none; +} + +body { + background-color: #ffffff; + font-weight: 400; + font-size: .8em; + line-height: 1.6em; + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; + color: #000; + height: auto; +} + +#body-login { + text-align: center; + background-color: #0082c9; + background-image: url("../img/background.jpg?v=1"); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + /* fix background gradient */ + height: 100%; + /* fix sticky footer */ +} + +#header { + padding-top: 100px; +} + +p.info, form fieldset legend, #datadirContent label { + text-align: center; + color: #fff; +} + +form fieldset .warning-info, form input[type='checkbox'] + label { + text-align: center; + color: #fff; +} +form .warning input[type='checkbox']:hover + label, form .warning input[type='checkbox']:focus + label, form .warning input[type='checkbox'] + label { + color: #fff !important; +} + +.infogroup { + margin-bottom: 15px; +} + +p#message img { + vertical-align: middle; + padding: 5px; +} + +div.buttons { + text-align: center; +} + +p.info { + width: 22em; + margin: 0 auto; + padding-top: 20px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +p.info a { + font-weight: 600; + padding: 13px; + margin: -13px; + color: #fff; +} + +#body-login .warning, #body-login .update, #body-login .error { + display: block; + padding: 10px; + background-color: rgba(0, 0, 0, 0.3); + color: #fff; + text-align: left; + border-radius: 3px; + cursor: default; +} + +#body-login .warning { + margin: 0 7px 5px 4px; +} + +form { + position: relative; + width: 280px; + margin: 16px auto; + padding: 0; +} +form fieldset { + margin-bottom: 20px; + text-align: left; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +form #sqliteInformation { + margin-top: -20px; + margin-bottom: 20px; +} +form #adminaccount { + margin-bottom: 15px; +} +form fieldset legend { + width: 100%; +} +form fieldset.warning legend, form fieldset.update legend { + top: 18px; + position: relative; +} +form fieldset.warning legend + p, form fieldset.update legend + p { + margin-top: 12px; +} +form input[type='checkbox'] + label { + position: relative; + margin: 0; + padding: 14px; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +form .errors { + background: #fed7d7; + border: 1px solid #f00; + list-style-indent: inside; + margin: 0 0 2em; + padding: 1em; +} +form .success { + background: #d7fed7; + border: 1px solid #0f0; + width: 35%; + margin: 30px auto; + padding: 1em; + text-align: center; +} +form #showAdvanced > img { + padding: 4px; + box-sizing: border-box; +} +form p.info a, form #showAdvanced { + color: #fff; +} +form #remember_login:hover + label, form #remember_login:focus + label { + opacity: .6; +} +form #forgot-password:hover, form #forgot-password:focus { + opacity: .6; +} +form p.info a:hover, form p.info a:focus { + opacity: .6; +} +form footer .info { + white-space: nowrap; +} + +#datadirContent label { + display: block; + width: 100%; + margin: 0; +} + +form #datadirField legend { + margin-bottom: 15px; +} + +#showAdvanced { + padding: 13px; + /* increase clickable area of Advanced dropdown */ +} +#showAdvanced img { + vertical-align: bottom; + /* adjust position of Advanced dropdown arrow */ + margin-left: -4px; +} + +.icon-info-white { + padding: 10px; +} + +.float-spinner { + height: 32px; + display: none; +} + +.strengthify-wrapper { + display: inline-block; + position: relative; + left: 15px; + top: -23px; + width: 250px; +} + +.tipsy-inner { + font-weight: bold; + color: #ccc; +} + +input[type="submit"], input[type="button"], button, .button { + width: auto; + min-width: 25px; + padding: 5px; + background-color: rgba(240, 240, 240, 0.9); + font-weight: 600; + color: #555; + border: 1px solid rgba(240, 240, 240, 0.9); + cursor: pointer; +} + +input { + font-size: 20px; + margin: 5px; + padding: 11px 10px 9px; +} +input[type='text'], input[type='password'], input[type='email'] { + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; + border: none; + font-weight: 300; + font-size: 20px; + margin: 5px; + padding: 11px 10px 9px; + -webkit-appearance: textfield; + -moz-appearance: textfield; + box-sizing: content-box; + background: #fff; + color: #555; + cursor: text; + font-family: inherit; + outline: none; + border-radius: 3px; + width: 249px; +} +input.login { + width: 269px; + background-position: right 16px center; +} +input[type='submit'] { + padding: 10px 20px; + /* larger log in and installation buttons */ +} + +/* Nicely grouping input field sets */ +.grouptop, .groupmiddle, .groupbottom { + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.grouptop input { + margin-bottom: 0 !important; + border-bottom: 0 !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.groupmiddle input { + margin-top: 0 !important; + margin-bottom: 0 !important; + border-top: 0 !important; + border-bottom: 0 !important; + border-radius: 0 !important; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; +} + +.groupbottom input { + margin-top: 0 !important; + border-top: 0 !important; + border-top-right-radius: 0 !important; + border-top-left-radius: 0 !important; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; +} + +.groupbottom input[type=submit] { + box-shadow: none !important; +} + +label.infield { + display: none; +} + +/* Primary action button, use sparingly */ +.primary { + border: 1px solid #0082c9; + background-color: #00a2e9; + color: #fff; +} + +input[type='submit'].primary, input[type='button'].primary { + border: 1px solid #0082c9; + background-color: #00a2e9; + color: #fff; +} + +button.primary, .button.primary { + border: 1px solid #0082c9; + background-color: #00a2e9; + color: #fff; +} + +.primary:hover { + background-color: #0092d9; + color: #fff; +} + +input[type='submit'].primary:hover, input[type='button'].primary:hover { + background-color: #0092d9; + color: #fff; +} + +button.primary:hover, .button.primary:hover, .primary:focus { + background-color: #0092d9; + color: #fff; +} + +input[type='submit'].primary:focus, input[type='button'].primary:focus { + background-color: #0092d9; + color: #fff; +} + +button.primary:focus, .button.primary:focus { + background-color: #0092d9; + color: #fff; +} + +.primary:active { + background-color: #00a2e9; + color: #bbb; +} + +input[type='submit'].primary:active, input[type='button'].primary:active { + background-color: #00a2e9; + color: #bbb; +} + +button.primary:active, .button.primary:active, .primary:disabled { + background-color: #00a2e9; + color: #bbb; +} + +input[type='submit'].primary:disabled, input[type='button'].primary:disabled { + background-color: #00a2e9; + color: #bbb; +} + +button.primary:disabled, .button.primary:disabled, .primary:disabled:hover { + background-color: #00a2e9; + color: #bbb; +} + +input[type='submit'].primary:disabled:hover, input[type='button'].primary:disabled:hover { + background-color: #00a2e9; + color: #bbb; +} + +button.primary:disabled:hover, .button.primary:disabled:hover, .primary:disabled:focus { + background-color: #00a2e9; + color: #bbb; +} + +input[type='submit'].primary:disabled:focus, input[type='button'].primary:disabled:focus { + background-color: #00a2e9; + color: #bbb; +} + +button.primary:disabled:focus, .button.primary:disabled:focus { + background-color: #00a2e9; + color: #bbb; +} + +/* LOGO */ +#header .logo { + background-image: url(../img/logo-icon.svg?v=1); + background-repeat: no-repeat; + background-size: 175px; + background-position: center; + width: 252px; + height: 120px; + margin: 0 auto; +} + +/* Show password toggle */ +#show, #dbpassword { + position: absolute; + right: 1em; + top: .8em; + float: right; +} + +#show, #dbpassword, #personal-show { + display: none; +} + +#show + label, #dbpassword + label { + right: 21px; + top: 15px !important; + margin: -14px !important; + padding: 14px !important; +} + +#show:checked + label, #dbpassword:checked + label, #personal-show:checked + label { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; + opacity: .8; +} + +#show + label, #dbpassword + label, #personal-show + label { + position: absolute !important; + height: 20px; + width: 24px; + background-image: url("../img/actions/toggle.svg?v=1"); + background-repeat: no-repeat; + background-position: center; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; + opacity: .3; +} + +#show + label:before, #dbpassword + label:before, #personal-show + label:before { + display: none; +} + +#pass2, input[name='personal-password-clone'] { + padding: .6em 2.5em .4em .4em; + width: 8em; +} + +#personal-show + label { + height: 14px; + margin-top: -25px; + left: 295px; + display: block; +} + +#passwordbutton { + margin-left: .5em; +} + +/* LOADER */ +#body-login .float-spinner { + margin-top: -32px; + padding-top: 32px; +} + +[class^='icon-'], [class*=' icon-'] { + background-repeat: no-repeat; + background-position: center; + min-width: 16px; + min-height: 16px; +} + +.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark { + position: relative; +} + +.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { + z-index: 2; + content: ''; + height: 32px; + width: 32px; + margin: -17px 0 0 -17px; + position: absolute; + top: 50%; + left: 50%; + border-radius: 100%; + -webkit-animation: rotate .8s infinite linear; + animation: rotate .8s infinite linear; + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} + +.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { + border: 2px solid rgba(150, 150, 150, 0.5); + border-top-color: #646464; +} + +.icon-loading-dark:after, .icon-loading-small-dark:after { + border: 2px solid rgba(187, 187, 187, 0.5); + border-top-color: #bbb; +} + +.icon-loading-small:after, .icon-loading-small-dark:after { + height: 16px; + width: 16px; + margin: -9px 0 0 -9px; +} + +.icon-info-white { + background-image: url(../img/actions/info-white.svg?v=1); +} + +@-webkit-keyframes rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +/*! + * Bootstrap v3.3.5 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ +.tooltip { + position: absolute; + z-index: 1070; + display: block; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-style: normal; + font-weight: normal; + letter-spacing: normal; + line-break: auto; + line-height: 1.42857143; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + white-space: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + font-size: 12px; + opacity: 0; + filter: alpha(opacity=0); +} +.tooltip.in { + opacity: 0.9; + filter: alpha(opacity=90); +} +.tooltip.top { + margin-top: -3px; + padding: 5px 0; +} +.tooltip.right { + margin-left: 3px; + padding: 0 5px; +} +.tooltip.bottom { + margin-top: 3px; + padding: 5px 0; +} +.tooltip.left { + margin-left: -3px; + padding: 0 5px; +} + +.tooltip-inner { + max-width: 350px; + padding: 3px 8px; + color: #ffffff; + text-align: center; + background-color: #000000; + border-radius: 4px; +} + +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} + +.tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; +} +.tooltip.top-left .tooltip-arrow { + bottom: 0; + right: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; +} +.tooltip.top-right .tooltip-arrow { + bottom: 0; + left: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; +} +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #000000; +} +.tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #000000; +} +.tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; +} +.tooltip.bottom-left .tooltip-arrow { + top: 0; + right: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; +} +.tooltip.bottom-right .tooltip-arrow { + top: 0; + left: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; +} + +/* SCROLLING */ +::-webkit-scrollbar { + width: 5px; +} + +::-webkit-scrollbar-track-piece { + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background: #ddd; + border-radius: 3px; +} diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php index 8c8f9cfc33b..8ba5bc561f0 100644 --- a/lib/private/TemplateLayout.php +++ b/lib/private/TemplateLayout.php @@ -164,7 +164,11 @@ class TemplateLayout extends \OC_Template { if(\OC::$server->getSystemConfig()->getValue('installed', false)) { $cssFiles = self::findStylesheetFiles(\OC_Util::$styles); } else { - $cssFiles = array(array(\OC::$SERVERROOT, '', 'core/css/installation.css')); + $cssFiles = array( + [\OC::$SERVERROOT, '', 'core/css/global.css'], + [\OC::$SERVERROOT, '', 'core/css/fonts.css'], + [\OC::$SERVERROOT, '', 'core/css/installation.css'] + ); } $this->assign('cssfiles', array()); $this->assign('printcssfiles', []); From 1e44a15dd1cba215bf10d0f73a7ef2730a77c2b0 Mon Sep 17 00:00:00 2001 From: Roeland Jago Douma Date: Wed, 30 Nov 2016 16:14:00 +0100 Subject: [PATCH 17/43] No need for the CssManager * It is a simple wrapper we can always add it later if needed Signed-off-by: Roeland Jago Douma --- core/Application.php | 15 +++-- core/Controller/CssController.php | 18 +++--- .../DependencyInjection/DIContainer.php | 4 -- lib/private/CssManager.php | 59 ------------------- 4 files changed, 19 insertions(+), 77 deletions(-) delete mode 100644 lib/private/CssManager.php diff --git a/core/Application.php b/core/Application.php index ec93c50b445..dad7546dcb8 100644 --- a/core/Application.php +++ b/core/Application.php @@ -30,11 +30,11 @@ namespace OC\Core; -use OC\AppFramework\Utility\SimpleContainer; -use OC\CssManager; use OC\Security\IdentityProof\Manager; use OCP\AppFramework\App; -use OCP\Files\IAppData; +use OC\Core\Controller\CssController; +use OCP\AppFramework\Utility\ITimeFactory; +use OCP\IRequest; use OCP\Util; /** @@ -58,8 +58,13 @@ class Application extends App { \OC::$server->getCrypto() ); }); - $container->registerService(CssManager::class, function () { - return new CssManager(\OC::$server->getAppDataDir('css')); + $container->registerService(CssController::class, function () use ($container) { + return new CssController( + $container->query('appName'), + $container->query(IRequest::class), + \OC::$server->getAppDataDir('css'), + $container->query(ITimeFactory::class) + ); }); } } diff --git a/core/Controller/CssController.php b/core/Controller/CssController.php index eb5e8d55b26..e547987902d 100644 --- a/core/Controller/CssController.php +++ b/core/Controller/CssController.php @@ -27,30 +27,29 @@ use OCP\AppFramework\Controller; use OCP\AppFramework\Http; use OCP\AppFramework\Http\NotFoundResponse; use OCP\AppFramework\Http\FileDisplayResponse; +use OCP\Files\IAppData; use OCP\Files\NotFoundException; use OCP\IRequest; - +use OCP\Notification\IApp; class CssController extends Controller { - /** @var CssManager */ - protected $cssManager; + /** @var IAppData */ + protected $appData; /** @var TimeFactory */ protected $timeFactory; - - /** * @param string $appName * @param IRequest $request - * @param CssManager $cssManager + * @param IAppData $appData * @param TimeFactory $timeFactory */ - public function __construct($appName, IRequest $request, CssManager $cssManager, TimeFactory $timeFactory) { + public function __construct($appName, IRequest $request, IAppData $appData, TimeFactory $timeFactory) { parent::__construct($appName, $request); - $this->cssManager = $cssManager; + $this->appData = $appData; $this->timeFactory = $timeFactory; } @@ -64,7 +63,8 @@ class CssController extends Controller { */ public function getCss($fileName, $appName) { try { - $cssFile = $this->cssManager->getCss($fileName, $appName); + $folder = $this->appData->getFolder($appName); + $cssFile = $folder->getFile($fileName); } catch(NotFoundException $e) { return new NotFoundResponse(); } diff --git a/lib/private/AppFramework/DependencyInjection/DIContainer.php b/lib/private/AppFramework/DependencyInjection/DIContainer.php index 3e514ca533d..ac42960f54d 100644 --- a/lib/private/AppFramework/DependencyInjection/DIContainer.php +++ b/lib/private/AppFramework/DependencyInjection/DIContainer.php @@ -95,10 +95,6 @@ class DIContainer extends SimpleContainer implements IAppContainer { return $this->getServer()->getAvatarManager(); }); - $this->registerService('OCP\\ICssManager', function($c) { - return $this->getServer()->getCssManager(); - }); - $this->registerService('OCP\\Activity\\IManager', function($c) { return $this->getServer()->getActivityManager(); }); diff --git a/lib/private/CssManager.php b/lib/private/CssManager.php deleted file mode 100644 index e0f710b8d7c..00000000000 --- a/lib/private/CssManager.php +++ /dev/null @@ -1,59 +0,0 @@ -. - * - */ - -namespace OC; - -use OCP\Files\IAppData; -use OCP\Files\NotFoundException; -use OCP\Files\SimpleFS\ISimpleFile; - -/** - * This class implements methods to access SCSS cached files - * @since 11.0.0 - */ - -class CssManager { - - /** @var IAppData */ - private $appData; - - /** - * CssManager constructor. - * - * @param IAppData $appData - */ - public function __construct(IAppData $appData) { - $this->appData = $appData; - } - - /** - * Get the css file and return ISimpleFile - * - * @param string $fileName css filename with extension - * @param string $appName css app name - * @return ISimpleFile - * @throws NotFoundException - */ - public function getCss($fileName, $appName) { - $folder = $this->appData->getFolder($appName); - return $folder->getFile($fileName); - } -} From d9eaed5ffafd5252545f490401981d1e9b0fc889 Mon Sep 17 00:00:00 2001 From: Roeland Jago Douma Date: Wed, 30 Nov 2016 16:30:04 +0100 Subject: [PATCH 18/43] Formatting Signed-off-by: Roeland Jago Douma --- lib/private/Template/CSSResourceLocator.php | 53 +++++++++++++--- lib/private/Template/ResourceLocator.php | 32 ---------- lib/private/Template/SCSSCacher.php | 70 +++++++++++++-------- 3 files changed, 90 insertions(+), 65 deletions(-) diff --git a/lib/private/Template/CSSResourceLocator.php b/lib/private/Template/CSSResourceLocator.php index b592dd63ae1..59b49c73376 100755 --- a/lib/private/Template/CSSResourceLocator.php +++ b/lib/private/Template/CSSResourceLocator.php @@ -25,25 +25,30 @@ namespace OC\Template; +use OC\SystemConfig; +use OCP\Files\IAppData; +use OCP\ILogger; +use OCP\IURLGenerator; + class CSSResourceLocator extends ResourceLocator { - /** @var \OCP\Files\IAppData */ + /** @var IAppData */ protected $appData; - /** @var \OCP\IURLGenerator */ + /** @var IURLGenerator */ protected $urlGenerator; - /** @var \OC\SystemConfig */ + /** @var SystemConfig */ protected $systemConfig; /** - * @param \OCP\ILogger $logger + * @param ILogger $logger * @param string $theme * @param array $core_map * @param array $party_map - * @param \OCP\Files\IAppData $appData - * @param \OCP\IURLGenerator $urlGenerator - * @param \OC\SystemConfig $systemConfig + * @param IAppData $appData + * @param IURLGenerator $urlGenerator + * @param SystemConfig $systemConfig */ - public function __construct(\OCP\ILogger $logger, $theme, $core_map, $party_map, \OCP\Files\IAppData $appData, \OCP\IURLGenerator $urlGenerator, \OC\SystemConfig $systemConfig) { + public function __construct(ILogger $logger, $theme, $core_map, $party_map, IAppData $appData, IURLGenerator $urlGenerator, SystemConfig $systemConfig) { $this->appData = $appData; $this->urlGenerator = $urlGenerator; $this->systemConfig = $systemConfig; @@ -80,4 +85,36 @@ class CSSResourceLocator extends ResourceLocator { || $this->appendIfExist($this->serverroot, $theme_dir.$style.'.css') || $this->appendIfExist($this->serverroot, $theme_dir.'core/'.$style.'.css'); } + + /** + * cache and append the scss $file if exist at $root + * + * @param string $root path to check + * @param string $file the filename + * @param \OCP\Files\IAppData $appData + * @param \OCP\IURLGenerator $urlGenerator + * @param \OC\SystemConfig $systemConfig + * @param string|null $webRoot base for path, default map $root to $webRoot + * @return bool True if the resource was found and cached, false otherwise + */ + protected function cacheAndAppendScssIfExist($root, $file, $appData, $urlGenerator, $systemConfig, $webRoot = null) { + if (is_file($root.'/'.$file)) { + $scssCache = new SCSSCacher( + $this->logger, + $root, + $file, + $appData, + $urlGenerator, + $systemConfig); + + if($scssCache->process()) { + $this->append($root, $scssCache->getCachedSCSS('core'), $webRoot, false); + return true; + } else { + $this->logger->error('Failed to compile and/or save '.$root.'/'.$file, ['app' => 'core']); + return false; + } + } + return false; + } } diff --git a/lib/private/Template/ResourceLocator.php b/lib/private/Template/ResourceLocator.php index 07a4387df8a..420317d27ac 100755 --- a/lib/private/Template/ResourceLocator.php +++ b/lib/private/Template/ResourceLocator.php @@ -106,38 +106,6 @@ abstract class ResourceLocator { return false; } - /** - * cache and append the scss $file if exist at $root - * - * @param string $root path to check - * @param string $file the filename - * @param \OCP\Files\IAppData $appData - * @param \OCP\IURLGenerator $urlGenerator - * @param \OC\SystemConfig $systemConfig - * @param string|null $webRoot base for path, default map $root to $webRoot - * @return bool True if the resource was found and cached, false otherwise - */ - protected function cacheAndAppendScssIfExist($root, $file, $appData, $urlGenerator, $systemConfig, $webRoot = null) { - if (is_file($root.'/'.$file)) { - $scssCache = new \OC\Template\SCSSCacher( - $this->logger, - $root, - $file, - $appData, - $urlGenerator, - $systemConfig); - - if($scssCache->process()) { - $this->append($root, $scssCache->getCachedSCSS('core'), $webRoot, false); - return true; - } else { - $this->logger->error('Failed to compile and/or save '.$root.'/'.$file, ['app' => 'core']); - return false; - } - } - return false; - } - /** * append the $file resource at $root * diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index db08653c884..8e42c623d7e 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -23,39 +23,59 @@ namespace OC\Template; use Leafo\ScssPhp\Compiler; use Leafo\ScssPhp\Exception\ParserException; +use Leafo\ScssPhp\Formatter\Crunched; +use Leafo\ScssPhp\Formatter\Expanded; use OC\Files\SimpleFS\SimpleFolder; +use OC\SystemConfig; +use OCP\Files\IAppData; use OCP\Files\NotFoundException; +use OCP\ILogger; +use OCP\IURLGenerator; class SCSSCacher { - /** - * @var string The root path to the nextcloud installation - * @var array The exploded absolute path to the file - * @var string The scss filename with extension - * @var string The css filename with extension - * @var string Absolute path to scss file location folder - * @var string Path to scss file from the root installation - * @var SimpleFolder The folder we're putting our compiled css files - */ - protected $root, $file, $fileNameSCSS, $fileNameCSS, $fileLoc, $rootCssLoc, $folder; + /** @var string The root path to the nextcloud installation */ + protected $root; + + /** @var array The exploded absolute path to the file */ + protected $file; + + /** @var string The scss filename with extension */ + protected $fileNameSCSS; + + /** @var string The css filename with extension */ + protected $fileNameCSS; + + /** @var string Absolute path to scss file location folder */ + protected $fileLoc; + + /** @var string Path to scss file from the root installation */ + protected $rootCssLoc; + + /** @var SimpleFolder The folder we're putting our compiled css files */ + protected $folder; + + /** @var ILogger */ + protected $logger; + + /** @var IAppData */ + protected $appData; + + /** @var IURLGenerator */ + protected $urlGenerator; + + /** @var SystemConfig */ + protected $systemConfig; /** - * @var \OCP\ILogger - * @var \OCP\Files\IAppData - * @var \OCP\IURLGenerator - * @var \OC\SystemConfig - */ - protected $logger, $appData, $urlGenerator, $systemConfig; - - /** - * @param \OCP\ILogger $logger + * @param ILogger $logger * @param string $root Root path to the nextcloud installation * @param string $file - * @param \OCP\Files\IAppData $appData - * @param \OCP\IURLGenerator $urlGenerator - * @param \OC\SystemConfig $systemConfig + * @param IAppData $appData + * @param IURLGenerator $urlGenerator + * @param SystemConfig $systemConfig */ - public function __construct(\OCP\ILogger $logger, $root, $file, \OCP\Files\IAppData $appData, \OCP\IURLGenerator $urlGenerator, \OC\SystemConfig $systemConfig) { + public function __construct(ILogger $logger, $root, $file, IAppData $appData, IURLGenerator $urlGenerator, SystemConfig $systemConfig) { $this->logger = $logger; $this->appData = $appData; $this->urlGenerator = $urlGenerator; @@ -122,11 +142,11 @@ class SCSSCacher { $scss->setImportPaths($this->fileLoc); if($this->systemConfig->getValue('debug')) { // Debug mode - $scss->setFormatter('Leafo\ScssPhp\Formatter\Expanded'); + $scss->setFormatter(Expanded::class); $scss->setLineNumberStyle(Compiler::LINE_COMMENTS); } else { // Compression - $scss->setFormatter('Leafo\ScssPhp\Formatter\Crunched'); + $scss->setFormatter(Crunched::class); } try { From d64d661ef5097bd5b5065f0f7df02f19a7442420 Mon Sep 17 00:00:00 2001 From: Roeland Jago Douma Date: Wed, 30 Nov 2016 21:51:09 +0100 Subject: [PATCH 19/43] Make SCCCacher injectable Signed-off-by: Roeland Jago Douma --- lib/private/Template/CSSResourceLocator.php | 14 +-- lib/private/Template/SCSSCacher.php | 117 +++++++++----------- 2 files changed, 59 insertions(+), 72 deletions(-) diff --git a/lib/private/Template/CSSResourceLocator.php b/lib/private/Template/CSSResourceLocator.php index 59b49c73376..757c0232ca7 100755 --- a/lib/private/Template/CSSResourceLocator.php +++ b/lib/private/Template/CSSResourceLocator.php @@ -91,24 +91,22 @@ class CSSResourceLocator extends ResourceLocator { * * @param string $root path to check * @param string $file the filename - * @param \OCP\Files\IAppData $appData - * @param \OCP\IURLGenerator $urlGenerator - * @param \OC\SystemConfig $systemConfig + * @param IAppData $appData + * @param IURLGenerator $urlGenerator + * @param SystemConfig $systemConfig * @param string|null $webRoot base for path, default map $root to $webRoot * @return bool True if the resource was found and cached, false otherwise */ - protected function cacheAndAppendScssIfExist($root, $file, $appData, $urlGenerator, $systemConfig, $webRoot = null) { + protected function cacheAndAppendScssIfExist($root, $file, IAppData $appData, IURLGenerator $urlGenerator, SystemConfig $systemConfig, $webRoot = null) { if (is_file($root.'/'.$file)) { $scssCache = new SCSSCacher( $this->logger, - $root, - $file, $appData, $urlGenerator, $systemConfig); - if($scssCache->process()) { - $this->append($root, $scssCache->getCachedSCSS('core'), $webRoot, false); + if($scssCache->process($root, $file)) { + $this->append($root, $scssCache->getCachedSCSS('core', $file), $webRoot, false); return true; } else { $this->logger->error('Failed to compile and/or save '.$root.'/'.$file, ['app' => 'core']); diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index 8e42c623d7e..1e3ee411595 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -25,36 +25,15 @@ use Leafo\ScssPhp\Compiler; use Leafo\ScssPhp\Exception\ParserException; use Leafo\ScssPhp\Formatter\Crunched; use Leafo\ScssPhp\Formatter\Expanded; -use OC\Files\SimpleFS\SimpleFolder; use OC\SystemConfig; use OCP\Files\IAppData; use OCP\Files\NotFoundException; +use OCP\Files\SimpleFS\ISimpleFolder; use OCP\ILogger; use OCP\IURLGenerator; class SCSSCacher { - /** @var string The root path to the nextcloud installation */ - protected $root; - - /** @var array The exploded absolute path to the file */ - protected $file; - - /** @var string The scss filename with extension */ - protected $fileNameSCSS; - - /** @var string The css filename with extension */ - protected $fileNameCSS; - - /** @var string Absolute path to scss file location folder */ - protected $fileLoc; - - /** @var string Path to scss file from the root installation */ - protected $rootCssLoc; - - /** @var SimpleFolder The folder we're putting our compiled css files */ - protected $folder; - /** @var ILogger */ protected $logger; @@ -69,62 +48,62 @@ class SCSSCacher { /** * @param ILogger $logger - * @param string $root Root path to the nextcloud installation - * @param string $file * @param IAppData $appData * @param IURLGenerator $urlGenerator * @param SystemConfig $systemConfig */ - public function __construct(ILogger $logger, $root, $file, IAppData $appData, IURLGenerator $urlGenerator, SystemConfig $systemConfig) { + public function __construct(ILogger $logger, IAppData $appData, IURLGenerator $urlGenerator, SystemConfig $systemConfig) { $this->logger = $logger; $this->appData = $appData; $this->urlGenerator = $urlGenerator; $this->systemConfig = $systemConfig; - - $this->root = $root; - $this->file = explode('/', $root.'/'.$file); - - /* filenames */ - $this->fileNameSCSS = array_pop($this->file); - $this->fileNameCSS = str_replace('.scss', '.css', $this->fileNameSCSS); - - $this->fileLoc = implode('/', $this->file); - - // base uri to css file - $this->rootCssLoc = explode('/', $file); - array_pop($this->rootCssLoc); - $this->rootCssLoc = implode('/', $this->rootCssLoc); - - try { - $this->folder = $this->appData->getFolder('core'); - } catch(NotFoundException $e) { - // creating css appdata folder - $this->folder = $this->appData->newFolder('core'); - } } /** * Process the caching process if needed + * @param string $root Root path to the nextcloud installation + * @param string $file * @return boolean */ - public function process() { + public function process($root, $file) { + $path = explode('/', $root . '/' . $file); - if($this->is_cached()) { + $fileNameSCSS = array_pop($path); + $fileNameCSS = str_replace('.scss', '.css', $fileNameSCSS); + + $path = implode('/', $path); + + $webDir = explode('/', $file); + array_pop($webDir); + $webDir = implode('/', $webDir); + + try { + $folder = $this->appData->getFolder('core'); + } catch(NotFoundException $e) { + // creating css appdata folder + $folder = $this->appData->newFolder('core'); + } + + if($this->is_cached($fileNameCSS, $fileNameSCSS, $folder, $path)) { return true; } else { - return $this->cache(); + return $this->cache($path, $fileNameCSS, $fileNameSCSS, $folder, $webDir); } } /** * Check if the file is cached or not + * @param string $fileNameCSS + * @param string $fileNameSCSS + * @param ISimpleFolder $folder + * @param string $path * @return boolean */ - private function is_cached() { + private function is_cached($fileNameCSS, $fileNameSCSS, ISimpleFolder $folder, $path) { try{ - $cachedfile = $this->folder->getFile($this->fileNameCSS); - if( $cachedfile->getMTime() > filemtime($this->fileLoc.'/'.$this->fileNameSCSS) - && $cachedfile->getSize() > 0 ) { + $cachedFile = $folder->getFile($fileNameCSS); + if( $cachedFile->getMTime() > filemtime($this->fileLoc.'/'.$fileNameSCSS) + && $cachedFile->getSize() > 0 ) { return true; } } catch(NotFoundException $e) { @@ -135,11 +114,16 @@ class SCSSCacher { /** * Cache the file with AppData + * @param string $path + * @param string $fileNameCSS + * @param string $fileNameSCSS + * @param ISimpleFolder $folder + * @param string $webDir * @return boolean */ - private function cache() { + private function cache($path, $fileNameCSS, $fileNameSCSS, ISimpleFolder $folder, $webDir) { $scss = new Compiler(); - $scss->setImportPaths($this->fileLoc); + $scss->setImportPaths($path); if($this->systemConfig->getValue('debug')) { // Debug mode $scss->setFormatter(Expanded::class); @@ -150,22 +134,22 @@ class SCSSCacher { } try { - $cachedfile = $this->folder->getFile($this->fileNameCSS); + $cachedfile = $folder->getFile($fileNameCSS); } catch(NotFoundException $e) { - $cachedfile = $this->folder->newFile($this->fileNameCSS); + $cachedfile = $folder->newFile($fileNameCSS); } // Compile try { - $compiledScss = $scss->compile('@import "'.$this->fileNameSCSS.'";'); + $compiledScss = $scss->compile('@import "'.$fileNameSCSS.'";'); } catch(ParserException $e) { $this->logger->error($e, ['app' => 'core']); return false; } try { - $cachedfile->putContent($this->rebaseUrls($compiledScss)); - $this->logger->debug($this->rootCssLoc.'/'.$this->fileNameSCSS.' compiled and successfully cached', ['app' => 'core']); + $cachedfile->putContent($this->rebaseUrls($compiledScss, $webDir)); + $this->logger->debug($webDir.'/'.$fileNameSCSS.' compiled and successfully cached', ['app' => 'core']); return true; } catch(NotFoundException $e) { return false; @@ -175,20 +159,25 @@ class SCSSCacher { /** * Add the correct uri prefix to make uri valid again * @param string $css + * @param string $webDir * @return string */ - private function rebaseUrls($css) { + private function rebaseUrls($css, $webDir) { $re = '/url\([\'"]([\.\w?=\/-]*)[\'"]\)/x'; - $subst = 'url(\'../../../'.$this->rootCssLoc.'/$1\')'; + $subst = 'url(\'../../../'.$webDir.'/$1\')'; return preg_replace($re, $subst, $css); } /** * Return the cached css file uri * @param string $appName the app name + * @param string $fileName * @return string */ - public function getCachedSCSS($appName) { - return substr($this->urlGenerator->linkToRoute('core.Css.getCss', array('fileName' => $this->fileNameCSS, 'appName' => $appName)), 1); + public function getCachedSCSS($appName, $fileName) { + $fileName = array_pop(explode('/', $fileName)); + $fileName = str_replace('.scss', '.css', $fileName); + + return substr($this->urlGenerator->linkToRoute('core.Css.getCss', array('fileName' => $fileName, 'appName' => $appName)), 1); } } From 7bd9087f9e2dbf3cc5ae7d728a9583caa3f96e80 Mon Sep 17 00:00:00 2001 From: Roeland Jago Douma Date: Wed, 30 Nov 2016 22:09:36 +0100 Subject: [PATCH 20/43] Inject SCSSCacher Signed-off-by: Roeland Jago Douma --- lib/private/Template/CSSResourceLocator.php | 40 ++++++--------------- lib/private/TemplateLayout.php | 12 +++++-- 2 files changed, 19 insertions(+), 33 deletions(-) diff --git a/lib/private/Template/CSSResourceLocator.php b/lib/private/Template/CSSResourceLocator.php index 757c0232ca7..34b4d08929a 100755 --- a/lib/private/Template/CSSResourceLocator.php +++ b/lib/private/Template/CSSResourceLocator.php @@ -25,33 +25,22 @@ namespace OC\Template; -use OC\SystemConfig; -use OCP\Files\IAppData; use OCP\ILogger; -use OCP\IURLGenerator; class CSSResourceLocator extends ResourceLocator { - /** @var IAppData */ - protected $appData; - /** @var IURLGenerator */ - protected $urlGenerator; - /** @var SystemConfig */ - protected $systemConfig; + /** @var SCSSCacher */ + protected $scssCacher; /** * @param ILogger $logger * @param string $theme * @param array $core_map * @param array $party_map - * @param IAppData $appData - * @param IURLGenerator $urlGenerator - * @param SystemConfig $systemConfig + * @param SCSSCacher $scssCcacher */ - public function __construct(ILogger $logger, $theme, $core_map, $party_map, IAppData $appData, IURLGenerator $urlGenerator, SystemConfig $systemConfig) { - $this->appData = $appData; - $this->urlGenerator = $urlGenerator; - $this->systemConfig = $systemConfig; + public function __construct(ILogger $logger, $theme, $core_map, $party_map, SCSSCacher $scssCacher) { + $this->scssCacher = $scssCacher; parent::__construct($logger, $theme, $core_map, $party_map); } @@ -62,8 +51,8 @@ class CSSResourceLocator extends ResourceLocator { public function doFind($style) { if (strpos($style, '3rdparty') === 0 && $this->appendIfExist($this->thirdpartyroot, $style.'.css') - || $this->cacheAndAppendScssIfExist($this->serverroot, $style.'.scss', $this->appData, $this->urlGenerator, $this->systemConfig) - || $this->cacheAndAppendScssIfExist($this->serverroot, 'core/'.$style.'.scss', $this->appData, $this->urlGenerator, $this->systemConfig) + || $this->cacheAndAppendScssIfExist($this->serverroot, $style.'.scss') + || $this->cacheAndAppendScssIfExist($this->serverroot, 'core/'.$style.'.scss') || $this->appendIfExist($this->serverroot, $style.'.css') || $this->appendIfExist($this->serverroot, 'core/'.$style.'.css') ) { @@ -91,22 +80,13 @@ class CSSResourceLocator extends ResourceLocator { * * @param string $root path to check * @param string $file the filename - * @param IAppData $appData - * @param IURLGenerator $urlGenerator - * @param SystemConfig $systemConfig * @param string|null $webRoot base for path, default map $root to $webRoot * @return bool True if the resource was found and cached, false otherwise */ - protected function cacheAndAppendScssIfExist($root, $file, IAppData $appData, IURLGenerator $urlGenerator, SystemConfig $systemConfig, $webRoot = null) { + protected function cacheAndAppendScssIfExist($root, $file, $webRoot = null) { if (is_file($root.'/'.$file)) { - $scssCache = new SCSSCacher( - $this->logger, - $appData, - $urlGenerator, - $systemConfig); - - if($scssCache->process($root, $file)) { - $this->append($root, $scssCache->getCachedSCSS('core', $file), $webRoot, false); + if($this->scssCacher->process($root, $file)) { + $this->append($root, $this->scssCacher->getCachedSCSS('core', $file), $webRoot, false); return true; } else { $this->logger->error('Failed to compile and/or save '.$root.'/'.$file, ['app' => 'core']); diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php index 8ba5bc561f0..67ba831dfaf 100644 --- a/lib/private/TemplateLayout.php +++ b/lib/private/TemplateLayout.php @@ -36,6 +36,7 @@ namespace OC; use OC\Template\JSConfigHelper; +use OC\Template\SCSSCacher; class TemplateLayout extends \OC_Template { @@ -193,14 +194,19 @@ class TemplateLayout extends \OC_Template { // Read the selected theme from the config file $theme = \OC_Util::getTheme(); + $SCSSCacher = new SCSSCacher( + \OC::$server->getLogger(), + \OC::$server->getAppDataDir('css'), + \OC::$server->getURLGenerator(), + \OC::$server->getSystemConfig() + ); + $locator = new \OC\Template\CSSResourceLocator( \OC::$server->getLogger(), $theme, array( \OC::$SERVERROOT => \OC::$WEBROOT ), array( \OC::$SERVERROOT => \OC::$WEBROOT ), - \OC::$server->getAppDataDir('css'), - \OC::$server->getURLGenerator(), - \OC::$server->getSystemConfig()); + $SCSSCacher); $locator->find($styles); return $locator->getResources(); } From 203143e26a5cc2824fab8187cf8c15d13fcad330 Mon Sep 17 00:00:00 2001 From: Roeland Jago Douma Date: Wed, 30 Nov 2016 22:10:42 +0100 Subject: [PATCH 21/43] Fix typo Signed-off-by: Roeland Jago Douma --- lib/private/Template/SCSSCacher.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index 1e3ee411595..d227efce6bb 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -102,7 +102,7 @@ class SCSSCacher { private function is_cached($fileNameCSS, $fileNameSCSS, ISimpleFolder $folder, $path) { try{ $cachedFile = $folder->getFile($fileNameCSS); - if( $cachedFile->getMTime() > filemtime($this->fileLoc.'/'.$fileNameSCSS) + if( $cachedFile->getMTime() > filemtime($path.'/'.$fileNameSCSS) && $cachedFile->getSize() > 0 ) { return true; } From a2c3d6c15ac6866bdab63a09d3515eac22888019 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 11:16:32 +0100 Subject: [PATCH 22/43] Apps scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.scss | 689 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 689 insertions(+) create mode 100644 core/css/apps.scss diff --git a/core/css/apps.scss b/core/css/apps.scss new file mode 100644 index 00000000000..8bb380ad0ae --- /dev/null +++ b/core/css/apps.scss @@ -0,0 +1,689 @@ +/* APP STYLING -------------------------------------------------------------- */ + +#app { + height: 100%; + width: 100%; + * { + box-sizing: border-box; + } +} + +/* APP-NAVIGATION ------------------------------------------------------------*/ + +/* Navigation: folder like structure */ + +#app-navigation { + width: 250px; + height: 100%; + float: left; + box-sizing: border-box; + background-color: #fff; + padding-bottom: 44px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border-right: 1px solid #eee; + > ul { + position: relative; + height: 100%; + width: inherit; + overflow: auto; + box-sizing: border-box; + } + li { + position: relative; + width: 100%; + box-sizing: border-box; + } + &.without-app-settings { + padding-bottom: 0; + } + .active.with-menu > a, .with-counter > a { + padding-right: 50px; + } + .active.with-menu.with-counter > a { + padding-right: 90px; + } + .with-icon a, .app-navigation-entry-loading a { + padding-left: 44px; + background-size: 16px 16px; + background-position: 14px center; + background-repeat: no-repeat; + } + li > a { + display: block; + width: 100%; + line-height: 44px; + min-height: 44px; + padding: 0 12px; + overflow: hidden; + box-sizing: border-box; + white-space: nowrap; + text-overflow: ellipsis; + color: #000; + opacity: .57; + } + .active { + opacity: 1; + a { + opacity: 1; + } + } + li { + &:hover > a, &:focus > a { + opacity: 1; + } + } + a:focus { + opacity: 1; + } + .selected { + opacity: 1; + a { + opacity: 1; + } + } + .collapse { + display: none; + /* hide collapse button initially */ + } + .collapsible { + > .collapse { + position: absolute; + height: 44px; + width: 44px; + margin: 0; + padding: 0; + background: none; + background-image: url('../img/actions/triangle-s.svg?v=1'); + background-size: 16px; + background-repeat: no-repeat; + background-position: center; + border: none; + border-radius: 0; + outline: none !important; + box-shadow: none; + } + &:hover > a, &:focus > a { + background-image: none; + } + &:hover > .collapse, &:focus > .collapse { + display: block; + } + .collapse { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + } + &.open { + .collapse { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + background-image: linear-gradient(top, rgb(238, 238, 238) 0%, rgb(245, 245, 245) 100%); + background-image: -webkit-linear-gradient(top, rgb(238, 238, 238) 0%, rgb(245, 245, 245) 100%); + background-image: -ms-linear-gradient(top, rgb(238, 238, 238) 0%, rgb(245, 245, 245) 100%); + } + } + > { + ul ul { + display: none; + li > a { + padding-left: 32px; + } + } + .with-icon ul li { + > a, &.app-navigation-entry-loading > a { + padding-left: 68px; + background-position: 44px center; + } + } + } + > ul .collapsible.open { + &:hover, &:focus { + box-shadow: inset 0 0 3px #ddd; + } + ul { + display: block; + } + } + .app-navigation-entry-deleted { + display: inline-block; + height: 44px; + width: 100%; + } + .app-navigation-entry-deleted-description { + padding-left: 12px; + position: relative; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + display: inline-block; + width: calc(100% - 49px); + line-height: 44px; + float: left; + } + .app-navigation-entry-deleted-button { + margin: 0; + height: 44px; + width: 44px; + line-height: 44px; + border: 0; + display: inline-block; + background-color: transparent; + opacity: .5; + &:hover, &:focus { + opacity: 1; + } + } + .utils { + position: absolute; + padding: 7px 7px 0 0; + right: 0; + top: 0; + bottom: 0; + font-size: 12px; + button, .counter { + width: 44px; + height: 44px; + padding-top: 12px; + } + } + .drag-and-drop { + -webkit-transition: padding-bottom 500ms ease 0s; + transition: padding-bottom 500ms ease 0s; + padding-bottom: 40px; + } + .error { + color: #dd1144; + } + .app-navigation-separator { + border-bottom: 1px solid #ddd; + } + .app-navigation-entry-utils { + position: absolute; + top: 0; + right: 0; + z-index: 105; + ul { + display: block !important; + } + li { + float: left; + width: 44px !important; + height: 44px; + line-height: 44px; + } + } + .active > .app-navigation-entry-utils li { + display: inline-block; + } + .app-navigation-entry-utils button { + height: 38px; + width: 38px; + line-height: 38px; + float: left; + } + .app-navigation-entry-utils-menu-button { + display: none; + button { + border: 0; + opacity: .5; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-image: url('../img/actions/more.svg?v=1'); + } + &:hover button, &:focus button { + background-color: transparent; + opacity: 1; + } + } + .app-navigation-entry-utils-counter { + overflow: hidden; + text-overflow: hidden; + text-align: right; + font-size: 9pt; + width: 38px; + line-height: 44px; + padding: 0 10px; + } + .app-navigation-entry-utils ul, .app-navigation-entry-menu ul { + list-style-type: none; + } +} + +/* Second level nesting for lists */ + +/* Deleted entries with undo button */ + +/* counter and actions, legacy code */ + +/* drag and drop */ + +/** + * App navigation utils, buttons and counters for drop down menu + */ + +/* menu bubble / popover */ + +.bubble, #app-navigation .app-navigation-entry-menu { + position: absolute; + background-color: #fff; + color: #333; + border-radius: 3px; + border-top-right-radius: 0; + z-index: 110; + margin: 5px; + margin-top: -5px; + right: 0; + -webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); + -moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); + -ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); + -o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); + filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); +} + +.ie { + .bubble, #app-navigation .app-navigation-entry-menu, .bubble:after, #app-navigation .app-navigation-entry-menu:after { + border: 1px solid #eee; + } +} + +.edge { + .bubble, #app-navigation .app-navigation-entry-menu, .bubble:after, #app-navigation .app-navigation-entry-menu:after { + border: 1px solid #eee; + } +} + +/* miraculous border arrow stuff */ + +.bubble:after, #app-navigation .app-navigation-entry-menu:after { + bottom: 100%; + right: 6px; + /* change this to adjust the arrow position */ + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.bubble:after, #app-navigation .app-navigation-entry-menu:after { + border-color: rgba(238, 238, 238, 0); + border-bottom-color: #fff; + border-width: 10px; +} + +.bubble .action { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)' !important; + filter: alpha(opacity = 50) !important; + opacity: .5 !important; + &:hover, &:focus, &.active { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important; + filter: alpha(opacity = 100) !important; + opacity: 1 !important; + } +} + +#app-navigation { + .app-navigation-entry-menu { + display: none; + &.open { + display: block; + } + ul { + display: block !important; + } + li { + float: left; + width: 38px !important; + button { + float: right; + width: 36px !important; + height: 36px; + line-height: 36px; + border: 0; + opacity: .5; + background-color: transparent; + &:hover, &:focus { + opacity: 1; + background-color: transparent; + } + } + } + } + .app-navigation-entry-edit { + padding-left: 5px; + padding-right: 5px; + display: inline-block; + height: 39px; + width: 100%; + input { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + width: calc(100% - 36px); + padding: 5px; + margin-right: 0; + height: 38px; + float: left; + border: 1px solid rgba(190, 190, 190, 0.9); + } + button, input[type='submit'] { + width: 36px; + height: 38px; + float: left; + } + .icon-checkmark { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-left: 0; + margin-right: 0; + } + } +} + +/* list of options for an entry */ + +/* editing an entry */ + +/* APP-CONTENT ---------------------------------------------------------------*/ + +/* Part where the content will be loaded into */ + +#app-content { + position: relative; + height: 100%; + overflow-y: auto; +} + +#app-content-wrapper { + min-width: 100%; + min-height: 100%; +} + +/* APP-SIDEBAR ----------------------------------------------------------------*/ + +/* + Sidebar: a sidebar to be used within #app-content + have it as first element within app-content in order to shrink other + sibling containers properly. Compare Files app for example. +*/ + +#app-sidebar { + position: fixed; + top: 45px; + right: 0; + left: auto; + bottom: 0; + width: 27%; + min-width: 300px; + display: block; + background: #fff; + border-left: 1px solid #eee; + -webkit-transition: margin-right 300ms; + transition: margin-right 300ms; + overflow-x: hidden; + overflow-y: auto; + visibility: visible; + z-index: 500; +} + +#app-content.with-app-sidebar { + margin-right: 27%; +} + +#app-sidebar.disappear { + visibility: hidden; +} + +/* APP-SETTINGS ---------------------------------------------------------------*/ + +/* settings area */ + +#app-settings { + position: fixed; + width: 250px; + /* change to 100% when layout positions are absolute */ + bottom: 0; + z-index: 140; + &.open #app-settings-content, &.opened #app-settings-content { + display: block; + } +} + +#app-settings-content { + display: none; + padding: 10px; + background-color: #fff; + /* restrict height of settings and make scrollable */ + max-height: 300px; + overflow-y: auto; + border-right: 1px solid #eee; + width: 250px; + box-sizing: border-box; +} + +#app-settings-header { + border-right: 1px solid #eee; + width: 250px; + box-sizing: border-box; +} + +/* display input fields at full width */ + +#app-settings-content input[type='text'] { + width: 93%; +} + +.settings-button { + display: block; + height: 44px; + width: 100%; + padding: 0; + margin: 0; + background-color: #fff; + background-image: url('../img/actions/settings.svg?v=1'); + background-position: 14px center; + background-repeat: no-repeat; + box-shadow: none; + border: 0; + border-radius: 0; + text-align: left; + padding-left: 42px; + font-weight: normal; + &:hover, &:focus { + background-color: #fff; + } + &.opened { + &:hover, &:focus { + background-color: #fff; + } + } +} + +/* buttons */ + +button.loading { + background-image: url('../img/loading.gif'); + background-position: right 10px center; + background-repeat: no-repeat; + background-size: 16px; + padding-right: 30px; +} + +/* general styles for the content area */ + +.section { + display: block; + padding: 30px; + color: #555; + margin-bottom: 24px; + &.hidden { + display: none !important; + } +} + +.sub-section { + position: relative; + margin-top: 10px; + margin-left: 27px; + margin-bottom: 10px; +} + +/* no top border for first settings item */ + +#app-content > .section:first-child { + border-top: none; +} + +/* heading styles */ + +h2 { + font-size: 20px; + font-weight: 300; + margin-bottom: 12px; + line-height: 140%; +} + +h3 { + font-size: 15px; + font-weight: 300; + margin: 12px 0; +} + +/* slight position correction of checkboxes and radio buttons */ + +.section input { + &[type='checkbox'], &[type='radio'] { + vertical-align: -2px; + margin-right: 4px; + } +} + +.appear { + opacity: 1; + -webkit-transition: opacity 500ms ease 0s; + -moz-transition: opacity 500ms ease 0s; + -ms-transition: opacity 500ms ease 0s; + -o-transition: opacity 500ms ease 0s; + transition: opacity 500ms ease 0s; + &.transparent { + opacity: 0; + } +} + +/* do not use italic typeface style, instead lighter color */ + +em { + font-style: normal; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; + opacity: .5; +} + +/* generic dropdown style */ + +.dropdown { + background: #eee; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + box-shadow: 0 1px 1px #777; + display: block; + margin-right: 0; + position: absolute; + right: 0; + width: 420px; + z-index: 500; + padding: 16px; +} + +/* generic tab styles */ + +.tabHeaders { + display: inline-block; + margin: 15px; + .tabHeader { + float: left; + padding: 5px; + cursor: pointer; + color: #888; + margin-bottom: 1px; + a { + color: #888; + margin-bottom: 1px; + } + &.selected { + font-weight: 600; + border-bottom: 1px solid #333; + } + &:hover { + border-bottom: 1px solid #333; + } + &.selected, &:hover { + margin-bottom: 0px; + color: #000; + a { + margin-bottom: 0px; + color: #000; + } + } + } +} + +.tabsContainer { + clear: left; + .tab { + padding: 0 15px 15px; + } +} + +/* popover menu styles (use together with 'bubble' class) */ + +.popovermenu { + .menuitem { + cursor: pointer; + vertical-align: middle; + > span { + cursor: pointer; + vertical-align: middle; + } + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; + filter: alpha(opacity = 50); + opacity: .5; + &:hover, &:focus, &.active { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + filter: alpha(opacity = 100); + opacity: 1; + } + img { + padding: initial; + } + } + a.menuitem, label.menuitem, .menuitem { + padding: 10px !important; + width: auto; + } + &.hidden { + display: none; + } + .menuitem { + display: flex !important; + line-height: 30px; + color: #000; + align-items: center; + .icon, .no-icon { + display: inline-block; + width: 16px; + height: 16px; + margin-right: 10px; + vertical-align: middle; + } + opacity: 0.5; + } + li:hover .menuitem { + opacity: 1; + } +} From 0b51bd0a3286d1a074442f86764e6cac00ba4102 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 11:16:48 +0100 Subject: [PATCH 23/43] Header scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/header.scss | 423 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 423 insertions(+) create mode 100644 core/css/header.scss diff --git a/core/css/header.scss b/core/css/header.scss new file mode 100644 index 00000000000..8035f7e568a --- /dev/null +++ b/core/css/header.scss @@ -0,0 +1,423 @@ +/* prevent ugly selection effect on accidental selection */ + +#header, #navigation, #expanddiv { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +/* removed until content-focusing issue is fixed */ + +#skip-to-content a { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + &:focus { + left: 76px; + top: -9px; + color: #fff; + width: auto; + height: auto; + } +} + +/* HEADERS ------------------------------------------------------------------ */ + +#body-user #header, #body-settings #header, #body-public #header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 2000; + height: 45px; + line-height: 2.5em; + background-color: #0082c9; + box-sizing: border-box; +} + +/* LOGO and APP NAME -------------------------------------------------------- */ + +#nextcloud { + position: absolute; + top: 0; + left: 0; + padding: 5px; + padding-bottom: 0; + height: 45px; + /* header height */ + box-sizing: border-box; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + &:focus { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)'; + opacity: .75; + } + &:hover, &:active { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } +} + +#header { + .logo { + background-image: url('../img/logo-icon.svg?v=1'); + background-repeat: no-repeat; + background-size: 175px; + background-position: center; + width: 252px; + height: 120px; + margin: 0 auto; + } + .logo-icon { + /* display logo so appname can be shown next to it */ + display: inline-block; + background-image: url('../img/logo-icon.svg?v=1'); + background-repeat: no-repeat; + background-position: center center; + width: 62px; + height: 34px; + } + .header-appname-container { + display: inline-block; + position: absolute; + left: 70px; + height: 27px; + padding-top: 18px; + padding-right: 10px; + } +} + +/* hover effect for app switcher label */ + +.header-appname-container .header-appname { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)'; + opacity: .75; +} + +.menutoggle { + .icon-caret { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)'; + opacity: .75; + } + &:hover { + .header-appname, .icon-caret { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + &:focus { + .header-appname, .icon-caret { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + &.active { + .header-appname, .icon-caret { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } +} + +/* show appname next to logo */ + +.header-appname { + display: inline-block; + position: relative; + color: #fff; + font-size: 16px; + font-weight: 300; + margin: 0; + margin-top: -24px; + padding: 7px 0 7px 5px; + vertical-align: middle; +} + +/* show caret indicator next to logo to make clear it is tappable */ + +#header .icon-caret { + display: inline-block; + width: 12px; + height: 12px; + margin: 0; + margin-top: -21px; + padding: 0; + vertical-align: middle; +} + +/* do not show menu toggle on public share links as there is no menu */ + +#body-public #header .icon-caret { + display: none; +} + +/* NAVIGATION --------------------------------------------------------------- */ + +#navigation { + position: fixed; + top: 45px; + left: 10px; + width: 265px; + max-height: 85%; + margin-top: 0; + padding-bottom: 10px; + background-color: rgba(255, 255, 255, 0.97); + box-shadow: 0 1px 10px rgba(150, 150, 150, 0.75); + border-radius: 3px; + border-top-left-radius: 0; + border-top-right-radius: 0; + display: none; + /*overflow-y: auto; + overflow-x: hidden;*/ + z-index: 2000; + &:after { + bottom: 100%; + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(0, 0, 0, 0); + border-bottom-color: rgba(255, 255, 255, 0.97); + border-width: 10px; + margin-left: -10px; + } +} + +/* arrow look */ + +#expanddiv:after { + bottom: 100%; + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(0, 0, 0, 0); + border-bottom-color: rgba(255, 255, 255, 0.97); + border-width: 10px; + margin-left: -10px; +} + +/* position of dropdown arrow */ + +#navigation:after { + left: 47%; +} + +#expanddiv:after { + right: 15px; +} + +#navigation { + box-sizing: border-box; + * { + box-sizing: border-box; + } + li { + display: inline-block; + } + a { + position: relative; + width: 80px; + height: 80px; + display: inline-block; + text-align: center; + padding: 20px 0; + span { + display: inline-block; + font-size: 13px; + padding-bottom: 0; + padding-left: 0; + width: 80px; + text-align: center; + color: #000; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + svg, span { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; + opacity: .5; + } + &:hover svg, &:focus svg, &:hover span, &:focus span { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + &.active { + svg, span { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + } +} + +/* icon opacity and hover effect */ + +#apps-management a { + &:hover svg, &:focus svg, &.active svg, &:hover span, &:focus span, &.active span { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } +} + +#navigation .app-icon { + margin: 0 auto; + padding: 0; + max-height: 32px; + max-width: 32px; +} + +/* Apps management */ + +#apps-management { + min-height: initial; + height: initial; + margin: 0; + a { + svg, span { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; + opacity: .3; + } + } +} + +/* loading feedback for apps */ + +#navigation .app-loading { + .icon-loading-dark { + display: inline !important; + position: absolute; + top: 20px; + left: 24px; + width: 32px; + height: 32px; + } + .app-icon { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; + opacity: 0; + } +} + +#apps { + max-height: calc(100vh - 100px); + overflow: auto; +} + +/* USER MENU -----------------------------------------------------------------*/ + +/* info part on the right, used e.g. for info on who shared something */ + +.header-right { + position: absolute; + right: 0; + padding: 7px 5px; + color: #fff; + height: 100%; + max-width: 80%; + white-space: nowrap; + box-sizing: border-box; +} + +/* Profile picture in header */ + +#header .avatardiv { + float: left; + display: inline-block; + margin-right: 8px; + cursor: pointer; + height: 32px; + width: 32px; + img { + opacity: 1; + cursor: pointer; + } +} + +#settings { + float: right; + color: #ddd; + cursor: pointer; + .icon-loading-small-dark { + display: inline-block; + margin-bottom: -3px; + margin-right: 6px; + background-size: 16px 16px; + } +} + +#expand { + display: block; + padding: 7px 30px 6px 10px; + cursor: pointer; + * { + cursor: pointer; + } + &:hover, &:focus, &:active { + color: #fff; + } + img { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'; + opacity: .7; + margin-bottom: -2px; + } + &:hover img, &:focus img, &:active img { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + .icon-caret { + margin-top: 0; + } +} + +#expanddiv { + position: absolute; + right: 13px; + top: 45px; + z-index: 2000; + display: none; + background: rgb(255, 255, 255); + box-shadow: 0 1px 10px rgba(150, 150, 150, 0.75); + border-radius: 3px; + border-top-left-radius: 0; + border-top-right-radius: 0; + box-sizing: border-box; + &:after { + border-color: rgba(0, 0, 0, 0); + border-bottom-color: rgba(255, 255, 255, 1); + } + a { + display: block; + height: 40px; + color: #000; + padding: 4px 12px 0; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; + opacity: .5; + box-sizing: border-box; + img { + margin-bottom: -3px; + margin-right: 6px; + } + &:hover, &:focus, &:active, &.active { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } +} + +/* do not show display name when profile picture is present */ + +#header { + .avatardiv.avatardiv-shown + #expandDisplayName { + display: none; + } + #expand { + display: block; + } +} From 6b35525c3cd574efd93154b1e78de90d36e241dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 11:17:06 +0100 Subject: [PATCH 24/43] Icons scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/icons.scss | 454 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 454 insertions(+) create mode 100644 core/css/icons.scss diff --git a/core/css/icons.scss b/core/css/icons.scss new file mode 100644 index 00000000000..9afb5630181 --- /dev/null +++ b/core/css/icons.scss @@ -0,0 +1,454 @@ +[class^='icon-'], [class*=' icon-'] { + background-repeat: no-repeat; + background-position: center; + min-width: 16px; + min-height: 16px; +} + +/* general assets */ + +.icon-breadcrumb { + background-image: url('../img/breadcrumb.svg?v=1'); +} + +.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark { + position: relative; +} + +.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { + z-index: 2; + content: ''; + height: 30px; + width: 30px; + margin: -16px 0 0 -16px; + position: absolute; + top: 50%; + left: 50%; + border-radius: 100%; + -webkit-animation: rotate .8s infinite linear; + animation: rotate .8s infinite linear; + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} + +.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { + border: 2px solid rgba(150, 150, 150, 0.5); + border-top-color: rgb(100, 100, 100); +} + +.icon-loading-dark:after, .icon-loading-small-dark:after { + border: 2px solid rgba(187, 187, 187, 0.5); + border-top-color: #bbb; +} + +.icon-loading-small:after, .icon-loading-small-dark:after { + height: 14px; + width: 14px; + margin: -8px 0 0 -8px; +} + +/* Css replaced elements don't have ::after nor ::before */ + +img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading { + background-image: url('../img/loading.gif'); +} + +img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark { + background-image: url('../img/loading-dark.gif'); +} + +img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small { + background-image: url('../img/loading-small.gif'); +} + +img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark { + background-image: url('../img/loading-small-dark.gif'); +} + +@-webkit-keyframes rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + + +@keyframes rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + + +.icon-32 { + background-size: 32px !important; +} + +/* action icons */ + +.icon-add { + background-image: url('../img/actions/add.svg?v=1'); +} + +.icon-audio { + background-image: url('../img/actions/audio.svg?v=1'); +} + +.icon-audio-white { + background-image: url('../img/actions/audio-white.svg?v=2'); +} + +.icon-audio-off { + background-image: url('../img/actions/audio-off.svg?v=1'); +} + +.icon-audio-off-white { + background-image: url('../img/actions/audio-off-white.svg?v=1'); +} + +.icon-caret { + background-image: url('../img/actions/caret.svg?v=1'); +} + +.icon-caret-dark { + background-image: url('../img/actions/caret-dark.svg?v=1'); +} + +.icon-checkmark { + background-image: url('../img/actions/checkmark.svg?v=1'); +} + +.icon-checkmark-white { + background-image: url('../img/actions/checkmark-white.svg?v=1'); +} + +.icon-checkmark-color { + background-image: url('../img/actions/checkmark-color.svg?v=1'); +} + +.icon-clippy { + background-image: url('../img/actions/clippy.svg?v=2'); +} + +.icon-close { + background-image: url('../img/actions/close.svg?v=1'); +} + +.icon-comment { + background-image: url('../img/actions/comment.svg?v=1'); +} + +.icon-confirm { + background-image: url('../img/actions/confirm.svg?v=2'); +} + +.icon-confirm-white { + background-image: url('../img/actions/confirm-white.svg?v=2'); +} + +.icon-delete { + background-image: url('../img/actions/delete.svg?v=1'); + &.no-permission { + &:hover, &:focus { + background-image: url('../img/actions/delete.svg?v=1'); + } + } + &:hover, &:focus { + background-image: url('../img/actions/delete-hover.svg?v=1'); + } +} + +.icon-delete-white { + background-image: url('../img/actions/delete-white.svg?v=1'); +} + +.icon-details { + background-image: url('../img/actions/details.svg?v=1'); +} + +.icon-download { + background-image: url('../img/actions/download.svg?v=1'); +} + +.icon-download-white { + background-image: url('../img/actions/download-white.svg?v=1'); +} + +.icon-edit { + background-image: url('../img/actions/edit.svg?v=1'); +} + +.icon-error { + background-image: url('../img/actions/error.svg?v=1'); +} + +.icon-error-white { + background-image: url('../img/actions/error-white.svg?v=1'); +} + +.icon-error-color { + background-image: url('../img/actions/error-color.svg?v=1'); +} + +.icon-external { + background-image: url('../img/actions/external.svg?v=1'); +} + +.icon-fullscreen { + background-image: url('../img/actions/fullscreen.svg?v=1'); +} + +.icon-fullscreen-white { + background-image: url('../img/actions/fullscreen-white.svg?v=2'); +} + +.icon-history { + background-image: url('../img/actions/history.svg?v=1'); +} + +.icon-info { + background-image: url('../img/actions/info.svg?v=1'); +} + +.icon-info-white { + background-image: url('../img/actions/info-white.svg?v=1'); +} + +.icon-logout { + background-image: url('../img/actions/logout.svg?v=1'); +} + +.icon-mail { + background-image: url('../img/actions/mail.svg?v=1'); +} + +.icon-menu { + background-image: url('../img/actions/menu.svg?v=1'); +} + +.icon-more { + background-image: url('../img/actions/more.svg?v=1'); +} + +.icon-more-white { + background-image: url('../img/actions/more-white.svg?v=1'); +} + +.icon-password { + background-image: url('../img/actions/password.svg?v=1'); +} + +.icon-pause { + background-image: url('../img/actions/pause.svg?v=1'); +} + +.icon-pause-big { + background-image: url('../img/actions/pause-big.svg?v=1'); +} + +.icon-play { + background-image: url('../img/actions/play.svg?v=1'); +} + +.icon-play-add { + background-image: url('../img/actions/play-add.svg?v=1'); +} + +.icon-play-big { + background-image: url('../img/actions/play-big.svg?v=1'); +} + +.icon-play-next { + background-image: url('../img/actions/play-next.svg?v=1'); +} + +.icon-play-previous { + background-image: url('../img/actions/play-previous.svg?v=1'); +} + +.icon-public { + background-image: url('../img/actions/public.svg?v=1'); +} + +.icon-rename { + background-image: url('../img/actions/rename.svg?v=1'); +} + +.icon-search { + background-image: url('../img/actions/search.svg?v=1'); +} + +.icon-search-white { + background-image: url('../img/actions/search-white.svg?v=1'); +} + +.icon-settings { + background-image: url('../img/actions/settings.svg?v=1'); +} + +.icon-share { + background-image: url('../img/actions/share.svg?v=1'); +} + +.icon-shared { + background-image: url('../img/actions/shared.svg?v=1'); +} + +.icon-sound { + background-image: url('../img/actions/sound.svg?v=1'); +} + +.icon-sound-off { + background-image: url('../img/actions/sound-off.svg?v=1'); +} + +.icon-favorite { + background-image: url('../img/actions/star-dark.svg?v=1'); +} + +.icon-star { + background-image: url('../img/actions/star.svg?v=1'); +} + +.icon-starred { + &:hover, &:focus { + background-image: url('../img/actions/star.svg?v=1'); + } + background-image: url('../img/actions/starred.svg?v=1'); +} + +.icon-star { + &:hover, &:focus { + background-image: url('../img/actions/starred.svg?v=1'); + } +} + +.icon-tag { + background-image: url('../img/actions/tag.svg?v=1'); +} + +.icon-toggle { + background-image: url('../img/actions/toggle.svg?v=1'); +} + +.icon-triangle-e { + background-image: url('../img/actions/triangle-e.svg?v=1'); +} + +.icon-triangle-n { + background-image: url('../img/actions/triangle-n.svg?v=1'); +} + +.icon-triangle-s { + background-image: url('../img/actions/triangle-s.svg?v=1'); +} + +.icon-upload { + background-image: url('../img/actions/upload.svg?v=1'); +} + +.icon-upload-white { + background-image: url('../img/actions/upload-white.svg?v=1'); +} + +.icon-user { + background-image: url('../img/actions/user.svg?v=1'); +} + +.icon-video { + background-image: url('../img/actions/video.svg?v=1'); +} + +.icon-video-white { + background-image: url('../img/actions/video-white.svg?v=2'); +} + +.icon-video-off { + background-image: url('../img/actions/video-off.svg?v=1'); +} + +.icon-video-off-white { + background-image: url('../img/actions/video-off-white.svg?v=1'); +} + +.icon-view-close { + background-image: url('../img/actions/view-close.svg?v=1'); +} + +.icon-view-download { + background-image: url('../img/actions/view-download.svg?v=1'); +} + +.icon-view-next { + background-image: url('../img/actions/view-next.svg?v=1'); +} + +.icon-view-pause { + background-image: url('../img/actions/view-pause.svg?v=1'); +} + +.icon-view-play { + background-image: url('../img/actions/view-play.svg?v=1'); +} + +.icon-view-previous { + background-image: url('../img/actions/view-previous.svg?v=1'); +} + +/* places icons */ + +.icon-calendar-dark { + background-image: url('../img/places/calendar-dark.svg?v=1'); +} + +.icon-contacts-dark { + background-image: url('../img/places/contacts-dark.svg?v=1'); +} + +.icon-files { + background-image: url('../img/places/files.svg?v=1'); +} + +.icon-files-dark { + background-image: url('../img/places/files-dark.svg?v=1'); +} + +.icon-file, .icon-filetype-text { + background-image: url('../img/filetypes/text.svg?v=1'); +} + +.icon-folder, .icon-filetype-folder { + background-image: url('../img/filetypes/folder.svg?v=1'); +} + +.icon-filetype-folder-drag-accept { + background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important; +} + +.icon-home { + background-image: url('../img/places/home.svg?v=1'); +} + +.icon-link { + background-image: url('../img/places/link.svg?v=1'); +} + +.icon-music { + background-image: url('../img/places/music.svg?v=1'); +} + +.icon-picture { + background-image: url('../img/places/picture.svg?v=1'); +} From 03fb2330a195da278e8514477d6a8ef4f558e8d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 11:17:14 +0100 Subject: [PATCH 25/43] Inputs scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 782 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 782 insertions(+) create mode 100644 core/css/inputs.scss diff --git a/core/css/inputs.scss b/core/css/inputs.scss new file mode 100644 index 00000000000..aa9c841f2b2 --- /dev/null +++ b/core/css/inputs.scss @@ -0,0 +1,782 @@ +/* INPUTS */ + +/* specifically override browser styles */ + +input, textarea, select, button { + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; +} + +.select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget { + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !important; +} + +input { + &[type='text'], &[type='password'], &[type='search'], &[type='number'], &[type='email'], &[type='tel'], &[type='url'], &[type='time'], &[type='date'] { + width: 130px; + margin: 3px 3px 3px 0; + padding: 7px 6px 5px; + font-size: 13px; + background-color: #fff; + color: #333; + border: 1px solid #ddd; + outline: none; + border-radius: 3px; + } +} + +textarea, select, button, .button { + width: 130px; + margin: 3px 3px 3px 0; + padding: 7px 6px 5px; + font-size: 13px; + background-color: #fff; + color: #333; + border: 1px solid #ddd; + outline: none; + border-radius: 3px; +} + +input { + &[type='submit'], &[type='button'] { + width: 130px; + margin: 3px 3px 3px 0; + padding: 7px 6px 5px; + font-size: 13px; + background-color: #fff; + color: #333; + border: 1px solid #ddd; + outline: none; + border-radius: 3px; + } +} + +#quota, .pager li a { + width: 130px; + margin: 3px 3px 3px 0; + padding: 7px 6px 5px; + font-size: 13px; + background-color: #fff; + color: #333; + border: 1px solid #ddd; + outline: none; + border-radius: 3px; +} + +input { + &[type='hidden'] { + height: 0; + width: 0; + } + &[type='text'], &[type='password'], &[type='search'], &[type='number'], &[type='email'], &[type='tel'], &[type='url'], &[type='time'] { + background: #fff; + color: #555; + cursor: text; + font-family: inherit; + /* use default ownCloud font instead of default textarea monospace */ + } +} + +textarea { + background: #fff; + color: #555; + cursor: text; + font-family: inherit; + /* use default ownCloud font instead of default textarea monospace */ +} + +input { + &[type='text'], &[type='password'], &[type='search'], &[type='number'], &[type='email'], &[type='tel'], &[type='url'], &[type='time'] { + -webkit-appearance: textfield; + -moz-appearance: textfield; + box-sizing: content-box; + } + &[type='text'] { + &:hover, &:focus, &:active { + color: #333; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + &[type='password'] { + &:hover, &:focus, &:active { + color: #333; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + &[type='number'] { + &:hover, &:focus, &:active { + color: #333; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + &[type='search'] { + &:hover, &:focus, &:active { + color: #333; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + &[type='email'] { + &:hover, &:focus, &:active { + color: #333; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + &[type='tel'] { + &:hover, &:focus, &:active { + color: #333; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + &[type='url'] { + &:hover, &:focus, &:active { + color: #333; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + &[type='time'] { + &:hover, &:focus, &:active { + color: #333; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } +} + +textarea { + &:hover, &:focus, &:active { + color: #333; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } +} + +input { + &[type='checkbox'] { + &.checkbox { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + + label:before { + content: ''; + display: inline-block; + height: 20px; + width: 20px; + vertical-align: middle; + background: url('../img/actions/checkbox.svg') left top no-repeat; + } + &:disabled + label:before { + opacity: .6; + } + &.u-left + label:before { + float: left; + } + &.u-hidden + label:before { + display: none; + } + &:checked + label:before { + background-image: url('../img/actions/checkbox-checked.svg'); + } + &:indeterminate + label:before { + background-image: url('../img/actions/checkbox-mixed.svg'); + } + &:disabled + label:before { + background-image: url('../img/actions/checkbox-disabled.svg'); + } + &:checked:disabled + label:before { + background-image: url('../img/actions/checkbox-checked-disabled.svg'); + } + &:indeterminate:disabled + label:before { + background-image: url('../img/actions/checkbox-mixed-disabled.svg'); + } + } + &.checkbox--white { + + label:before { + background-image: url('../img/actions/checkbox-white.svg'); + } + &:checked + label:before { + background-image: url('../img/actions/checkbox-checked-white.svg'); + } + &:indeterminate + label:before { + background-image: url('../img/actions/checkbox-mixed-white.svg'); + } + &:disabled + label:before { + background-image: url('../img/actions/checkbox-disabled-white.svg'); + } + &:checked:disabled + label:before { + background-image: url('../img/actions/checkbox-checked-disabled.svg'); + } + &:indeterminate:disabled + label:before { + background-image: url('../img/actions/checkbox-mixed-disabled.svg'); + } + } + &.checkbox:hover + label:before, &:focus + label:before { + color: #111 !important; + } + } + &[type='radio'] { + &.radio { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + + label:before { + content: ''; + display: inline-block; + height: 20px; + width: 20px; + vertical-align: middle; + background: url('../img/actions/radio.svg') left top no-repeat; + } + &:checked + label:before { + background-image: url('../img/actions/radio-checked.svg'); + } + &:disabled + label:before { + background-image: url('../img/actions/radio-disabled.svg'); + } + &:checked:disabled + label:before { + background-image: url('../img/actions/radio-checked-disabled.svg'); + } + } + &.radio--white { + + label:before { + background-image: url('../img/actions/radio-white.svg'); + } + &:checked + label:before { + background-image: url('../img/actions/radio-checked-white.svg'); + } + &:disabled + label:before { + background-image: url('../img/actions/radio-disabled.svg'); + } + &:checked:disabled + label:before { + background-image: url('../img/actions/radio-checked-disabled.svg'); + } + } + } + &[type='time'] { + width: initial; + height: 31px; + box-sizing: border-box; + } +} + +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: url('../../core/img/actions/triangle-s.svg') no-repeat right 8px center rgba(240, 240, 240, 0.9); + outline: 0; + padding-right: 24px !important; + &:hover { + background-color: #fefefe; + } +} + +/* select2 adjustments */ + +#select2-drop { + margin-top: -2px; + &.select2-drop-active { + border-color: #ddd; + } + .avatar { + display: inline-block; + margin-right: 8px; + vertical-align: middle; + img { + cursor: pointer; + } + } +} + +.select2-chosen .avatar img, #select2-drop .avatar, .select2-chosen .avatar { + cursor: pointer; +} + +#select2-drop { + .select2-search input { + width: calc(100% - 14px); + min-height: auto; + background: url('../img/actions/search.svg') no-repeat right center !important; + background-origin: content-box !important; + } + .select2-results { + max-height: 250px; + margin: 0; + padding: 0; + .select2-result-label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + span { + cursor: pointer; + } + } + .select2-result, .select2-no-results, .select2-searching { + position: relative; + display: list-item; + padding: 12px; + background-color: #fff; + cursor: pointer; + color: #222; + } + .select2-result { + &.select2-selected { + background-color: #f8f8f8; + } + &.select2-highlighted { + background-color: #f8f8f8; + color: #000; + } + } + } +} + +.select2-container-multi { + .select2-choices, &.select2-container-active .select2-choices { + box-shadow: none; + white-space: nowrap; + text-overflow: ellipsis; + background: #fff; + color: #555; + box-sizing: content-box; + border-radius: 3px; + border: 1px solid #ddd; + margin: 0; + padding: 2px 0; + min-height: auto; + } +} + +.select2-container .select2-choice { + box-shadow: none; + white-space: nowrap; + text-overflow: ellipsis; + background: #fff; + color: #555; + box-sizing: content-box; + border-radius: 3px; + border: 1px solid #ddd; + margin: 0; + padding: 2px 0; + min-height: auto; +} + +.select2-container-multi { + .select2-choices .select2-search-choice, &.select2-container-active .select2-choices .select2-search-choice { + line-height: 20px; + padding-left: 5px; + background-image: none; + background-color: #f8f8f8; + border-color: #f8f8f8; + } +} + +.select2-container .select2-choice .select2-search-choice { + line-height: 20px; + padding-left: 5px; + background-image: none; + background-color: #f8f8f8; + border-color: #f8f8f8; +} + +.select2-container-multi { + .select2-choices .select2-search-choice { + &.select2-search-choice-focus, &:hover { + background-color: #f0f0f0; + border-color: #f0f0f0; + } + } + &.select2-container-active .select2-choices .select2-search-choice { + &.select2-search-choice-focus, &:hover { + background-color: #f0f0f0; + border-color: #f0f0f0; + } + } +} + +.select2-container .select2-choice .select2-search-choice { + &.select2-search-choice-focus, &:hover { + background-color: #f0f0f0; + border-color: #f0f0f0; + } +} + +.select2-container-multi { + .select2-choices .select2-search-choice .select2-search-choice-close, &.select2-container-active .select2-choices .select2-search-choice .select2-search-choice-close { + display: none; + } +} + +.select2-container .select2-choice .select2-search-choice .select2-search-choice-close { + display: none; +} + +.select2-container-multi { + .select2-choices .select2-search-field input, &.select2-container-active .select2-choices .select2-search-field input { + line-height: 20px; + } +} + +.select2-container { + .select2-choice .select2-search-field input { + line-height: 20px; + } + margin: 3px 3px 3px 0; + &.select2-container-multi .select2-choices { + display: flex; + flex-wrap: wrap; + li { + float: none; + } + } + .select2-choice { + padding-left: 38px; + .select2-arrow { + background: none; + border-radius: 0; + border: none; + b { + background: url('../img/actions/triangle-s.svg') no-repeat center !important; + opacity: .5; + } + } + &:hover .select2-arrow b, &:focus .select2-arrow b, &:active .select2-arrow b { + opacity: .7; + } + } +} + +/* jQuery UI fixes */ + +.ui-menu { + padding: 0; + .ui-menu-item a { + &.ui-state-focus, &.ui-state-active { + font-weight: inherit; + margin: 0; + } + } +} + +.ui-widget-content { + background: #fff; + border-top: none; +} + +.ui-corner-all { + border-radius: 0; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} + +.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { + border: none; + background: #f8f8f8; +} + +/* correctly align images inside of buttons */ + +input img, button img, .button img { + vertical-align: text-bottom; +} + +input[type='submit'].enabled { + background-color: #66f866; + border: 1px solid #5e5; +} + +.input-button-inline { + position: absolute !important; + right: 0; + background-color: transparent !important; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; + opacity: .3; +} + +/* BUTTONS */ + +input { + &[type='submit'], &[type='button'] { + width: auto; + min-width: 25px; + padding: 5px; + background-color: rgba(240, 240, 240, 0.9); + font-weight: 600; + color: #555; + border: 1px solid rgba(240, 240, 240, 0.9); + cursor: pointer; + } +} + +button, .button, #quota, select, .pager li a { + width: auto; + min-width: 25px; + padding: 5px; + background-color: rgba(240, 240, 240, 0.9); + font-weight: 600; + color: #555; + border: 1px solid rgba(240, 240, 240, 0.9); + cursor: pointer; +} + +select, .button.multiselect { + font-weight: 400; +} + +input { + &[type='submit'] { + &:hover, &:focus { + background-color: rgba(255, 255, 255, 0.95); + color: #111; + } + } + &[type='button'] { + &:hover, &:focus { + background-color: rgba(255, 255, 255, 0.95); + color: #111; + } + } +} + +button { + &:hover, &:focus { + background-color: rgba(255, 255, 255, 0.95); + color: #111; + } +} + +.button { + &:hover, &:focus, a:focus { + background-color: rgba(255, 255, 255, 0.95); + color: #111; + } +} + +select { + &:hover, &:focus, &:active { + background-color: rgba(255, 255, 255, 0.95); + color: #111; + } +} + +input { + &[type='submit'] img, &[type='button'] img { + cursor: pointer; + } +} + +button img, .button img { + cursor: pointer; +} + +#header .button { + border: none; + box-shadow: none; +} + +/* disabled input fields and buttons */ + +input:disabled { + background-color: rgba(230, 230, 230, 0.9); + color: #999; + cursor: default; + &:hover, &:focus { + background-color: rgba(230, 230, 230, 0.9); + color: #999; + cursor: default; + } +} + +button:disabled { + background-color: rgba(230, 230, 230, 0.9); + color: #999; + cursor: default; + &:hover, &:focus { + background-color: rgba(230, 230, 230, 0.9); + color: #999; + cursor: default; + } +} + +.button:disabled { + background-color: rgba(230, 230, 230, 0.9); + color: #999; + cursor: default; + &:hover, &:focus { + background-color: rgba(230, 230, 230, 0.9); + color: #999; + cursor: default; + } +} + +a.disabled { + background-color: rgba(230, 230, 230, 0.9); + color: #999; + cursor: default; + &:hover, &:focus { + background-color: rgba(230, 230, 230, 0.9); + color: #999; + cursor: default; + } +} + +textarea:disabled { + background-color: rgba(230, 230, 230, 0.9); + color: #999; + cursor: default; +} + +input:disabled { + + label, &:hover + label, &:focus + label { + color: #999 !important; + cursor: default; + } +} + +/* Primary action button, use sparingly */ + +.primary { + border: 1px solid #0082c9; + background-color: #00a2e9; + color: #fff; +} + +input { + &[type='submit'].primary, &[type='button'].primary { + border: 1px solid #0082c9; + background-color: #00a2e9; + color: #fff; + } +} + +button.primary, .button.primary { + border: 1px solid #0082c9; + background-color: #00a2e9; + color: #fff; +} + +.primary:hover { + background-color: #0092d9; + color: #fff; +} + +input { + &[type='submit'].primary:hover, &[type='button'].primary:hover { + background-color: #0092d9; + color: #fff; + } +} + +button.primary:hover, .button.primary:hover, .primary:focus { + background-color: #0092d9; + color: #fff; +} + +input { + &[type='submit'].primary:focus, &[type='button'].primary:focus { + background-color: #0092d9; + color: #fff; + } +} + +button.primary:focus, .button.primary:focus { + background-color: #0092d9; + color: #fff; +} + +.primary:active { + background-color: #00a2e9; + color: #bbb; +} + +input { + &[type='submit'].primary:active, &[type='button'].primary:active { + background-color: #00a2e9; + color: #bbb; + } +} + +button.primary:active, .button.primary:active, .primary:disabled { + background-color: #00a2e9; + color: #bbb; +} + +input { + &[type='submit'].primary:disabled, &[type='button'].primary:disabled { + background-color: #00a2e9; + color: #bbb; + } +} + +button.primary:disabled, .button.primary:disabled, .primary:disabled:hover { + background-color: #00a2e9; + color: #bbb; +} + +input { + &[type='submit'].primary:disabled:hover, &[type='button'].primary:disabled:hover { + background-color: #00a2e9; + color: #bbb; + } +} + +button.primary:disabled:hover, .button.primary:disabled:hover, .primary:disabled:focus { + background-color: #00a2e9; + color: #bbb; +} + +input { + &[type='submit'].primary:disabled:focus, &[type='button'].primary:disabled:focus { + background-color: #00a2e9; + color: #bbb; + } +} + +button.primary:disabled:focus, .button.primary:disabled:focus { + background-color: #00a2e9; + color: #bbb; +} + +@keyframes shake { + 0% { + transform: translate(-5px, 0); + } + + 20% { + transform: translate(5px, 0); + } + + 40% { + transform: translate(-5px, 0); + } + + 60% { + transform: translate(5px, 0); + } + + 80% { + transform: translate(-5px, 0); + } + + 100% { + transform: translate(5px, 0); + } +} + + +.shake { + animation-name: shake; + animation-duration: .3s; + animation-timing-function: ease-out; +} From 62acac9b8018e4190bdba5c5f2ed4b647a4d5755 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 11:17:28 +0100 Subject: [PATCH 26/43] Jquery-ui-fixes scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/jquery-ui-fixes.scss | 132 ++++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 core/css/jquery-ui-fixes.scss diff --git a/core/css/jquery-ui-fixes.scss b/core/css/jquery-ui-fixes.scss new file mode 100644 index 00000000000..4cf4f4cdd4a --- /dev/null +++ b/core/css/jquery-ui-fixes.scss @@ -0,0 +1,132 @@ +/* Component containers +----------------------------------*/ + +.ui-widget { + font-family: 'Lucida Grande', Arial, Verdana, sans-serif; + font-size: 1em; + button { + font-family: 'Lucida Grande', Arial, Verdana, sans-serif; + } +} + +.ui-widget-content { + border: 1px solid #dddddd; + background: #eeeeee url('images/ui-bg_highlight-soft_100_eeeeee_1x100.png') 50% top repeat-x; + color: #333333; + a { + color: #333333; + } +} + +.ui-widget-header { + border: 1px solid #0082c9; + background: #0082c9; + color: #ffffff; + a { + color: #ffffff; + } +} + +/* Interaction states +----------------------------------*/ + +.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { + border: 1px solid #ddd; + background: #f8f8f8 url('images/ui-bg_glass_100_f8f8f8_1x400.png') 50% 50% repeat-x; + font-weight: bold; + color: #555; +} + +.ui-state-default a { + color: #555; + &:link, &:visited { + color: #555; + } +} + +.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { + border: 1px solid #ddd; + background: #ffffff url('images/ui-bg_flat_100_ffffff_40x100.png') 50% 50% repeat-x; + font-weight: bold; + color: #333; +} + +.ui-state-hover a { + color: #333; + &:hover, &:link, &:visited { + color: #333; + } +} + +.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { + border: 1px solid #0082c9; + background: #f8f8f8 url('images/ui-bg_glass_100_f8f8f8_1x400.png') 50% 50% repeat-x; + font-weight: bold; + color: #0082c9; +} + +.ui-state-active a { + color: #0082c9; + &:link, &:visited { + color: #0082c9; + } +} + +/* Interaction Cues +----------------------------------*/ + +.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { + border: 1px solid #ddd; + background: #f8f8f8 url('images/ui-bg_highlight-hard_100_f8f8f8_1x100.png') 50% top repeat-x; + color: #555; +} + +.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { + color: #555; +} + +.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { + border: 1px solid #cd0a0a; + background: #b81900 url('images/ui-bg_diagonals-thick_18_b81900_40x40.png') 50% 50% repeat; + color: #ffffff; +} + +.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a, .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { + color: #ffffff; +} + +/* Icons +----------------------------------*/ + +.ui-state-default .ui-icon, .ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-state-active .ui-icon { + background-image: url('images/ui-icons_1d2d44_256x240.png'); +} + +.ui-state-highlight .ui-icon { + background-image: url('images/ui-icons_ffffff_256x240.png'); +} + +.ui-state-error .ui-icon, .ui-state-error-text .ui-icon { + background-image: url('images/ui-icons_ffd27a_256x240.png'); +} + +/* Misc visuals +----------------------------------*/ +/* Overlays */ + +.ui-widget-overlay { + background: #666666 url('images/ui-bg_diagonals-thick_20_666666_40x40.png') 50% 50% repeat; + opacity: .5; +} + +.ui-widget-shadow { + margin: -5px 0 0 -5px; + padding: 5px; + background: #000000 url('images/ui-bg_flat_10_000000_40x100.png') 50% 50% repeat-x; + opacity: .2; + border-radius: 5px; +} + +.ui-menu .ui-menu-item a { + padding: 6px; +} From 4cda23bb6a4edd098bafc362c2d5cec8800c968a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 11:17:39 +0100 Subject: [PATCH 27/43] Multiselect scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/multiselect.scss | 124 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 core/css/multiselect.scss diff --git a/core/css/multiselect.scss b/core/css/multiselect.scss new file mode 100644 index 00000000000..ea7a481f360 --- /dev/null +++ b/core/css/multiselect.scss @@ -0,0 +1,124 @@ +/* Copyright (c) 2011, Jan-Christoph Borchardt, http: //jancborchardt.net +This file is licensed under the Affero General Public License version 3 or later. +See the COPYING-README file. */ + +ul.multiselectoptions { + background-color: #fff; + border: 1px solid #ddd; + border-top: none; + box-shadow: 0 1px 1px #ddd; + padding-top: 8px; + position: absolute; + max-height: 20em; + overflow-y: auto; + z-index: 49; + &.down { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + width: 100%; + /* do not cut off group names */ + -webkit-box-shadow: 0px 0px 20px rgba(29, 45, 68, 0.4); + -moz-box-shadow: 0px 0px 20px rgba(29, 45, 68, 0.4); + box-shadow: 0px 0px 20px rgba(29, 45, 68, 0.4); + } + &.up { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } + > li { + overflow: hidden; + white-space: nowrap; + margin-left: 7px; + input[type='checkbox'] { + + label { + font-weight: normal; + display: inline-block; + width: 100%; + padding: 5px 27px; + margin-left: -27px; + /* to have area around checkbox clickable as well */ + text-overflow: ellipsis; + overflow: hidden; + } + &:checked + label { + font-weight: bold; + } + } + } +} + +div.multiselect { + display: inline-block; + max-width: 200px; + min-width: 150px !important; + padding-right: 10px; + min-height: 20px; + position: relative; + vertical-align: bottom; +} + +select.multiselect { + display: inline-block; + max-width: 200px; + min-width: 150px !important; + padding-right: 10px; + min-height: 20px; + position: relative; + vertical-align: bottom; + height: 30px; + min-width: 113px; +} + +/* To make a select look like a multiselect until it's initialized */ + +div.multiselect { + &.active { + background-color: #fff; + position: relative; + z-index: 50; + } + &.up { + border-top: 0 none; + border-top-left-radius: 0; + border-top-right-radius: 0; + } + &.down { + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + > span { + &:first-child { + float: left; + margin-right: 32px; + overflow: hidden; + text-overflow: ellipsis; + width: 90%; + white-space: nowrap; + } + &:last-child { + position: absolute; + right: 8px; + top: 8px; + } + } +} + +ul.multiselectoptions { + input.new { + padding-bottom: 3px; + padding-top: 3px; + margin: 0; + } + > li.creator { + padding: 10px; + margin: 0; + font-weight: bold; + > input { + width: 95% !important; + /* do not constrain size of text input */ + padding: 5px; + margin: -5px; + } + } +} From f4ac735f985018b893c9ccbb5cb94b4f3ad939e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 11:17:47 +0100 Subject: [PATCH 28/43] Share scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/share.scss | 199 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 199 insertions(+) create mode 100644 core/css/share.scss diff --git a/core/css/share.scss b/core/css/share.scss new file mode 100644 index 00000000000..a72437c4aeb --- /dev/null +++ b/core/css/share.scss @@ -0,0 +1,199 @@ +/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net + This file is licensed under the Affero General Public License version 3 or later. + See the COPYING-README file. */ + +#dropdown { + background: #eee; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + box-shadow: 0 2px 3px rgba(50, 50, 50, 0.4); + display: block; + margin-right: 0; + position: absolute; + right: 0; + width: 420px; + z-index: 500; + padding: 16px; +} + +@media only screen and (min-width: 768px) and (max-width: 990px) { + #dropdown { + /* this limits the dropdown to float below the sidebar for mid narrow screens */ + left: 20px; + } +} + +.shareTabView { + .unshare.icon-loading-small { + margin-top: 1px; + } + .shareWithLoading, .linkShare .icon-loading-small { + display: inline-block !important; + padding-left: 10px; + } + .shareWithLoading { + position: relative; + right: 70px; + top: 2px; + } + .icon-loading-small.hidden { + display: none !important; + } + .avatar { + margin-right: 8px; + display: inline-block; + overflow: hidden; + vertical-align: middle; + width: 32px; + height: 32px; + } +} + +.share-autocomplete-item { + display: flex; + .autocomplete-item-text { + margin-left: 10px; + margin-right: 10px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + line-height: 32px; + vertical-align: middle; + } +} + +#shareWithList { + list-style-type: none; + padding: 8px; + li { + padding-top: 10px; + padding-bottom: 10px; + font-weight: bold; + line-height: 21px; + white-space: normal; + width: 100%; + } + .sharingOptionsGroup { + flex-shrink: 0; + position: relative; + .popovermenu { + right: -6px; + top: 40px; + padding: 3px 6px; + } + } + .shareOption { + white-space: nowrap; + display: inline-block; + } + .unshare img, .showCruds img { + vertical-align: text-bottom; + /* properly align icons */ + } + label input[type=checkbox] { + margin-left: 0; + position: relative; + } + .username { + padding-right: 8px; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + overflow: hidden; + vertical-align: middle; + flex-grow: 5; + } + li label { + margin-right: 8px; + } +} + +.shareTabView { + label { + font-weight: 400; + white-space: nowrap; + } + input[type='checkbox'] { + margin: 0 3px 0 8px; + vertical-align: middle; + } +} + +a { + &.showCruds { + display: inline; + opacity: .5; + } + &.unshare { + display: inline-block; + opacity: .5; + padding: 10px; + } +} + +#link { + border-top: 1px solid #ddd; + padding-top: 8px; +} + +.shareTabView { + input[type='submit'] { + margin-left: 7px; + } + form { + font-size: 100%; + margin-left: 0; + margin-right: 0; + } + .error { + color: #e9322d; + border-color: #e9322d; + box-shadow: 0 0 6px #f8b9b7; + } +} + +#link #showPassword img { + padding-left: 5px; + width: 12px; +} + +.reshare, #link label, #expiration label { + display: inline-block; + padding: 6px 4px; +} + +a { + &.showCruds:hover, &.unshare:hover { + opacity: 1; + } +} + +#defaultExpireMessage, .reshare { + /* fix shared by text going out of box */ + white-space: normal; +} + +#defaultExpireMessage { + /* show message on new line */ + display: block; + padding-left: 4px; + /* TODO: style the dropdown in a proper way - border-box, etc. */ + width: 90%; +} + +.ui-autocomplete { + /* limit dropdown height to 4 1/2 entries */ + max-height: 200px; + overflow-y: auto; + overflow-x: hidden; +} + +.notCreatable { + padding-left: 12px; + padding-top: 12px; + color: #999; +} + +.shareTabView .mailView .icon-mail { + opacity: 0.5; +} From 59731acf38bd84a9d6573f3c30d7f830f3541f0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 11:17:58 +0100 Subject: [PATCH 29/43] Styles scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/styles.scss | 1274 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1274 insertions(+) create mode 100644 core/css/styles.scss diff --git a/core/css/styles.scss b/core/css/styles.scss new file mode 100644 index 00000000000..affaec14342 --- /dev/null +++ b/core/css/styles.scss @@ -0,0 +1,1274 @@ +/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net + This file is licensed under the Affero General Public License version 3 or later. + See the COPYING-README file. */ + +html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + cursor: default; +} + +html, body { + height: 100%; +} + +article, aside, dialog, figure, footer, header, hgroup, nav, section { + display: block; +} + +body { + line-height: 1.5; +} + +table { + border-collapse: separate; + border-spacing: 0; + white-space: nowrap; +} + +caption, th, td { + text-align: left; + font-weight: normal; +} + +table, td, th { + vertical-align: middle; +} + +a { + border: 0; + color: #000; + text-decoration: none; + cursor: pointer; + * { + cursor: pointer; + } +} + +input { + cursor: pointer; + * { + cursor: pointer; + } +} + +select, .button span, label { + cursor: pointer; +} + +ul { + list-style: none; +} + +body { + background-color: #ffffff; + font-weight: 400; + font-size: .8em; + line-height: 1.6em; + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; + color: #000; + height: auto; +} + +#body-login { + text-align: center; + background-color: #0082c9; + background-image: url('../img/background.jpg?v=1'); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; +} + +.two-factor-header { + text-align: center; +} + +.two-factor-provider { + text-align: center; + width: 258px !important; + display: inline-block; + margin-bottom: 0 !important; + background-color: rgba(0, 0, 0, 0.3) !important; + border: none !important; +} + +.two-factor-link { + display: inline-block; + padding: 12px; + color: rgba(255, 255, 255, 0.75); +} + +.float-spinner { + height: 32px; + display: none; +} + +#body-login .float-spinner { + margin-top: -32px; + padding-top: 32px; +} + +#nojavascript { + position: fixed; + top: 0; + bottom: 0; + height: 100%; + width: 100%; + z-index: 9000; + text-align: center; + background-color: rgba(0, 0, 0, 0.5); + color: #fff; + line-height: 125%; + font-size: 24px; + div { + display: block; + position: relative; + width: 50%; + top: 35%; + margin: 0px auto; + } + a { + color: #fff; + border-bottom: 2px dotted #fff; + &:hover, &:focus { + color: #ddd; + } + } +} + +/* SCROLLING */ + +::-webkit-scrollbar { + width: 5px; +} + +::-webkit-scrollbar-track-piece { + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background: #ddd; + border-radius: 3px; +} + +/* Searchbox */ + +.searchbox input[type='search'] { + position: relative; + font-size: 1.2em; + padding: 3px; + padding-left: 25px; + background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center; + color: #fff; + border: 0; + border-radius: 3px; + margin-top: 9px; + float: right; + width: 0; + cursor: pointer; + -webkit-transition: all 100ms; + transition: all 100ms; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'; + opacity: .7; + &:focus, &:active, &:valid { + color: #fff; + width: 155px; + max-width: 50%; + cursor: text; + background-color: #0082c9; + border: 1px solid rgba(255, 255, 255, 0.5); + } +} + +/* CONTENT ------------------------------------------------------------------ */ + +#controls { + box-sizing: border-box; + position: fixed; + top: 45px; + right: 0; + left: 0; + height: 44px; + width: 100%; + padding: 0; + margin: 0; + background-color: rgba(255, 255, 255, 0.95); + z-index: 50; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +/* position controls for apps with app-navigation */ + +#app-navigation + #app-content #controls { + left: 250px; +} + +.viewer-mode #app-navigation + #app-content #controls { + left: 0; +} + +#controls { + .button, button { + box-sizing: border-box; + display: inline-block; + height: 36px; + padding: 7px 10px; + } + input { + &[type='submit'], &[type='text'], &[type='password'] { + box-sizing: border-box; + display: inline-block; + height: 36px; + padding: 7px 10px; + } + } + select { + box-sizing: border-box; + display: inline-block; + height: 36px; + padding: 7px 10px; + } + .button.hidden { + display: none; + } +} + +#content { + position: relative; + height: 100%; + width: 100%; + .hascontrols { + margin-top: 45px; + } +} + +#content-wrapper { + position: absolute; + height: 100%; + width: 100%; + overflow-x: hidden; + /* prevent horizontal scrollbar */ + padding-top: 45px; + box-sizing: border-box; +} + +/* allow horizontal scrollbar for personal and admin settings */ + +#body-settings:not(.snapjs-left) .app-settings { + overflow-x: auto; +} + +#emptycontent, .emptycontent { + color: #888; + text-align: center; + margin-top: 30vh; + width: 100%; +} + +#emptycontent.emptycontent-search, .emptycontent.emptycontent-search { + position: static; +} + +#emptycontent h2, .emptycontent h2 { + margin-bottom: 10px; + line-height: 150%; +} + +#emptycontent [class^='icon-'], .emptycontent [class^='icon-'], #emptycontent [class*=' icon-'], .emptycontent [class*=' icon-'] { + background-size: 64px; + height: 64px; + width: 64px; + margin: 0 auto 15px; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)'; + opacity: .4; +} + +/* LOG IN & INSTALLATION ------------------------------------------------------------ */ + +/* Some whitespace to the top */ + +#body-login { + #header { + padding-top: 100px; + } + background-attachment: fixed; + /* fix background gradient */ + height: 100%; + /* fix sticky footer */ + p.info, form fieldset legend, #datadirContent label { + text-align: center; + color: #fff; + } + form { + fieldset .warning-info, input[type='checkbox'] + label { + text-align: center; + color: #fff; + } + .warning input[type='checkbox'] { + &:hover + label, &:focus + label, + label { + color: #fff !important; + } + } + } + .update { + h2 { + margin: 0 0 20px; + } + a { + color: #fff; + border-bottom: 1px solid #aaa; + } + } + .infogroup { + margin-bottom: 15px; + } + p#message img { + vertical-align: middle; + padding: 5px; + } + div.buttons { + text-align: center; + } + p.info { + margin: 0 auto; + padding-top: 20px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + a { + font-weight: 600; + padding: 13px; + margin: -13px; + } + } + form { + position: relative; + width: 280px; + margin: 16px auto; + padding: 0; + fieldset { + margin-bottom: 20px; + text-align: left; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + #sqliteInformation { + margin-top: -20px; + margin-bottom: 20px; + } + #adminaccount { + margin-bottom: 15px; + } + fieldset legend { + width: 100%; + } + } +} + +/* Dark subtle label text */ + +/* overrides another !important statement that sets this to unreadable black */ + +#datadirContent label { + width: 100%; +} + +#body-login { + #datadirContent label { + display: block; + margin: 0; + } + form #datadirField legend { + margin-bottom: 15px; + } + #showAdvanced { + padding: 13px; + /* increase clickable area of Advanced dropdown */ + img { + vertical-align: bottom; + /* adjust position of Advanced dropdown arrow */ + margin-left: -4px; + } + } + .icon-info-white { + padding: 10px; + } + .strengthify-wrapper { + display: inline-block; + position: relative; + left: 15px; + top: -23px; + width: 250px; + } + .tipsy-inner { + font-weight: bold; + color: #ccc; + } + input { + &[type='text'], &[type='password'], &[type='email'] { + border: none; + font-weight: 300; + } + } +} + +/* strengthify wrapper */ + +/* tipsy for the strengthify wrapper looks better with following font settings */ + +/* General new input field look */ + +/* Nicely grouping input field sets */ + +.grouptop, .groupmiddle, .groupbottom { + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#body-login .grouptop input, .grouptop input { + margin-bottom: 0 !important; + border-bottom: 0 !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +#body-login .groupmiddle input, .groupmiddle input { + margin-top: 0 !important; + margin-bottom: 0 !important; + border-top: 0 !important; + border-bottom: 0 !important; + border-radius: 0 !important; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; +} + +#body-login .groupbottom input, .groupbottom input { + margin-top: 0 !important; + border-top: 0 !important; + border-top-right-radius: 0 !important; + border-top-left-radius: 0 !important; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; +} + +#body-login .groupbottom input[type=submit] { + box-shadow: none !important; +} + +/* keep the labels for screen readers but hide them since we use placeholders */ + +label.infield { + display: none; +} + +#body-login { + form { + input[type='checkbox'] + label { + position: relative; + margin: 0; + padding: 14px; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + .errors { + background: #fed7d7; + border: 1px solid #f00; + list-style-indent: inside; + margin: 0 0 2em; + padding: 1em; + } + } + .success { + background: #d7fed7; + border: 1px solid #0f0; + width: 35%; + margin: 30px auto; + padding: 1em; + text-align: center; + } + #showAdvanced > img { + padding: 4px; + box-sizing: border-box; + } + p.info a, #showAdvanced { + color: #fff; + } + #remember_login { + &:hover + label, &:focus + label { + opacity: .6; + } + } + #forgot-password { + &:hover, &:focus { + opacity: .6; + } + } + p.info a { + &:hover, &:focus { + opacity: .6; + } + } +} + +/* Show password toggle */ + +#show, #dbpassword { + position: absolute; + right: 1em; + top: .8em; + float: right; +} + +#show, #dbpassword, #personal-show { + display: none; +} + +#show + label, #dbpassword + label { + right: 21px; + top: 15px !important; + margin: -14px !important; + padding: 14px !important; +} + +#show:checked + label, #dbpassword:checked + label, #personal-show:checked + label { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; + opacity: .8; +} + +#show + label, #dbpassword + label, #personal-show + label { + position: absolute !important; + height: 20px; + width: 24px; + background-image: url('../img/actions/toggle.svg?v=1'); + background-repeat: no-repeat; + background-position: center; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; + opacity: .3; +} + +#show + label:before, #dbpassword + label:before, #personal-show + label:before { + display: none; +} + +#pass2, input[name='personal-password-clone'] { + padding: .6em 2.5em .4em .4em; + width: 8em; +} + +#personal-show + label { + height: 14px; + margin-top: -25px; + left: 295px; + display: block; +} + +#passwordbutton { + margin-left: .5em; +} + +/* Database selector */ + +#body-login { + form #selectDbType { + text-align: center; + white-space: nowrap; + margin: 0; + .info { + white-space: normal; + } + label { + position: static; + margin: 0 -3px 5px; + font-size: 12px; + background: #f8f8f8; + color: #888; + cursor: pointer; + border: 1px solid #ddd; + span { + cursor: pointer; + padding: 10px 20px; + } + &.ui-state-hover, &.ui-state-active { + color: #000; + background-color: #e8e8e8; + } + } + } + .warning, .update, .error { + display: block; + padding: 10px; + background-color: rgba(0, 0, 0, 0.3); + color: #fff; + text-align: left; + border-radius: 3px; + cursor: default; + } + .update { + width: inherit; + text-align: center; + .appList { + list-style: disc; + text-align: left; + margin-left: 25px; + margin-right: 25px; + } + } + .v-align { + width: inherit; + } + .update img.float-spinner { + float: left; + } +} + +/* Warnings and errors are the same */ + +#body-user .warning, #body-settings .warning { + margin-top: 8px; + padding: 5px; + background: #fdd; + border-radius: 3px; +} + +.warning { + legend, a { + color: #fff !important; + font-weight: 600 !important; + } +} + +.error { + a { + color: #fff !important; + font-weight: 600 !important; + &.button { + color: #555 !important; + display: inline-block; + text-align: center; + } + } + pre { + white-space: pre-wrap; + text-align: left; + } +} + +.error-wide { + width: 700px; + margin-left: -200px !important; + .button { + color: black !important; + } +} + +.warning-input { + border-color: #ce3702 !important; +} + +/* Fixes for log in page, TODO should be removed some time */ + +#body-login { + ul.error-wide { + margin-top: 35px; + } + .warning { + margin: 0 7px 5px 4px; + legend { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + a.warning { + cursor: pointer; + } + .updateProgress .error { + margin-top: 10px; + margin-bottom: 10px; + } +} + +/* fixes for update page TODO should be fixed some time in a proper way */ +/* this is just for an error while updating the ownCloud instance */ + +/* Alternative Logins */ + +#alternative-logins { + legend { + margin-bottom: 10px; + } + li { + height: 40px; + display: inline-block; + white-space: nowrap; + } +} + +/* Log in and install button */ + +#body-login input { + font-size: 20px; + margin: 5px; + padding: 11px 10px 9px; + &[type='text'], &[type='password'] { + width: 249px; + } + &.login { + width: 269px; + background-position: right 16px center; + } + &[type='submit'] { + padding: 10px 20px; + /* larger log in and installation buttons */ + } +} + +#remember_login { + margin: 18px 5px 0 16px !important; +} + +#body-login { + .remember-login-container { + display: inline-block; + margin: 10px 0; + text-align: center; + width: 100%; + } + #forgot-password { + padding: 11px; + float: right; + color: #fff; + } + .wrapper { + min-height: 100%; + margin: 0 auto -70px; + width: 300px; + } + footer, .push { + height: 70px; + } +} + +/* Sticky footer */ + +/* round profile photos */ + +.avatar, .avatardiv { + border-radius: 50%; + flex-shrink: 0; + img { + border-radius: 50%; + flex-shrink: 0; + } +} + +td.avatar { + border-radius: 0; +} + +#notification-container { + position: absolute; + top: 0; + width: 100%; + text-align: center; +} + +#notification { + margin: 0 auto; + max-width: 60%; + z-index: 8000; + background-color: #fff; + border: 0; + padding: 1px 8px; + display: none; + position: relative; + top: 0; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; + opacity: .9; + span { + cursor: pointer; + margin-left: 1em; + } + overflow-x: hidden; + overflow-y: auto; + max-height: 100px; + .row { + position: relative; + .close { + display: inline-block; + vertical-align: middle; + position: absolute; + right: 0; + top: 0; + margin-top: 2px; + } + &.closeable { + padding-right: 20px; + } + } +} + +tr .action:not(.permanent), .selectedActions a { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; + opacity: 0; +} + +tr { + &:hover .action, &:focus .action, .action.permanent { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; + opacity: .5; + } +} + +.selectedActions a { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; + opacity: .5; +} + +tr .action { + width: 16px; + height: 16px; +} + +.header-action { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; + opacity: .8; +} + +tr { + &:hover .action:hover, &:focus .action:focus { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } +} + +.selectedActions a { + &:hover, &:focus { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } +} + +.header-action { + &:hover, &:focus { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } +} + +tbody tr { + &:hover, &:focus, &:active { + background-color: #f8f8f8; + } +} + +code { + font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace; +} + +#quota { + cursor: default; + margin: 30px !important; + position: relative; + padding: 0 !important; + div { + padding: 0; + background-color: rgb(220, 220, 220); + font-weight: normal; + white-space: nowrap; + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; + min-width: 1%; + max-width: 100%; + } +} + +#quotatext { + padding: .6em 1em; +} + +#quota div.quota-warning { + background-color: #fc4; +} + +.pager { + list-style: none; + float: right; + display: inline; + margin: .7em 13em 0 0; + li { + display: inline-block; + } +} + +.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { + overflow: hidden; + text-overflow: ellipsis; +} + +.separator { + display: inline; + border-left: 1px solid #d3d3d3; + border-right: 1px solid #fff; + height: 10px; + width: 0px; + margin: 4px; +} + +a.bookmarklet { + background-color: #ddd; + border: 1px solid #ccc; + padding: 5px; + padding-top: 0px; + padding-bottom: 2px; + text-decoration: none; + margin-top: 5px; +} + +.exception { + color: #000; + textarea { + width: 95%; + height: 200px; + background: #ffe; + border: 0; + } +} + +.ui-icon-circle-triangle-e { + background-image: url('../img/actions/play-next.svg?v=1'); +} + +.ui-icon-circle-triangle-w { + background-image: url('../img/actions/play-previous.svg?v=1'); +} + +.ui-datepicker-prev, .ui-datepicker-next { + border: 1px solid #ddd; + background: #fff; +} + +/* ---- DIALOGS ---- */ + +#oc-dialog-filepicker-content { + .dirtree { + width: 92%; + float: left; + margin-left: 15px; + overflow: hidden; + div:first-child a { + background-image: url('../img/places/home.svg?v=1'); + background-repeat: no-repeat; + background-position: left center; + } + span { + &:not(:last-child) { + cursor: pointer; + } + &:last-child { + font-weight: bold; + } + &:not(:last-child)::after { + content: '>'; + padding: 3px; + } + } + } + .filelist-container { + box-sizing: border-box; + display: inline-block; + overflow-y: auto; + height: 100%; + /** overflow under the button row */ + width: 100%; + } + .emptycontent { + color: #888; + text-align: center; + margin-top: 80px; + width: 100%; + display: none; + } + .filelist { + background-color: white; + width: 100%; + } + #filestable.filelist { + /* prevent the filepicker to overflow */ + min-width: initial; + margin-bottom: 50px; + } + .filelist { + td { + padding: 14px; + border-bottom: 1px solid #eee; + } + tr:last-child td { + border-bottom: none; + } + .filename { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + background-size: 32px; + background-repeat: no-repeat; + padding-left: 51px; + background-position: 7px 7px; + cursor: pointer; + } + .filesize, .date { + width: 80px; + } + .filesize { + text-align: right; + } + } + .filepicker_element_selected { + background-color: lightblue; + } +} + +.ui-dialog { + position: fixed !important; +} + +span.ui-icon { + float: left; + margin: 3px 7px 30px 0; +} + +.move2trash { + /* decrease spinner size */ + width: 16px; + height: 16px; +} + +/* ---- TOOLTIPS ---- */ + +.extra-data { + padding-right: 5px !important; +} + +.tipsy-inner { + max-width: 400px !important; + overflow: hidden; + text-overflow: ellipsis; +} + +/* ---- TAGS ---- */ + +#tagsdialog { + .content { + width: 100%; + height: 280px; + } + .scrollarea { + overflow: auto; + border: 1px solid #ddd; + width: 100%; + height: 240px; + } + .bottombuttons { + width: 100%; + height: 30px; + * { + float: left; + } + } + .taglist li { + background: #f8f8f8; + padding: .3em .8em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + -webkit-transition: background-color 500ms; + transition: background-color 500ms; + &:hover, &:active { + background: #eee; + } + } + .addinput { + width: 90%; + clear: both; + } +} + +/* ---- APP SETTINGS - LEGACY, DO NOT USE THE POPUP! ---- */ + +.popup { + background-color: #fff; + border-radius: 3px; + box-shadow: 0 0 10px #aaa; + color: #333; + padding: 10px; + position: fixed !important; + z-index: 100; + &.topright { + top: 7em; + right: 1em; + } + &.bottomleft { + bottom: 1em; + left: 33em; + } + .close { + position: absolute; + top: 0.2em; + right: 0.2em; + height: 20px; + width: 20px; + background: url('../img/actions/close.svg?v=1') no-repeat center; + } + h2 { + font-size: 20px; + } +} + +.arrow { + border-bottom: 10px solid white; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + display: block; + height: 0; + position: absolute; + width: 0; + z-index: 201; + &.left { + left: -13px; + bottom: 1.2em; + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); + } + &.up { + top: -8px; + right: 6px; + } + &.down { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + } +} + +/* ---- BREADCRUMB ---- */ + +div.crumb { + float: left; + display: block; + background-image: url('../img/breadcrumb.svg?v=1'); + background-repeat: no-repeat; + background-position: right center; + height: 44px; + background-size: auto 24px; + &.hidden { + display: none; + } + a, > span { + position: relative; + top: 12px; + padding: 14px 24px 14px 17px; + color: #555; + } + &.last a { + padding-right: 0; + } + &:first-child a { + position: relative; + top: 13px; + padding-right: 14px; + } + &.last { + font-weight: 600; + margin-right: 10px; + } + &.ellipsized { + padding: 0 10px 0 5px; + } + a.ellipsislink { + padding: 0 !important; + position: relative; + top: 8px !important; + } + &:hover, &:focus, a:focus, &:active { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'; + opacity: .7; + } +} + +/* some feedback for hover/tap on breadcrumbs */ + +.appear { + opacity: 1; + -webkit-transition: opacity 500ms ease 0s; + -moz-transition: opacity 500ms ease 0s; + -ms-transition: opacity 500ms ease 0s; + -o-transition: opacity 500ms ease 0s; + transition: opacity 500ms ease 0s; + &.transparent { + opacity: 0; + } +} + +/* public footer */ + +#body-public footer { + position: relative; + text-align: center; + .info { + color: #777; + text-align: center; + margin: 0 auto; + padding: 20px 0; + a { + color: #777; + font-weight: 600; + padding: 13px; + margin: -13px; + } + } +} + +/* LEGACY FIX only - do not use fieldsets for settings */ + +fieldset { + &.warning legend, &.update legend { + top: 18px; + position: relative; + } + &.warning legend + p, &.update legend + p { + margin-top: 12px; + } +} + +/* for IE10 */ +@-ms-viewport { + width: device-width; +} + + +/* hidden input type=file field */ + +.hiddenuploadfield { + width: 0; + height: 0; + opacity: 0; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; +} From 5b302a9a67830d81935cb16cb9839abc4e3ebf75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 11:18:09 +0100 Subject: [PATCH 30/43] Systemtags scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/systemtags.scss | 84 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 core/css/systemtags.scss diff --git a/core/css/systemtags.scss b/core/css/systemtags.scss new file mode 100644 index 00000000000..adbd36ebab1 --- /dev/null +++ b/core/css/systemtags.scss @@ -0,0 +1,84 @@ +/* + * Copyright (c) 2016 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ + +.systemtags-select2-dropdown { + .select2-result-label { + .checkmark { + visibility: hidden; + margin-left: -5px; + margin-right: 5px; + padding: 4px; + } + .new-item .systemtags-actions { + display: none; + } + } + .select2-selected .select2-result-label .checkmark { + visibility: visible; + } + .select2-result-label .icon { + display: inline-block; + opacity: .5; + &.rename { + padding: 4px; + } + } + .systemtags-actions { + position: absolute; + right: 5px; + } + .systemtags-rename-form { + display: inline-block; + width: calc(100% - 20px); + top: -6px; + position: relative; + input { + display: inline-block; + width: calc(100% - 40px); + } + } +} + +.systemtags-select2-container { + width: 100%; +} + +#select2-drop.systemtags-select2-dropdown .select2-results li.select2-result { + padding: 5px; +} + +.systemtags-select2-dropdown { + span { + line-height: 25px; + } + .systemtags-item { + display: inline-block; + height: 25px; + width: 100%; + } + .select2-result-label { + height: 25px; + } +} + +.systemtags-select2-container .select2-choices .select2-search-choice.select2-locked .label { + opacity: 0.5; +} + +.systemtags-select2-dropdown .label { + width: 85%; + display: -moz-inline-box; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + &.hidden { + display: none; + } +} From 1c128e93913caa350be3c4274c73b28eaddc6a90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 11:18:47 +0100 Subject: [PATCH 31/43] Tooltip scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/tooltip.scss | 125 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 core/css/tooltip.scss diff --git a/core/css/tooltip.scss b/core/css/tooltip.scss new file mode 100644 index 00000000000..42289787e8d --- /dev/null +++ b/core/css/tooltip.scss @@ -0,0 +1,125 @@ +/*! + * Bootstrap v3.3.5 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +.tooltip { + position: absolute; + display: block; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-style: normal; + font-weight: normal; + letter-spacing: normal; + line-break: auto; + line-height: 1.42857143; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + white-space: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + font-size: 12px; + opacity: 0; + z-index: 100000; + filter: alpha(opacity = 0); + &.in { + opacity: 0.9; + filter: alpha(opacity = 90); + } + &.top { + margin-top: -3px; + padding: 5px 0; + } + &.right { + margin-left: 3px; + padding: 0 5px; + } + &.bottom { + margin-top: 3px; + padding: 5px 0; + } + &.left { + margin-left: -3px; + padding: 0 5px; + } +} + +.tooltip-inner { + max-width: 350px; + padding: 3px 8px; + color: #ffffff; + text-align: center; + background-color: #000000; + border-radius: 4px; +} + +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} + +.tooltip { + &.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; + } + &.top-left .tooltip-arrow { + bottom: 0; + right: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; + } + &.top-right .tooltip-arrow { + bottom: 0; + left: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; + } + &.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #000000; + } + &.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #000000; + } + &.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; + } + &.bottom-left .tooltip-arrow { + top: 0; + right: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; + } + &.bottom-right .tooltip-arrow { + top: 0; + left: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; + } +} From 62f4c08bc7591d77d8024663d033f5b94a34f227 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 11:19:41 +0100 Subject: [PATCH 32/43] 3rdparty branch set MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- 3rdparty | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/3rdparty b/3rdparty index 9232ccdf02b..204e4842df5 160000 --- a/3rdparty +++ b/3rdparty @@ -1 +1 @@ -Subproject commit 9232ccdf02be87d72b4827a2cfa33a2d75b0ee7f +Subproject commit 204e4842df5d63c759f9c2d110c1a14036900e24 From a44c5244c3e6a2516ab8c1b0ab828b836bb3a567 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 11:22:59 +0100 Subject: [PATCH 33/43] Removed old css files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.css | 700 ------------------------ core/css/header.css | 384 -------------- core/css/icons.css | 428 --------------- core/css/inputs.css | 472 ----------------- core/css/jquery-ui-fixes.css | 142 ----- core/css/multiselect.css | 113 ---- core/css/share.css | 199 ------- core/css/styles.css | 999 ----------------------------------- core/css/systemtags.css | 86 --- core/css/tooltip.css | 119 ----- 10 files changed, 3642 deletions(-) delete mode 100644 core/css/apps.css delete mode 100644 core/css/header.css delete mode 100644 core/css/icons.css delete mode 100644 core/css/inputs.css delete mode 100644 core/css/jquery-ui-fixes.css delete mode 100644 core/css/multiselect.css delete mode 100644 core/css/share.css delete mode 100644 core/css/styles.css delete mode 100644 core/css/systemtags.css delete mode 100644 core/css/tooltip.css diff --git a/core/css/apps.css b/core/css/apps.css deleted file mode 100644 index e709f9d901f..00000000000 --- a/core/css/apps.css +++ /dev/null @@ -1,700 +0,0 @@ -/* APP STYLING -------------------------------------------------------------- */ - - -#app { - height: 100%; - width: 100%; -} -#app * { - box-sizing: border-box; -} - - - - - -/* APP-NAVIGATION ------------------------------------------------------------*/ - - -/* Navigation: folder like structure */ -#app-navigation { - width: 250px; - height: 100%; - float: left; - box-sizing: border-box; - background-color: #fff; - padding-bottom: 44px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border-right: 1px solid #eee; -} -#app-navigation > ul { - position: relative; - height: 100%; - width: inherit; - overflow: auto; - box-sizing: border-box; -} -#app-navigation li { - position: relative; - width: 100%; - box-sizing: border-box; -} - -#app-navigation.without-app-settings { - padding-bottom: 0; -} - -#app-navigation .active.with-menu > a, -#app-navigation .with-counter > a { - padding-right: 50px; -} - -#app-navigation .active.with-menu.with-counter > a { - padding-right: 90px; -} - -#app-navigation .with-icon a, -#app-navigation .app-navigation-entry-loading a { - padding-left: 44px; - background-size: 16px 16px; - background-position: 14px center; - background-repeat: no-repeat; -} - -#app-navigation li > a { - display: block; - width: 100%; - line-height: 44px; - min-height: 44px; - padding: 0 12px; - overflow: hidden; - box-sizing: border-box; - white-space: nowrap; - text-overflow: ellipsis; - color: #000; - opacity: .57; -} -#app-navigation .active, -#app-navigation .active a, -#app-navigation li:hover > a, -#app-navigation li:focus > a, -#app-navigation a:focus, -#app-navigation .selected, -#app-navigation .selected a { - opacity: 1; -} - -#app-navigation .collapse { - display: none; /* hide collapse button initially */ -} -#app-navigation .collapsible > .collapse { - position: absolute; - height: 44px; - width: 44px; - margin: 0; - padding: 0; - background: none; background-image: url('../img/actions/triangle-s.svg?v=1'); - background-size: 16px; background-repeat: no-repeat; background-position: center; - border: none; - border-radius: 0; - outline: none !important; - box-shadow: none; -} -#app-navigation .collapsible:hover > a, -#app-navigation .collapsible:focus > a { - background-image: none; -} -#app-navigation .collapsible:hover > .collapse, -#app-navigation .collapsible:focus > .collapse { - display: block; -} - -#app-navigation .collapsible .collapse { - -webkit-transform: rotate(-90deg); - -ms-transform:rotate(-90deg); - transform: rotate(-90deg); -} -#app-navigation .collapsible.open .collapse { - -webkit-transform: rotate(0); - -ms-transform:rotate(0); - transform: rotate(0); -} - -/* Second level nesting for lists */ -#app-navigation > ul ul { - display: none; -} -#app-navigation > ul ul li > a { - padding-left: 32px; -} -#app-navigation > .with-icon ul li > a, -#app-navigation > .with-icon ul li.app-navigation-entry-loading > a { - padding-left: 68px; - background-position: 44px center; -} - -#app-navigation .collapsible.open { - background-image: linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%); - background-image: -webkit-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%); - background-image: -ms-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%); -} - -#app-navigation > ul .collapsible.open:hover, -#app-navigation > ul .collapsible.open:focus { - box-shadow: inset 0 0 3px #ddd; -} - -#app-navigation > ul .collapsible.open ul { - display: block; -} - - -/* Deleted entries with undo button */ -#app-navigation .app-navigation-entry-deleted { - display: inline-block; - height: 44px; - width: 100%; -} - - #app-navigation .app-navigation-entry-deleted-description { - padding-left: 12px; - position: relative; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - display: inline-block; - width: calc(100% - 49px); - line-height: 44px; - float: left; - } - - #app-navigation .app-navigation-entry-deleted-button { - margin: 0; - height: 44px; - width: 44px; - line-height: 44px; - border: 0; - display: inline-block; - background-color: transparent; - opacity: .5; - } - - #app-navigation .app-navigation-entry-deleted-button:hover, - #app-navigation .app-navigation-entry-deleted-button:focus { - opacity: 1; - } - -/* counter and actions, legacy code */ -#app-navigation .utils { - position: absolute; - padding: 7px 7px 0 0; - right: 0; - top: 0; - bottom: 0; - font-size: 12px; -} - #app-navigation .utils button, - #app-navigation .utils .counter { - width: 44px; - height: 44px; - padding-top: 12px; - } - - -/* drag and drop */ -#app-navigation .drag-and-drop { - -webkit-transition: padding-bottom 500ms ease 0s; - transition: padding-bottom 500ms ease 0s; - padding-bottom: 40px; -} -#app-navigation .error { - color: #dd1144; -} - -#app-navigation .app-navigation-separator { - border-bottom: 1px solid #ddd; -} - -/** - * App navigation utils, buttons and counters for drop down menu - */ -#app-navigation .app-navigation-entry-utils { - position: absolute; - top: 0; - right: 0; - z-index: 105; -} - - #app-navigation .app-navigation-entry-utils ul { - display: block !important; - } - - - #app-navigation .app-navigation-entry-utils li { - float: left; - width: 44px !important; - height: 44px; - line-height: 44px; - } - - #app-navigation .active > .app-navigation-entry-utils li { - display: inline-block; - } - - #app-navigation .app-navigation-entry-utils button { - height: 38px; - width: 38px; - line-height: 38px; - float: left; - } - - #app-navigation .app-navigation-entry-utils-menu-button { - display: none; - } - #app-navigation .app-navigation-entry-utils-menu-button button { - border: 0; - opacity: .5; - background-color: transparent; - background-repeat: no-repeat; - background-position: center; - background-image: url('../img/actions/more.svg?v=1'); - } - - #app-navigation .app-navigation-entry-utils-menu-button:hover button, - #app-navigation .app-navigation-entry-utils-menu-button:focus button { - background-color: transparent; - opacity: 1; - } - - #app-navigation .app-navigation-entry-utils-counter { - overflow: hidden; - text-overflow: hidden; - text-align: right; - font-size: 9pt; - width: 38px; - line-height: 44px; - padding: 0 10px; - } - - #app-navigation .app-navigation-entry-utils ul, - #app-navigation .app-navigation-entry-menu ul { - list-style-type: none; - } - -/* menu bubble / popover */ -.bubble, -#app-navigation .app-navigation-entry-menu { - position: absolute; - background-color: #fff; - color: #333; - border-radius: 3px; - border-top-right-radius: 0; - z-index: 110; - margin: 5px; - margin-top: -5px; - right: 0; - -webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); - -moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); - -ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); - -o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); - filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); -} - -.ie .bubble, -.ie #app-navigation .app-navigation-entry-menu, -.ie .bubble:after, -.ie #app-navigation .app-navigation-entry-menu:after, -.edge .bubble, -.edge #app-navigation .app-navigation-entry-menu, -.edge .bubble:after, -.edge #app-navigation .app-navigation-entry-menu:after { - border: 1px solid #eee; -} -/* miraculous border arrow stuff */ -.bubble:after, -#app-navigation .app-navigation-entry-menu:after { - bottom: 100%; - right: 6px; /* change this to adjust the arrow position */ - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; -} -.bubble:after, -#app-navigation .app-navigation-entry-menu:after { - border-color: rgba(238, 238, 238, 0); - border-bottom-color: #fff; - border-width: 10px; -} -.bubble .action { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; - filter: alpha(opacity=50) !important; - opacity: .5 !important; -} -.bubble .action:hover, -.bubble .action:focus, -.bubble .action.active { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; - filter: alpha(opacity=100) !important; - opacity: 1 !important; -} - -#app-navigation .app-navigation-entry-menu { - display: none; -} - -#app-navigation .app-navigation-entry-menu.open { - display: block; -} - - /* list of options for an entry */ - #app-navigation .app-navigation-entry-menu ul { - display: block !important; - } - - #app-navigation .app-navigation-entry-menu li { - float: left; - width: 38px !important; - } - - #app-navigation .app-navigation-entry-menu li button { - float: right; - width: 36px !important; - height: 36px; - line-height: 36px; - border: 0; - opacity: .5; - background-color: transparent; - } - - #app-navigation .app-navigation-entry-menu li button:hover, - #app-navigation .app-navigation-entry-menu li button:focus { - opacity: 1; - background-color: transparent; - } - -/* editing an entry */ -#app-navigation .app-navigation-entry-edit { - padding-left: 5px; - padding-right: 5px; - display: inline-block; - height: 39px; - width: 100%; -} - - #app-navigation .app-navigation-entry-edit input { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - width: calc(100% - 36px); - padding: 5px; - margin-right: 0; - height: 38px; - float: left; - border: 1px solid rgba(190,190,190,.9); - } - - #app-navigation .app-navigation-entry-edit button, - #app-navigation .app-navigation-entry-edit input[type="submit"] { - width: 36px; - height: 38px; - float: left; - } - - #app-navigation .app-navigation-entry-edit .icon-checkmark { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - border-left: 0; - margin-right: 0; - } - - -/* APP-CONTENT ---------------------------------------------------------------*/ - - -/* Part where the content will be loaded into */ -#app-content { - position: relative; - height: 100%; - overflow-y: auto; -} - -#app-content-wrapper { - min-width: 100%; - min-height: 100%; -} - -/* APP-SIDEBAR ----------------------------------------------------------------*/ - -/* - Sidebar: a sidebar to be used within #app-content - have it as first element within app-content in order to shrink other - sibling containers properly. Compare Files app for example. -*/ -#app-sidebar { - position: fixed; - top: 45px; - right: 0; - left: auto; - bottom: 0; - width: 27%; - min-width: 300px; - display: block; - background: #fff; - border-left: 1px solid #eee; - -webkit-transition: margin-right 300ms; - transition: margin-right 300ms; - overflow-x: hidden; - overflow-y: auto; - visibility: visible; - z-index: 500; -} - -#app-content.with-app-sidebar { - margin-right: 27%; -} - -#app-sidebar.disappear { - visibility: hidden; -} - -/* APP-SETTINGS ---------------------------------------------------------------*/ - -/* settings area */ -#app-settings { - position: fixed; - width: 250px; /* change to 100% when layout positions are absolute */ - bottom: 0; - z-index: 140; -} -#app-settings.open #app-settings-content, -#app-settings.opened #app-settings-content { - display: block; -} -#app-settings-content { - display: none; - padding: 10px; - background-color: #fff; - /* restrict height of settings and make scrollable */ - max-height: 300px; - overflow-y: auto; -} -#app-settings-content, -#app-settings-header { - border-right: 1px solid #eee; - width: 250px; - box-sizing: border-box; -} - -/* display input fields at full width */ -#app-settings-content input[type='text'] { - width: 93%; -} - -.settings-button { - display: block; - height: 44px; - width: 100%; - padding: 0; - margin: 0; - background-color: #fff; - background-image: url('../img/actions/settings.svg?v=1'); - background-position: 14px center; - background-repeat: no-repeat; - box-shadow: none; - border: 0; - border-radius: 0; - text-align: left; - padding-left: 42px; - font-weight: normal; -} -.settings-button:hover, -.settings-button:focus { - background-color: #fff; -} -.settings-button.opened:hover, -.settings-button.opened:focus { - background-color: #fff; -} - -/* buttons */ -button.loading { - background-image: url('../img/loading.gif'); - background-position: right 10px center; background-repeat: no-repeat; - background-size: 16px; - padding-right: 30px; -} - -/* general styles for the content area */ -.section { - display: block; - padding: 30px; - color: #555; - margin-bottom: 24px; -} -.section.hidden { - display: none !important; -} -.sub-section { - position: relative; - margin-top: 10px; - margin-left: 27px; - margin-bottom: 10px; -} -/* no top border for first settings item */ -#app-content > .section:first-child { - border-top: none; -} - -/* heading styles */ -h2 { - font-size: 20px; - font-weight: 300; - margin-bottom: 12px; - line-height: 140%; -} -h3 { - font-size: 15px; - font-weight: 300; - margin: 12px 0; -} - -/* slight position correction of checkboxes and radio buttons */ -.section input[type="checkbox"], -.section input[type="radio"] { - vertical-align: -2px; - margin-right: 4px; -} -.appear { - opacity: 1; - -webkit-transition: opacity 500ms ease 0s; - -moz-transition: opacity 500ms ease 0s; - -ms-transition: opacity 500ms ease 0s; - -o-transition: opacity 500ms ease 0s; - transition: opacity 500ms ease 0s; -} -.appear.transparent { - opacity: 0; -} - - -/* do not use italic typeface style, instead lighter color */ -em { - font-style: normal; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - opacity: .5; -} - -/* generic dropdown style */ -.dropdown { - background:#eee; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - box-shadow:0 1px 1px #777; - display:block; - margin-right: 0; - position:absolute; - right:0; - width:420px; - z-index:500; - padding:16px; -} - -/* generic tab styles */ -.tabHeaders { - display: inline-block; - margin: 15px; -} -.tabHeaders .tabHeader { - float: left; - padding: 5px; - cursor: pointer; -} -.tabHeaders .tabHeader, .tabHeaders .tabHeader a { - color: #888; - margin-bottom: 1px; -} -.tabHeaders .tabHeader.selected { - font-weight: 600; -} -.tabHeaders .tabHeader.selected, -.tabHeaders .tabHeader:hover { - border-bottom: 1px solid #333; -} -.tabHeaders .tabHeader.selected, -.tabHeaders .tabHeader.selected a, -.tabHeaders .tabHeader:hover, -.tabHeaders .tabHeader:hover a { - margin-bottom: 0px; - color: #000; -} -.tabsContainer { - clear: left; -} -.tabsContainer .tab { - padding: 0 15px 15px; -} - -/* popover menu styles (use together with "bubble" class) */ -.popovermenu .menuitem, -.popovermenu .menuitem>span { - cursor: pointer; - vertical-align: middle; -} - -.popovermenu .menuitem { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - filter: alpha(opacity=50); - opacity: .5; -} - -.popovermenu .menuitem:hover, -.popovermenu .menuitem:focus, -.popovermenu .menuitem.active { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - opacity: 1; -} - -.popovermenu .menuitem img { - padding: initial; -} - -.popovermenu a.menuitem, -.popovermenu label.menuitem, -.popovermenu .menuitem { - padding: 10px !important; - width: auto; -} - -.popovermenu.hidden { - display: none; -} - -.popovermenu .menuitem { - display: flex !important; - line-height: 30px; - color: #000; - align-items: center; -} - -.popovermenu .menuitem .icon, -.popovermenu .menuitem .no-icon { - display: inline-block; - width: 16px; - height: 16px; - margin-right: 10px; - vertical-align: middle; -} - -.popovermenu .menuitem { - opacity: 0.5; -} - -.popovermenu li:hover .menuitem { - opacity: 1; -} diff --git a/core/css/header.css b/core/css/header.css deleted file mode 100644 index d18181d13a0..00000000000 --- a/core/css/header.css +++ /dev/null @@ -1,384 +0,0 @@ -/* prevent ugly selection effect on accidental selection */ -#header, -#navigation, -#expanddiv { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; -} - -/* removed until content-focusing issue is fixed */ -#skip-to-content a { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; -} -#skip-to-content a:focus { - left: 76px; - top: -9px; - color: #fff; - width: auto; - height: auto; -} - - - -/* HEADERS ------------------------------------------------------------------ */ - -#body-user #header, -#body-settings #header, -#body-public #header { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 2000; - height: 45px; - line-height: 2.5em; - background-color: #0082c9; - box-sizing: border-box; -} - - - -/* LOGO and APP NAME -------------------------------------------------------- */ - -#nextcloud { - position: absolute; - top: 0; - left: 0; - padding: 5px; - padding-bottom: 0; - height: 45px; /* header height */ - box-sizing: border-box; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; -} -#nextcloud:focus { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; - opacity: .75; -} -#nextcloud:hover, -#nextcloud:active { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; -} - -#header .logo { - background-image: url('../img/logo-icon.svg?v=1'); - background-repeat: no-repeat; - background-size: 175px; - background-position: center; - width: 252px; - height: 120px; - margin: 0 auto; -} - -#header .logo-icon { - /* display logo so appname can be shown next to it */ - display: inline-block; - background-image: url('../img/logo-icon.svg?v=1'); - background-repeat: no-repeat; - background-position: center center; - width: 62px; - height: 34px; -} - -#header .header-appname-container { - display: inline-block; - position: absolute; - left: 70px; - height: 27px; - padding-top: 18px; - padding-right: 10px; -} - -/* hover effect for app switcher label */ -.header-appname-container .header-appname, -.menutoggle .icon-caret { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; - opacity: .75; -} -.menutoggle:hover .header-appname, -.menutoggle:hover .icon-caret, -.menutoggle:focus .header-appname, -.menutoggle:focus .icon-caret, -.menutoggle.active .header-appname, -.menutoggle.active .icon-caret { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; -} - -/* show appname next to logo */ -.header-appname { - display: inline-block; - position: relative; - color: #fff; - font-size: 16px; - font-weight: 300; - margin: 0; - margin-top: -24px; - padding: 7px 0 7px 5px; - vertical-align: middle; -} -/* show caret indicator next to logo to make clear it is tappable */ -#header .icon-caret { - display: inline-block; - width: 12px; - height: 12px; - margin: 0; - margin-top: -21px; - padding: 0; - vertical-align: middle; -} -/* do not show menu toggle on public share links as there is no menu */ -#body-public #header .icon-caret { - display: none; -} - - - -/* NAVIGATION --------------------------------------------------------------- */ - -#navigation { - position: fixed; - top: 45px; - left: 10px; - width: 265px; - max-height: 85%; - margin-top: 0; - padding-bottom: 10px; - background-color: rgba(255, 255, 255, .97); - box-shadow: 0 1px 10px rgba(150, 150, 150, .75); - border-radius: 3px; - border-top-left-radius: 0; - border-top-right-radius: 0; - display: none; - /*overflow-y: auto; - overflow-x: hidden;*/ - z-index: 2000; -} -/* arrow look */ -#navigation:after, #expanddiv:after { - bottom: 100%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-color: rgba(0, 0, 0, 0); - border-bottom-color: rgba(255, 255, 255, .97); - border-width: 10px; - margin-left: -10px; -} -/* position of dropdown arrow */ -#navigation:after { - left: 47%; -} -#expanddiv:after { - right: 15px; -} - -#navigation, #navigation * { - box-sizing:border-box; -} -#navigation li { - display: inline-block; -} -#navigation a { - position: relative; - width: 80px; - height: 80px; - display: inline-block; - text-align: center; - padding: 20px 0; -} -#navigation a span { - display: inline-block; - font-size: 13px; - padding-bottom: 0; - padding-left: 0; - width: 80px; - text-align: center; - color: #000; - white-space:nowrap; - overflow:hidden; - text-overflow:ellipsis; -} - /* icon opacity and hover effect */ - #navigation a svg, - #navigation a span { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - opacity: .5; - } - #navigation a:hover svg, - #navigation a:focus svg, - #navigation a:hover span, - #navigation a:focus span, - #navigation a.active svg, - #navigation a.active span, - #apps-management a:hover svg, - #apps-management a:focus svg, - #apps-management a.active svg, - #apps-management a:hover span, - #apps-management a:focus span, - #apps-management a.active span { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; - } - -#navigation .app-icon { - margin: 0 auto; - padding: 0; - max-height: 32px; - max-width: 32px; -} - -/* Apps management */ -#apps-management { - min-height: initial; - height: initial; - margin: 0; -} -#apps-management a svg, -#apps-management a span { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; - opacity: .3; -} - - -/* loading feedback for apps */ -#navigation .app-loading .icon-loading-dark { - display: inline !important; - position: absolute; - top: 20px; - left: 24px; - width: 32px; - height: 32px; -} -#navigation .app-loading .app-icon { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - opacity: 0; -} - -#apps { - max-height: calc(100vh - 100px); - overflow:auto; -} - - -/* USER MENU -----------------------------------------------------------------*/ - -/* info part on the right, used e.g. for info on who shared something */ -.header-right { - position: absolute; - right: 0; - padding: 7px 5px; - color: #fff; - height: 100%; - max-width: 80%; - white-space: nowrap; - box-sizing: border-box; -} - -/* Profile picture in header */ -#header .avatardiv { - float: left; - display: inline-block; - margin-right: 8px; - cursor: pointer; - height: 32px; - width: 32px; -} -#header .avatardiv img { - opacity: 1; - cursor: pointer; -} - -#settings { - float: right; - color: #ddd; - cursor: pointer; -} -#settings .icon-loading-small-dark { - display: inline-block; - margin-bottom: -3px; - margin-right: 6px; - background-size: 16px 16px; -} -#expand { - display: block; - padding: 7px 30px 6px 10px; - cursor: pointer; -} -#expand * { - cursor: pointer; -} -#expand:hover, -#expand:focus, -#expand:active { - color: #fff; -} -#expand img { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; - opacity: .7; - margin-bottom: -2px; -} -#expand:hover img, -#expand:focus img, -#expand:active img { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; -} -#expand .icon-caret { - margin-top: 0; -} -#expanddiv { - position: absolute; - right: 13px; - top: 45px; - z-index: 2000; - display: none; - background: rgb(255, 255, 255); - box-shadow: 0 1px 10px rgba(150, 150, 150, .75); - border-radius: 3px; - border-top-left-radius: 0; - border-top-right-radius: 0; - box-sizing: border-box; -} -#expanddiv:after { - border-color: rgba(0, 0, 0, 0); - border-bottom-color: rgba(255, 255, 255, 1); -} - #expanddiv a { - display: block; - height: 40px; - color: #000; - padding: 4px 12px 0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - opacity: .5; - box-sizing: border-box; - } - #expanddiv a img { - margin-bottom: -3px; - margin-right: 6px; - } - #expanddiv a:hover, - #expanddiv a:focus, - #expanddiv a:active, - #expanddiv a.active { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; - } - -/* do not show display name when profile picture is present */ -#header .avatardiv.avatardiv-shown + #expandDisplayName { - display: none; -} -#header #expand { - display: block; -} diff --git a/core/css/icons.css b/core/css/icons.css deleted file mode 100644 index a2869dfac1c..00000000000 --- a/core/css/icons.css +++ /dev/null @@ -1,428 +0,0 @@ -[class^="icon-"], [class*=" icon-"] { - background-repeat: no-repeat; - background-position: center; - min-width: 16px; - min-height: 16px; -} - - - - -/* general assets */ - -.icon-breadcrumb { - background-image: url('../img/breadcrumb.svg?v=1'); -} - -.loading, -.loading-small, -.icon-loading, -.icon-loading-dark, -.icon-loading-small, -.icon-loading-small-dark { - position: relative; -} -.loading:after, -.loading-small:after, -.icon-loading:after, -.icon-loading-dark:after, -.icon-loading-small:after, -.icon-loading-small-dark:after { - z-index: 2; - content: ""; - height: 30px; - width: 30px; - margin: -16px 0 0 -16px; - position: absolute; - top: 50%; - left: 50%; - border-radius: 100%; - -webkit-animation: rotate .8s infinite linear; - animation: rotate .8s infinite linear; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} -.loading:after, -.loading-small:after, -.icon-loading:after, -.icon-loading-dark:after, -.icon-loading-small:after, -.icon-loading-small-dark:after { - border: 2px solid rgba(150, 150, 150, .5); - border-top-color: rgb(100, 100, 100); -} - -.icon-loading-dark:after, -.icon-loading-small-dark:after { - border: 2px solid rgba(187, 187, 187, .5); - border-top-color: #bbb; -} - -.icon-loading-small:after, -.icon-loading-small-dark:after { - height: 14px; - width: 14px; - margin: -8px 0 0 -8px; -} - -/* Css replaced elements don't have ::after nor ::before */ -img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading { - background-image: url("../img/loading.gif"); -} -img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark { - background-image: url("../img/loading-dark.gif"); -} -img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small { - background-image: url("../img/loading-small.gif"); -} -img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark { - background-image: url("../img/loading-small-dark.gif"); -} - -@-webkit-keyframes rotate { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes rotate { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -.icon-32 { - background-size: 32px !important; -} - - - - -/* action icons */ - -.icon-add { - background-image: url('../img/actions/add.svg?v=1'); -} - -.icon-audio { - background-image: url('../img/actions/audio.svg?v=1'); -} -.icon-audio-white { - background-image: url('../img/actions/audio-white.svg?v=2'); -} -.icon-audio-off { - background-image: url('../img/actions/audio-off.svg?v=1'); -} -.icon-audio-off-white { - background-image: url('../img/actions/audio-off-white.svg?v=1'); -} - -.icon-caret { - background-image: url('../img/actions/caret.svg?v=1'); -} -.icon-caret-dark { - background-image: url('../img/actions/caret-dark.svg?v=1'); -} - -.icon-checkmark { - background-image: url('../img/actions/checkmark.svg?v=1'); -} -.icon-checkmark-white { - background-image: url('../img/actions/checkmark-white.svg?v=1'); -} -.icon-checkmark-color { - background-image: url('../img/actions/checkmark-color.svg?v=1'); -} - -.icon-clippy { - background-image: url('../img/actions/clippy.svg?v=2'); -} - -.icon-close { - background-image: url('../img/actions/close.svg?v=1'); -} - -.icon-comment { - background-image: url('../img/actions/comment.svg?v=1'); -} - -.icon-confirm { - background-image: url('../img/actions/confirm.svg?v=2'); -} -.icon-confirm-white { - background-image: url('../img/actions/confirm-white.svg?v=2'); -} - -.icon-delete, -.icon-delete.no-permission:hover, -.icon-delete.no-permission:focus { - background-image: url('../img/actions/delete.svg?v=1'); -} -.icon-delete:hover, -.icon-delete:focus { - background-image: url('../img/actions/delete-hover.svg?v=1'); -} -.icon-delete-white { - background-image: url('../img/actions/delete-white.svg?v=1'); -} - -.icon-details { - background-image: url('../img/actions/details.svg?v=1'); -} - -.icon-download { - background-image: url('../img/actions/download.svg?v=1'); -} -.icon-download-white { - background-image: url('../img/actions/download-white.svg?v=1'); -} - -.icon-edit { - background-image: url('../img/actions/edit.svg?v=1'); -} - -.icon-error { - background-image: url('../img/actions/error.svg?v=1'); -} -.icon-error-white { - background-image: url('../img/actions/error-white.svg?v=1'); -} -.icon-error-color { - background-image: url('../img/actions/error-color.svg?v=1'); -} - -.icon-external { - background-image: url('../img/actions/external.svg?v=1'); -} - -.icon-fullscreen { - background-image: url('../img/actions/fullscreen.svg?v=1'); -} -.icon-fullscreen-white { - background-image: url('../img/actions/fullscreen-white.svg?v=2'); -} - -.icon-history { - background-image: url('../img/actions/history.svg?v=1'); -} - -.icon-info { - background-image: url('../img/actions/info.svg?v=1'); -} -.icon-info-white { - background-image: url('../img/actions/info-white.svg?v=1'); -} - -.icon-logout { - background-image: url('../img/actions/logout.svg?v=1'); -} - -.icon-mail { - background-image: url('../img/actions/mail.svg?v=1'); -} - -.icon-menu { - background-image: url('../img/actions/menu.svg?v=1'); -} - -.icon-more { - background-image: url('../img/actions/more.svg?v=1'); -} -.icon-more-white { - background-image: url('../img/actions/more-white.svg?v=1'); -} - -.icon-password { - background-image: url('../img/actions/password.svg?v=1'); -} - -.icon-pause { - background-image: url('../img/actions/pause.svg?v=1'); -} -.icon-pause-big { - background-image: url('../img/actions/pause-big.svg?v=1'); -} - -.icon-play { - background-image: url('../img/actions/play.svg?v=1'); -} -.icon-play-add { - background-image: url('../img/actions/play-add.svg?v=1'); -} -.icon-play-big { - background-image: url('../img/actions/play-big.svg?v=1'); -} -.icon-play-next { - background-image: url('../img/actions/play-next.svg?v=1'); -} -.icon-play-previous { - background-image: url('../img/actions/play-previous.svg?v=1'); -} - -.icon-public { - background-image: url('../img/actions/public.svg?v=1'); -} - -.icon-rename { - background-image: url('../img/actions/rename.svg?v=1'); -} - -.icon-search { - background-image: url('../img/actions/search.svg?v=1'); -} -.icon-search-white { - background-image: url('../img/actions/search-white.svg?v=1'); -} - -.icon-settings { - background-image: url('../img/actions/settings.svg?v=1'); -} - -.icon-share { - background-image: url('../img/actions/share.svg?v=1'); -} -.icon-shared { - background-image: url('../img/actions/shared.svg?v=1'); -} - -.icon-sound { - background-image: url('../img/actions/sound.svg?v=1'); -} -.icon-sound-off { - background-image: url('../img/actions/sound-off.svg?v=1'); -} - -.icon-favorite { - background-image: url('../img/actions/star-dark.svg?v=1'); -} - -.icon-star, -.icon-starred:hover, -.icon-starred:focus { - background-image: url('../img/actions/star.svg?v=1'); -} - -.icon-starred, -.icon-star:hover, -.icon-star:focus { - background-image: url('../img/actions/starred.svg?v=1'); -} - -.icon-tag { - background-image: url('../img/actions/tag.svg?v=1'); -} - -.icon-toggle { - background-image: url('../img/actions/toggle.svg?v=1'); -} - -.icon-triangle-e { - background-image: url('../img/actions/triangle-e.svg?v=1'); -} -.icon-triangle-n { - background-image: url('../img/actions/triangle-n.svg?v=1'); -} -.icon-triangle-s { - background-image: url('../img/actions/triangle-s.svg?v=1'); -} - -.icon-upload { - background-image: url('../img/actions/upload.svg?v=1'); -} -.icon-upload-white { - background-image: url('../img/actions/upload-white.svg?v=1'); -} - -.icon-user { - background-image: url('../img/actions/user.svg?v=1'); -} - -.icon-video { - background-image: url('../img/actions/video.svg?v=1'); -} -.icon-video-white { - background-image: url('../img/actions/video-white.svg?v=2'); -} -.icon-video-off { - background-image: url('../img/actions/video-off.svg?v=1'); -} -.icon-video-off-white { - background-image: url('../img/actions/video-off-white.svg?v=1'); -} - -.icon-view-close { - background-image: url('../img/actions/view-close.svg?v=1'); -} -.icon-view-download { - background-image: url('../img/actions/view-download.svg?v=1'); -} -.icon-view-next { - background-image: url('../img/actions/view-next.svg?v=1'); -} -.icon-view-pause { - background-image: url('../img/actions/view-pause.svg?v=1'); -} -.icon-view-play { - background-image: url('../img/actions/view-play.svg?v=1'); -} -.icon-view-previous { - background-image: url('../img/actions/view-previous.svg?v=1'); -} - - - - -/* places icons */ - -.icon-calendar-dark { - background-image: url('../img/places/calendar-dark.svg?v=1'); -} - -.icon-contacts-dark { - background-image: url('../img/places/contacts-dark.svg?v=1'); -} - -.icon-files { - background-image: url('../img/places/files.svg?v=1'); -} -.icon-files-dark { - background-image: url('../img/places/files-dark.svg?v=1'); -} -.icon-file, -.icon-filetype-text { - background-image: url('../img/filetypes/text.svg?v=1'); -} -.icon-folder, -.icon-filetype-folder { - background-image: url('../img/filetypes/folder.svg?v=1'); -} - -.icon-filetype-folder-drag-accept { - background-image: url('../img/filetypes/folder-drag-accept.svg?v=1')!important; -} - -.icon-home { - background-image: url('../img/places/home.svg?v=1'); -} - -.icon-link { - background-image: url('../img/places/link.svg?v=1'); -} - -.icon-music { - background-image: url('../img/places/music.svg?v=1'); -} - -.icon-picture { - background-image: url('../img/places/picture.svg?v=1'); -} diff --git a/core/css/inputs.css b/core/css/inputs.css deleted file mode 100644 index 4ca6c823cc9..00000000000 --- a/core/css/inputs.css +++ /dev/null @@ -1,472 +0,0 @@ -/* INPUTS */ - -/* specifically override browser styles */ -input, textarea, select, button { - font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; -} - -.select2-container-multi .select2-choices .select2-search-field input, -.select2-search input, -.ui-widget { - font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !important; -} - -input[type="text"], -input[type="password"], -input[type="search"], -input[type="number"], -input[type="email"], -input[type="tel"], -input[type="url"], -input[type="time"], -input[type="date"], -textarea, -select, -button, .button, -input[type="submit"], -input[type="button"], -#quota, -.pager li a { - width: 130px; - margin: 3px 3px 3px 0; - padding: 7px 6px 5px; - font-size: 13px; - background-color: #fff; - color: #333; - border: 1px solid #ddd; - outline: none; - border-radius: 3px; -} -input[type="hidden"] { - height: 0; - width: 0; -} -input[type="text"], -input[type="password"], -input[type="search"], -input[type="number"], -input[type="email"], -input[type="tel"], -input[type="url"], -input[type="time"], -textarea { - background: #fff; - color: #555; - cursor: text; - font-family: inherit; /* use default ownCloud font instead of default textarea monospace */ -} -input[type="text"], -input[type="password"], -input[type="search"], -input[type="number"], -input[type="email"], -input[type="tel"], -input[type="url"], -input[type="time"] { - -webkit-appearance:textfield; - -moz-appearance:textfield; - box-sizing:content-box; -} -input[type="text"]:hover, input[type="text"]:focus, input[type="text"]:active, -input[type="password"]:hover, input[type="password"]:focus, input[type="password"]:active, -input[type="number"]:hover, input[type="number"]:focus, input[type="number"]:active, -input[type="search"]:hover, input[type="search"]:focus, input[type="search"]:active, -input[type="email"]:hover, input[type="email"]:focus, input[type="email"]:active, -input[type="tel"]:hover, input[type="tel"]:focus, input[type="tel"]:active, -input[type="url"]:hover, input[type="url"]:focus, input[type="url"]:active, -input[type="time"]:hover, input[type="time"]:focus, input[type="time"]:active, -textarea:hover, textarea:focus, textarea:active { - color: #333; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; -} - -input[type="checkbox"].checkbox { - position: absolute; - left:-10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; -} - -input[type="checkbox"].checkbox + label:before { - content: ""; - display: inline-block; - - height: 20px; - width: 20px; - vertical-align: middle; - - background: url('../img/actions/checkbox.svg') left top no-repeat; -} - -input[type="checkbox"].checkbox:disabled +label:before { opacity: .6; } - -input[type="checkbox"].checkbox.u-left +label:before { float: left; } -input[type="checkbox"].checkbox.u-hidden + label:before { display: none; } - -input[type="checkbox"].checkbox:checked + label:before { - background-image: url('../img/actions/checkbox-checked.svg'); -} - -input[type="checkbox"].checkbox:indeterminate + label:before { - background-image: url('../img/actions/checkbox-mixed.svg'); -} - -input[type="checkbox"].checkbox:disabled + label:before { - background-image: url('../img/actions/checkbox-disabled.svg'); -} - -input[type="checkbox"].checkbox:checked:disabled + label:before { - background-image: url('../img/actions/checkbox-checked-disabled.svg'); -} - -input[type="checkbox"].checkbox:indeterminate:disabled + label:before { - background-image: url('../img/actions/checkbox-mixed-disabled.svg'); -} - -input[type="checkbox"].checkbox--white + label:before { - background-image: url('../img/actions/checkbox-white.svg'); -} - -input[type="checkbox"].checkbox--white:checked + label:before { - background-image: url('../img/actions/checkbox-checked-white.svg'); -} - -input[type="checkbox"].checkbox--white:indeterminate + label:before { - background-image: url('../img/actions/checkbox-mixed-white.svg'); -} - -input[type="checkbox"].checkbox--white:disabled + label:before { - background-image: url('../img/actions/checkbox-disabled-white.svg'); -} - -input[type="checkbox"].checkbox--white:checked:disabled + label:before { - background-image: url('../img/actions/checkbox-checked-disabled.svg'); -} - -input[type="checkbox"].checkbox--white:indeterminate:disabled + label:before { - background-image: url('../img/actions/checkbox-mixed-disabled.svg'); -} - -input[type="checkbox"].checkbox:hover+label:before, input[type="checkbox"]:focus+label:before { - color:#111 !important; -} - -input[type="radio"].radio { - position: absolute; - left:-10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; -} - -input[type="radio"].radio + label:before { - content: ""; - display: inline-block; - - height: 20px; - width: 20px; - vertical-align: middle; - - background: url('../img/actions/radio.svg') left top no-repeat; -} - -input[type="radio"].radio:checked + label:before { - background-image: url('../img/actions/radio-checked.svg'); -} - -input[type="radio"].radio:disabled + label:before { - background-image: url('../img/actions/radio-disabled.svg'); -} - -input[type="radio"].radio:checked:disabled + label:before { - background-image: url('../img/actions/radio-checked-disabled.svg'); -} - -input[type="radio"].radio--white + label:before { - background-image: url('../img/actions/radio-white.svg'); -} - -input[type="radio"].radio--white:checked + label:before { - background-image: url('../img/actions/radio-checked-white.svg'); -} - -input[type="radio"].radio--white:disabled + label:before { - background-image: url('../img/actions/radio-disabled.svg'); -} - -input[type="radio"].radio--white:checked:disabled + label:before { - background-image: url('../img/actions/radio-checked-disabled.svg'); -} - -input[type="time"] { - width: initial; - height: 31px; - box-sizing: border-box; -} - -select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: url('../../core/img/actions/triangle-s.svg') no-repeat right 8px center rgba(240, 240, 240, 0.90); - outline: 0; - padding-right: 24px !important; -} - -select:hover { - background-color: #fefefe; -} - - -/* select2 adjustments */ -#select2-drop { - margin-top: -2px; -} -#select2-drop.select2-drop-active { - border-color: #ddd; -} -#select2-drop .avatar { - display: inline-block; - margin-right: 8px; - vertical-align: middle; -} -#select2-drop .avatar img, -.select2-chosen .avatar img, -#select2-drop .avatar, -.select2-chosen .avatar { - cursor: pointer; -} -#select2-drop .select2-search input { - width: calc(100% - 14px); - min-height: auto; - background: url('../img/actions/search.svg') no-repeat right center !important; - background-origin: content-box !important; -} -#select2-drop .select2-results { - max-height: 250px; - margin: 0; - padding: 0; -} -#select2-drop .select2-results .select2-result-label { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -#select2-drop .select2-results .select2-result-label span { - cursor: pointer; -} -#select2-drop .select2-results .select2-result, -#select2-drop .select2-results .select2-no-results, -#select2-drop .select2-results .select2-searching { - position: relative; - display: list-item; - padding: 12px; - background-color: #fff; - cursor: pointer; - color: #222; -} -#select2-drop .select2-results .select2-result.select2-selected { - background-color: #f8f8f8; -} -#select2-drop .select2-results .select2-result.select2-highlighted { - background-color: #f8f8f8; - color: #000; -} - -.select2-container-multi .select2-choices, -.select2-container-multi.select2-container-active .select2-choices, -.select2-container .select2-choice { - box-shadow: none; - white-space: nowrap; - text-overflow: ellipsis; - background: #fff; - color: #555; - box-sizing: content-box; - border-radius: 3px; - border: 1px solid #ddd; - margin: 0; - padding: 2px 0; - min-height: auto; -} -.select2-container-multi .select2-choices .select2-search-choice, -.select2-container-multi.select2-container-active .select2-choices .select2-search-choice, -.select2-container .select2-choice .select2-search-choice { - line-height: 20px; - padding-left: 5px; - background-image: none; - background-color: #f8f8f8; - border-color: #f8f8f8; -} -.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-focus, .select2-container-multi .select2-choices .select2-search-choice:hover, -.select2-container-multi.select2-container-active .select2-choices .select2-search-choice.select2-search-choice-focus, -.select2-container-multi.select2-container-active .select2-choices .select2-search-choice:hover, -.select2-container .select2-choice .select2-search-choice.select2-search-choice-focus, -.select2-container .select2-choice .select2-search-choice:hover { - background-color: #f0f0f0; - border-color: #f0f0f0; -} -.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close, -.select2-container-multi.select2-container-active .select2-choices .select2-search-choice .select2-search-choice-close, -.select2-container .select2-choice .select2-search-choice .select2-search-choice-close { - display: none; -} -.select2-container-multi .select2-choices .select2-search-field input, -.select2-container-multi.select2-container-active .select2-choices .select2-search-field input, -.select2-container .select2-choice .select2-search-field input { - line-height: 20px; -} - -.select2-container { - margin: 3px 3px 3px 0; -} -.select2-container.select2-container-multi .select2-choices { - display: flex; - flex-wrap: wrap; -} -.select2-container.select2-container-multi .select2-choices li { - float: none; -} -.select2-container .select2-choice { - padding-left: 38px; -} -.select2-container .select2-choice .select2-arrow { - background: none; - border-radius: 0; - border: none; -} -.select2-container .select2-choice .select2-arrow b { - background: url('../img/actions/triangle-s.svg') no-repeat center !important; - opacity: .5; -} -.select2-container .select2-choice:hover .select2-arrow b, -.select2-container .select2-choice:focus .select2-arrow b, -.select2-container .select2-choice:active .select2-arrow b { - opacity: .7; -} - - -/* jQuery UI fixes */ -.ui-menu { - padding: 0; -} -.ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { - font-weight: inherit; - margin: 0; -} -.ui-widget-content { - background: #fff; - border-top: none; -} -.ui-corner-all { - border-radius: 0; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; -} -.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { - border: none; - background: #f8f8f8; -} - - - -/* correctly align images inside of buttons */ -input img, button img, .button img { - vertical-align: text-bottom; -} - -input[type="submit"].enabled { - background-color: #66f866; - border: 1px solid #5e5; -} - -.input-button-inline { - position: absolute !important; - right: 0; - background-color: transparent !important; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; - opacity: .3; -} - - -/* BUTTONS */ -input[type="submit"], input[type="button"], -button, .button, -#quota, select, .pager li a { - width: auto; - min-width: 25px; - padding: 5px; - background-color: rgba(240,240,240,.9); - font-weight: 600; - color: #555; - border: 1px solid rgba(240,240,240,.9); - cursor: pointer; -} -select, .button.multiselect { - font-weight: 400; -} -input[type="submit"]:hover, input[type="submit"]:focus, -input[type="button"]:hover, input[type="button"]:focus, -button:hover, button:focus, -.button:hover, .button:focus, -.button a:focus, -select:hover, select:focus, select:active { - background-color: rgba(255, 255, 255, .95); - color: #111; -} -input[type="submit"] img, input[type="button"] img, button img, .button img { cursor:pointer; } -#header .button { - border: none; - box-shadow: none; -} - -/* disabled input fields and buttons */ -input:disabled, input:disabled:hover, input:disabled:focus, -button:disabled, button:disabled:hover, button:disabled:focus, -.button:disabled, .button:disabled:hover, .button:disabled:focus, -a.disabled, a.disabled:hover, a.disabled:focus, -textarea:disabled { - background-color: rgba(230,230,230,.9); - color: #999; - cursor: default; -} -input:disabled+label, input:disabled:hover+label, input:disabled:focus+label { - color: #999 !important; - cursor: default; -} - -/* Primary action button, use sparingly */ -.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary { - border: 1px solid #0082c9; - background-color: #00a2e9; - color: #fff; -} -.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover, -.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus { - background-color: #0092d9; - color: #fff; -} -.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active, -.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled, -.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover, -.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus { - background-color: #00a2e9; - color: #bbb; -} - -@keyframes shake { - 0% { transform: translate(-5px, 0); } - 20% { transform: translate(5px, 0); } - 40% { transform: translate(-5px, 0); } - 60% { transform: translate(5px, 0); } - 80% { transform: translate(-5px, 0); } - 100% { transform: translate(5px, 0); } -} -.shake { - animation-name: shake; - animation-duration: .3s; - animation-timing-function: ease-out; -} diff --git a/core/css/jquery-ui-fixes.css b/core/css/jquery-ui-fixes.css deleted file mode 100644 index e8cf2b769b8..00000000000 --- a/core/css/jquery-ui-fixes.css +++ /dev/null @@ -1,142 +0,0 @@ -/* Component containers -----------------------------------*/ -.ui-widget { - font-family: "Lucida Grande", Arial, Verdana, sans-serif; - font-size: 1em; -} -.ui-widget button { - font-family: "Lucida Grande", Arial, Verdana, sans-serif; -} -.ui-widget-content { - border: 1px solid #dddddd; - background: #eeeeee url('images/ui-bg_highlight-soft_100_eeeeee_1x100.png') 50% top repeat-x; - color: #333333; -} -.ui-widget-content a { - color: #333333; -} -.ui-widget-header { - border: 1px solid #0082c9; - background: #0082c9; - color: #ffffff; -} -.ui-widget-header a { - color: #ffffff; -} - -/* Interaction states -----------------------------------*/ -.ui-state-default, -.ui-widget-content .ui-state-default, -.ui-widget-header .ui-state-default { - border: 1px solid #ddd; - background: #f8f8f8 url('images/ui-bg_glass_100_f8f8f8_1x400.png') 50% 50% repeat-x; - font-weight: bold; - color: #555; -} -.ui-state-default a, -.ui-state-default a:link, -.ui-state-default a:visited { - color: #555; -} -.ui-state-hover, -.ui-widget-content .ui-state-hover, -.ui-widget-header .ui-state-hover, -.ui-state-focus, -.ui-widget-content .ui-state-focus, -.ui-widget-header .ui-state-focus { - border: 1px solid #ddd; - background: #ffffff url('images/ui-bg_flat_100_ffffff_40x100.png') 50% 50% repeat-x; - font-weight: bold; - color: #333; -} -.ui-state-hover a, -.ui-state-hover a:hover, -.ui-state-hover a:link, -.ui-state-hover a:visited { - color: #333; -} -.ui-state-active, -.ui-widget-content .ui-state-active, -.ui-widget-header .ui-state-active { - border: 1px solid #0082c9; - background: #f8f8f8 url('images/ui-bg_glass_100_f8f8f8_1x400.png') 50% 50% repeat-x; - font-weight: bold; - color: #0082c9; -} -.ui-state-active a, -.ui-state-active a:link, -.ui-state-active a:visited { - color: #0082c9; -} - -/* Interaction Cues -----------------------------------*/ -.ui-state-highlight, -.ui-widget-content .ui-state-highlight, -.ui-widget-header .ui-state-highlight { - border: 1px solid #ddd; - background: #f8f8f8 url('images/ui-bg_highlight-hard_100_f8f8f8_1x100.png') 50% top repeat-x; - color: #555; -} -.ui-state-highlight a, -.ui-widget-content .ui-state-highlight a, -.ui-widget-header .ui-state-highlight a { - color: #555; -} -.ui-state-error, -.ui-widget-content .ui-state-error, -.ui-widget-header .ui-state-error { - border: 1px solid #cd0a0a; - background: #b81900 url('images/ui-bg_diagonals-thick_18_b81900_40x40.png') 50% 50% repeat; - color: #ffffff; -} -.ui-state-error a, -.ui-widget-content .ui-state-error a, -.ui-widget-header .ui-state-error a { - color: #ffffff; -} -.ui-state-error-text, -.ui-widget-content .ui-state-error-text, -.ui-widget-header .ui-state-error-text { - color: #ffffff; -} - -/* Icons -----------------------------------*/ -.ui-state-default .ui-icon { - background-image: url('images/ui-icons_1d2d44_256x240.png'); -} -.ui-state-hover .ui-icon, -.ui-state-focus .ui-icon { - background-image: url('images/ui-icons_1d2d44_256x240.png'); -} -.ui-state-active .ui-icon { - background-image: url('images/ui-icons_1d2d44_256x240.png'); -} -.ui-state-highlight .ui-icon { - background-image: url('images/ui-icons_ffffff_256x240.png'); -} -.ui-state-error .ui-icon, -.ui-state-error-text .ui-icon { - background-image: url('images/ui-icons_ffd27a_256x240.png'); -} - -/* Misc visuals -----------------------------------*/ -/* Overlays */ -.ui-widget-overlay { - background: #666666 url('images/ui-bg_diagonals-thick_20_666666_40x40.png') 50% 50% repeat; - opacity: .5; -} -.ui-widget-shadow { - margin: -5px 0 0 -5px; - padding: 5px; - background: #000000 url('images/ui-bg_flat_10_000000_40x100.png') 50% 50% repeat-x; - opacity: .2; - border-radius: 5px; -} - -.ui-menu .ui-menu-item a { - padding: 6px; -} diff --git a/core/css/multiselect.css b/core/css/multiselect.css deleted file mode 100644 index 8bcbd0e563d..00000000000 --- a/core/css/multiselect.css +++ /dev/null @@ -1,113 +0,0 @@ -/* Copyright (c) 2011, Jan-Christoph Borchardt, http: //jancborchardt.net -This file is licensed under the Affero General Public License version 3 or later. -See the COPYING-README file. */ - -ul.multiselectoptions { - background-color: #fff; - border: 1px solid #ddd; - border-top: none; - box-shadow: 0 1px 1px #ddd; - padding-top: 8px; - position: absolute; - max-height: 20em; - overflow-y: auto; - z-index: 49; -} - -ul.multiselectoptions.down { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - width: 100%; /* do not cut off group names */ - -webkit-box-shadow: 0px 0px 20px rgba(29,45,68,.4); - -moz-box-shadow: 0px 0px 20px rgba(29,45,68,.4); - box-shadow: 0px 0px 20px rgba(29,45,68,.4); -} - -ul.multiselectoptions.up { - border-top-left-radius: 8px; - border-top-right-radius: 8px; -} - -ul.multiselectoptions>li { - overflow: hidden; - white-space: nowrap; - margin-left: 7px; -} -ul.multiselectoptions > li input[type='checkbox']+label { - font-weight: normal; - display: inline-block; - width: 100%; - padding: 5px 27px; - margin-left: -27px; /* to have area around checkbox clickable as well */ - text-overflow: ellipsis; - overflow: hidden; -} -ul.multiselectoptions > li input[type='checkbox']:checked+label { - font-weight: bold; -} - -div.multiselect, select.multiselect { - display: inline-block; - max-width: 200px; - min-width: 150px !important; - padding-right: 10px; - min-height: 20px; - position: relative; - vertical-align: bottom; -} - -/* To make a select look like a multiselect until it's initialized */ -select.multiselect { - height: 30px; - min-width: 113px; -} - -div.multiselect.active { - background-color: #fff; - position: relative; - z-index: 50; -} - -div.multiselect.up { - border-top: 0 none; - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -div.multiselect.down { - border-bottom: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -div.multiselect>span:first-child { - float: left; - margin-right: 32px; - overflow: hidden; - text-overflow: ellipsis; - width: 90%; - white-space: nowrap; -} - -div.multiselect>span:last-child { - position: absolute; - right: 8px; - top: 8px; -} - -ul.multiselectoptions input.new { - padding-bottom: 3px; - padding-top: 3px; - margin: 0; -} - -ul.multiselectoptions > li.creator { - padding: 10px; - margin: 0; - font-weight: bold; -} -ul.multiselectoptions > li.creator > input { - width: 95% !important; /* do not constrain size of text input */ - padding: 5px; - margin: -5px; -} diff --git a/core/css/share.css b/core/css/share.css deleted file mode 100644 index eba22cf743e..00000000000 --- a/core/css/share.css +++ /dev/null @@ -1,199 +0,0 @@ -/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net - This file is licensed under the Affero General Public License version 3 or later. - See the COPYING-README file. */ - -#dropdown { - background: #eee; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - box-shadow: 0 2px 3px rgba(50, 50, 50, .4); - display: block; - margin-right: 0; - position: absolute; - right: 0; - width: 420px; - z-index: 500; - padding: 16px; -} - -@media only screen and (min-width: 768px) and (max-width: 990px) { - #dropdown { - /* this limits the dropdown to float below the sidebar for mid narrow screens */ - left: 20px; - } -} - -.shareTabView .unshare.icon-loading-small { - margin-top: 1px; -} - -.shareTabView .shareWithLoading, -.shareTabView .linkShare .icon-loading-small { - display: inline-block !important; - padding-left: 10px; -} -.shareTabView .shareWithLoading { - position: relative; - right: 70px; - top: 2px; -} -.shareTabView .icon-loading-small.hidden { - display: none !important; -} - -.shareTabView .avatar { - margin-right: 8px; - display: inline-block; - overflow: hidden; - vertical-align: middle; - width: 32px; - height: 32px; -} - -.share-autocomplete-item { - display: flex; -} -.share-autocomplete-item .autocomplete-item-text { - margin-left: 10px; - margin-right: 10px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - line-height: 32px; - vertical-align: middle; -} - -#shareWithList { - list-style-type:none; - padding:8px; -} - -#shareWithList li { - padding-top: 10px; - padding-bottom: 10px; - font-weight: bold; - line-height: 21px; - white-space: normal; - width: 100%; -} - -#shareWithList .sharingOptionsGroup { - flex-shrink: 0; - position: relative; -} - -#shareWithList .sharingOptionsGroup .popovermenu { - right: -6px; - top: 40px; - padding: 3px 6px; -} - -#shareWithList .shareOption { - white-space: nowrap; - display: inline-block; -} - -#shareWithList .unshare img, #shareWithList .showCruds img { - vertical-align:text-bottom; /* properly align icons */ -} - -#shareWithList label input[type=checkbox]{ - margin-left: 0; - position: relative; -} -#shareWithList .username{ - padding-right: 8px; - white-space: nowrap; - text-overflow: ellipsis; - display: inline-block; - overflow: hidden; - vertical-align: middle; - flex-grow: 5; -} -#shareWithList li label{ - margin-right: 8px; -} -.shareTabView label { - font-weight:400; - white-space: nowrap; -} - -.shareTabView input[type="checkbox"] { - margin:0 3px 0 8px; - vertical-align: middle; -} - -a.showCruds { - display:inline; - opacity:.5; -} - -a.unshare { - display:inline-block; - opacity:.5; - padding: 10px; -} - -#link { - border-top:1px solid #ddd; - padding-top:8px; -} - -.shareTabView input[type="submit"] { - margin-left: 7px; -} - -.shareTabView form { - font-size: 100%; - margin-left: 0; - margin-right: 0; -} - -.shareTabView .error { - color: #e9322d; - border-color: #e9322d; - box-shadow: 0 0 6px #f8b9b7; -} - -#link #showPassword img { - padding-left:5px; - width:12px; -} - -.reshare,#link label, -#expiration label { - display: inline-block; - padding: 6px 4px; -} - -a.showCruds:hover,a.unshare:hover { - opacity:1; -} - -#defaultExpireMessage, /* fix expire message going out of box */ -.reshare { /* fix shared by text going out of box */ - white-space:normal; -} - -#defaultExpireMessage { /* show message on new line */ - display: block; - padding-left: 4px; - /* TODO: style the dropdown in a proper way - border-box, etc. */ - width: 90%; -} - -.ui-autocomplete { /* limit dropdown height to 4 1/2 entries */ - max-height: 200px; - overflow-y: auto; - overflow-x: hidden; -} - -.notCreatable { - padding-left: 12px; - padding-top: 12px; - color: #999; -} - -.shareTabView .mailView .icon-mail { - opacity: 0.5; -} diff --git a/core/css/styles.css b/core/css/styles.css deleted file mode 100644 index 5ea4ca53707..00000000000 --- a/core/css/styles.css +++ /dev/null @@ -1,999 +0,0 @@ -/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net - This file is licensed under the Affero General Public License version 3 or later. - See the COPYING-README file. */ - -html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; } -html, body { height:100%; } -article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; } -body { line-height:1.5; } -table { border-collapse:separate; border-spacing:0; white-space:nowrap; } -caption, th, td { text-align:left; font-weight:normal; } -table, td, th { vertical-align:middle; } -a { border:0; color:#000; text-decoration:none;} -a, a *, input, input *, select, .button span, label { cursor:pointer; } -ul { list-style:none; } - -body { - background-color: #ffffff; - font-weight: 400; - font-size: .8em; - line-height: 1.6em; - font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; - color: #000; - height: auto; -} - -#body-login { - text-align: center; - background-color: #0082c9; - background-image: url('../img/background.jpg?v=1'); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: cover; -} - -.two-factor-header { - text-align: center; -} - -.two-factor-provider { - text-align: center; - width: 258px !important; - display: inline-block; - margin-bottom: 0 !important; - background-color: rgba(0,0,0,0.3) !important; - border: none !important; -} - -.two-factor-link { - display: inline-block; - padding: 12px; - color: rgba(255, 255, 255, .75); -} - -.float-spinner { - height: 32px; - display: none; -} -#body-login .float-spinner { - margin-top: -32px; - padding-top: 32px; -} - -#nojavascript { - position: fixed; - top: 0; - bottom: 0; - height: 100%; - width: 100%; - z-index: 9000; - text-align: center; - background-color: rgba(0,0,0,0.5); - color: #fff; - line-height: 125%; - font-size: 24px; -} -#nojavascript div { - display: block; - position: relative; - width: 50%; - top: 35%; - margin: 0px auto; -} -#nojavascript a { - color: #fff; - border-bottom: 2px dotted #fff; -} -#nojavascript a:hover, -#nojavascript a:focus { - color: #ddd; -} - -/* SCROLLING */ -::-webkit-scrollbar { - width: 5px; -} -::-webkit-scrollbar-track-piece { - background-color: transparent; -} -::-webkit-scrollbar-thumb { - background: #ddd; - border-radius: 3px; -} - -/* Searchbox */ -.searchbox input[type="search"] { - position: relative; - font-size: 1.2em; - padding: 3px; - padding-left: 25px; - background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center; - color: #fff; - border: 0; - border-radius: 3px; - margin-top: 9px; - float: right; - width: 0; - cursor: pointer; - -webkit-transition: all 100ms; - transition: all 100ms; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; - opacity: .7; -} -.searchbox input[type="search"]:focus, -.searchbox input[type="search"]:active, -.searchbox input[type="search"]:valid { - color: #fff; - width: 155px; - max-width: 50%; - cursor: text; - background-color: #0082c9; - border: 1px solid rgba(255, 255, 255, .5); -} - -/* CONTENT ------------------------------------------------------------------ */ -#controls { - box-sizing: border-box; - position: fixed; - top: 45px; - right: 0; - left: 0; - height: 44px; - width: 100%; - padding: 0; - margin: 0; - background-color: rgba(255, 255, 255, .95); - z-index: 50; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -/* position controls for apps with app-navigation */ -#app-navigation+#app-content #controls { - left: 250px; -} -.viewer-mode #app-navigation+#app-content #controls { - left: 0; -} - -#controls .button, -#controls button, -#controls input[type='submit'], -#controls input[type='text'], -#controls input[type='password'], -#controls select { - box-sizing: border-box; - display: inline-block; - height: 36px; - padding: 7px 10px -} - -#controls .button.hidden { - display: none; -} - -#content { - position: relative; - height: 100%; - width: 100%; -} -#content .hascontrols { - margin-top: 45px; -} -#content-wrapper { - position: absolute; - height: 100%; - width: 100%; - overflow-x: hidden; /* prevent horizontal scrollbar */ - padding-top: 45px; - box-sizing:border-box; -} -/* allow horizontal scrollbar for personal and admin settings */ -#body-settings:not(.snapjs-left) .app-settings { - overflow-x: auto; -} - -#emptycontent, -.emptycontent { - color: #888; - text-align: center; - margin-top: 30vh; - width: 100%; -} -#emptycontent.emptycontent-search, -.emptycontent.emptycontent-search { - position: static; -} -#emptycontent h2, -.emptycontent h2 { - margin-bottom: 10px; - line-height: 150%; -} -#emptycontent [class^="icon-"], -.emptycontent [class^="icon-"], -#emptycontent [class*=" icon-"], -.emptycontent [class*=" icon-"] { - background-size: 64px; - height: 64px; - width: 64px; - margin: 0 auto 15px; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; - opacity: .4; -} - - -/* LOG IN & INSTALLATION ------------------------------------------------------------ */ - -/* Some whitespace to the top */ -#body-login #header { - padding-top: 100px; -} -#body-login { - background-attachment: fixed; /* fix background gradient */ - height: 100%; /* fix sticky footer */ -} - -/* Dark subtle label text */ -#body-login p.info, -#body-login form fieldset legend, -#body-login #datadirContent label, -#body-login form fieldset .warning-info, -#body-login form input[type="checkbox"]+label { - text-align: center; - color: #fff; -} -/* overrides another !important statement that sets this to unreadable black */ -#body-login form .warning input[type="checkbox"]:hover+label, -#body-login form .warning input[type="checkbox"]:focus+label, -#body-login form .warning input[type="checkbox"]+label { - color: #fff !important; -} - -#body-login .update h2 { - margin: 0 0 20px; -} - -#body-login .update a { - color: #fff; - border-bottom: 1px solid #aaa; -} - -#body-login .infogroup { - margin-bottom: 15px; -} - -#body-login p#message img { - vertical-align: middle; - padding: 5px; -} - -#body-login div.buttons { - text-align: center; -} -#body-login p.info { - margin: 0 auto; - padding-top: 20px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -#body-login p.info a { - font-weight: 600; - padding: 13px; - margin: -13px; -} - -#body-login form { - position: relative; - width: 280px; - margin: 16px auto; - padding: 0; -} -#body-login form fieldset { - margin-bottom: 20px; - text-align: left; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -#body-login form #sqliteInformation { - margin-top: -20px; - margin-bottom: 20px; -} -#body-login form #adminaccount { - margin-bottom: 15px; -} -#body-login form fieldset legend, #datadirContent label { - width: 100%; -} -#body-login #datadirContent label { - display: block; - margin: 0; -} -#body-login form #datadirField legend { - margin-bottom: 15px; -} -#body-login #showAdvanced { - padding: 13px; /* increase clickable area of Advanced dropdown */ -} -#body-login #showAdvanced img { - vertical-align: bottom; /* adjust position of Advanced dropdown arrow */ - margin-left: -4px; -} -#body-login .icon-info-white { - padding: 10px; -} - -/* strengthify wrapper */ -#body-login .strengthify-wrapper { - display: inline-block; - position: relative; - left: 15px; - top: -23px; - width: 250px; -} - -/* tipsy for the strengthify wrapper looks better with following font settings */ -#body-login .tipsy-inner { - font-weight: bold; - color: #ccc; -} - -/* General new input field look */ -#body-login input[type="text"], -#body-login input[type="password"], -#body-login input[type="email"] { - border: none; - font-weight: 300; -} - -/* Nicely grouping input field sets */ -.grouptop, -.groupmiddle, -.groupbottom { - position: relative; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -#body-login .grouptop input, -.grouptop input { - margin-bottom: 0 !important; - border-bottom: 0 !important; - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} -#body-login .groupmiddle input, -.groupmiddle input { - margin-top: 0 !important; - margin-bottom: 0 !important; - border-top: 0 !important; - border-bottom: 0 !important; - border-radius: 0 !important; - box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important; -} -#body-login .groupbottom input, -.groupbottom input { - margin-top: 0 !important; - border-top: 0 !important; - border-top-right-radius: 0 !important; - border-top-left-radius: 0 !important; - box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important; -} -#body-login .groupbottom input[type=submit] { - box-shadow: none !important; -} - -/* keep the labels for screen readers but hide them since we use placeholders */ -label.infield { - display: none; -} - -#body-login form input[type="checkbox"]+label { - position: relative; - margin: 0; - padding: 14px; - vertical-align: middle; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -#body-login form .errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; } -#body-login .success { background:#d7fed7; border:1px solid #0f0; width: 35%; margin: 30px auto; padding:1em; text-align: center;} - -#body-login #showAdvanced > img { - padding: 4px; - box-sizing: border-box; -} - -#body-login p.info a, #body-login #showAdvanced { - color: #fff; -} - -#body-login #remember_login:hover+label, -#body-login #remember_login:focus+label, -#body-login #forgot-password:hover, -#body-login #forgot-password:focus, -#body-login p.info a:hover, -#body-login p.info a:focus { - opacity: .6; -} - -/* Show password toggle */ -#show, #dbpassword { - position: absolute; - right: 1em; - top: .8em; - float: right; -} -#show, #dbpassword, #personal-show { - display: none; -} -#show + label, #dbpassword + label { - right: 21px; - top: 15px !important; - margin: -14px !important; - padding: 14px !important; -} -#show:checked + label, #dbpassword:checked + label, #personal-show:checked + label { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; - opacity: .8; -} -#show + label, #dbpassword + label, #personal-show + label { - position: absolute !important; - height: 20px; - width: 24px; - background-image: url('../img/actions/toggle.svg?v=1'); - background-repeat: no-repeat; - background-position: center; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; - opacity: .3; -} -#show + label:before, #dbpassword + label:before, #personal-show + label:before { - display: none; -} -#pass2, input[name="personal-password-clone"] { - padding: .6em 2.5em .4em .4em; - width: 8em; -} -#personal-show + label { - height: 14px; - margin-top: -25px; - left: 295px; - display: block; -} -#passwordbutton { - margin-left: .5em; -} - -/* Database selector */ -#body-login form #selectDbType { - text-align:center; - white-space: nowrap; - margin: 0; -} -#body-login form #selectDbType .info { - white-space: normal; -} -#body-login form #selectDbType label { - position: static; - margin: 0 -3px 5px; - font-size: 12px; - background:#f8f8f8; - color:#888; - cursor:pointer; - border: 1px solid #ddd; -} -#body-login form #selectDbType label span { - cursor: pointer; - padding: 10px 20px; -} -#body-login form #selectDbType label.ui-state-hover, -#body-login form #selectDbType label.ui-state-active { - color:#000; - background-color:#e8e8e8; } - - -/* Warnings and errors are the same */ -#body-login .warning, -#body-login .update, -#body-login .error { - display: block; - padding: 10px; - background-color: rgba(0,0,0,.3); - color: #fff; - text-align: left; - border-radius: 3px; - cursor: default; -} - -#body-login .update { - width: inherit; - text-align: center; -} - -#body-login .update .appList { - list-style: disc; - text-align: left; - margin-left: 25px; - margin-right: 25px; -} - -#body-login .v-align { - width: inherit; -} - -#body-login .update img.float-spinner { - float: left; -} - -#body-user .warning, #body-settings .warning { - margin-top: 8px; - padding: 5px; - background: #fdd; - border-radius: 3px; -} - -.warning legend, -.warning a, -.error a { - color: #fff !important; - font-weight: 600 !important; -} -.error a.button { - color: #555 !important; - display: inline-block; - text-align: center; -} -.error pre { - white-space: pre-wrap; - text-align: left; -} - -.error-wide { - width: 700px; - margin-left: -200px !important; -} - -.error-wide .button { - color: black !important; -} - -.warning-input { - border-color: #ce3702 !important; -} - -/* Fixes for log in page, TODO should be removed some time */ -#body-login ul.error-wide { - margin-top: 35px; -} -#body-login .warning { - margin: 0 7px 5px 4px; -} -#body-login .warning legend { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; -} -#body-login a.warning { - cursor: pointer; -} - -/* fixes for update page TODO should be fixed some time in a proper way */ -/* this is just for an error while updating the ownCloud instance */ -#body-login .updateProgress .error { - margin-top: 10px; - margin-bottom: 10px; -} - -/* Alternative Logins */ -#alternative-logins legend { margin-bottom:10px; } -#alternative-logins li { height:40px; display:inline-block; white-space:nowrap; } - -/* Log in and install button */ -#body-login input { - font-size: 20px; - margin: 5px; - padding: 11px 10px 9px; -} -#body-login input[type="text"], -#body-login input[type="password"] { - width: 249px; -} -#body-login input.login { - width: 269px; - background-position: right 16px center; -} -#body-login input[type="submit"] { - padding: 10px 20px; /* larger log in and installation buttons */ -} -#remember_login { - margin: 18px 5px 0 16px !important; -} -#body-login .remember-login-container { - display: inline-block; - margin: 10px 0; - text-align: center; - width: 100%; -} -#body-login #forgot-password { - padding: 11px; - float: right; - color: #fff; -} - -/* Sticky footer */ -#body-login .wrapper { - min-height: 100%; - margin: 0 auto -70px; - width: 300px; -} -#body-login footer, #body-login .push { - height: 70px; -} - -/* round profile photos */ -.avatar, -.avatar img, -.avatardiv, -.avatardiv img { - border-radius: 50%; - flex-shrink: 0; -} -td.avatar { - border-radius: 0; -} - - -#notification-container { - position: absolute; - top: 0; - width: 100%; - text-align: center; -} -#notification { - margin: 0 auto; - max-width: 60%; - z-index: 8000; - background-color: #fff; - border: 0; - padding: 1px 8px; - display: none; - position: relative; - top: 0; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - opacity: .9; -} -#notification span { - cursor: pointer; - margin-left: 1em; -} -#notification { - overflow-x: hidden; - overflow-y: auto; - max-height: 100px; -} -#notification .row { - position: relative; -} -#notification .row .close { - display: inline-block; - vertical-align: middle; - position: absolute; - right: 0; - top: 0; - margin-top: 2px; -} -#notification .row.closeable { - padding-right: 20px; -} - -tr .action:not(.permanent), -.selectedActions a { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - opacity: 0; -} -tr:hover .action, -tr:focus .action, -tr .action.permanent, -.selectedActions a { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - opacity: .5; -} -tr .action { - width: 16px; - height: 16px; -} -.header-action { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; - opacity: .8; -} -tr:hover .action:hover, -tr:focus .action:focus, -.selectedActions a:hover, -.selectedActions a:focus, -.header-action:hover, -.header-action:focus { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; -} -tbody tr:hover, -tbody tr:focus, -tbody tr:active { - background-color: #f8f8f8; -} - -code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", monospace; } - -#quota { - cursor: default; - margin: 30px !important; - position: relative; - padding: 0 !important; -} -#quota div { - padding: 0; - background-color: rgb(220,220,220); - font-weight: normal; - white-space: nowrap; - border-bottom-left-radius: 3px; - border-top-left-radius: 3px; - min-width: 1%; - max-width: 100%; -} -#quotatext {padding:.6em 1em;} - -#quota div.quota-warning { - background-color: #fc4; -} - -.pager { list-style:none; float:right; display:inline; margin:.7em 13em 0 0; } -.pager li { display:inline-block; } - -.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { overflow:hidden; text-overflow:ellipsis; } -.separator { display:inline; border-left:1px solid #d3d3d3; border-right:1px solid #fff; height:10px; width:0px; margin:4px; } - -a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;padding-top:0px;padding-bottom:2px; text-decoration:none; margin-top:5px } - -.exception{color:#000;} -.exception textarea{width:95%;height:200px;background:#ffe;border:0;} - -.ui-icon-circle-triangle-e{ background-image:url('../img/actions/play-next.svg?v=1'); } -.ui-icon-circle-triangle-w{ background-image:url('../img/actions/play-previous.svg?v=1'); } - -.ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#fff; } - -/* ---- DIALOGS ---- */ -#oc-dialog-filepicker-content .dirtree { - width:92%; - float: left; - margin-left: 15px; - overflow:hidden; -} -#oc-dialog-filepicker-content .dirtree div:first-child a { - background-image:url('../img/places/home.svg?v=1'); - background-repeat:no-repeat; - background-position: left center; -} -#oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer; } -#oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; } -#oc-dialog-filepicker-content .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;} -#oc-dialog-filepicker-content .filelist-container { - box-sizing: border-box; - display: inline-block; - overflow-y: auto; - height: 100%; /** overflow under the button row */ - width: 100%; -} - -#oc-dialog-filepicker-content .emptycontent { - color: #888; - text-align: center; - margin-top: 80px; - width: 100%; - display: none; -} -#oc-dialog-filepicker-content .filelist { - background-color:white; - width:100%; -} -#oc-dialog-filepicker-content #filestable.filelist { - /* prevent the filepicker to overflow */ - min-width: initial; - margin-bottom: 50px; -} - -#oc-dialog-filepicker-content .filelist td { - padding: 14px; - border-bottom: 1px solid #eee; -} -#oc-dialog-filepicker-content .filelist tr:last-child td { - border-bottom: none; -} -#oc-dialog-filepicker-content .filelist .filename { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - background-size: 32px; - background-repeat: no-repeat; - padding-left: 51px; - background-position: 7px 7px; - cursor: pointer; -} - -#oc-dialog-filepicker-content .filelist .filesize, -#oc-dialog-filepicker-content .filelist .date { - width: 80px; -} - -#oc-dialog-filepicker-content .filelist .filesize { - text-align: right; -} -#oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;} -.ui-dialog {position:fixed !important;} -span.ui-icon {float: left; margin: 3px 7px 30px 0;} - -.move2trash { /* decrease spinner size */ - width: 16px; - height: 16px; -} - -/* ---- TOOLTIPS ---- */ -.extra-data { - padding-right: 5px !important; -} -.tipsy-inner { - max-width: 400px !important; - overflow: hidden; - text-overflow: ellipsis; -} - -/* ---- TAGS ---- */ -#tagsdialog .content { - width: 100%; height: 280px; -} -#tagsdialog .scrollarea { - overflow:auto; border:1px solid #ddd; - width: 100%; height: 240px; -} -#tagsdialog .bottombuttons { - width: 100%; height: 30px; -} -#tagsdialog .bottombuttons * { float:left;} -#tagsdialog .taglist li { background:#f8f8f8; padding:.3em .8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 500ms; transition:background-color 500ms; } -#tagsdialog .taglist li:hover, #tagsdialog .taglist li:active { background:#eee; } -#tagsdialog .addinput { width: 90%; clear: both; } - -/* ---- APP SETTINGS - LEGACY, DO NOT USE THE POPUP! ---- */ -.popup { - background-color: #fff; - border-radius: 3px; - box-shadow: 0 0 10px #aaa; - color: #333; - padding: 10px; - position: fixed !important; - z-index: 100; -} -.popup.topright { top:7em; right:1em; } -.popup.bottomleft { bottom:1em; left:33em; } -.popup .close { position:absolute; top:0.2em; right:0.2em; height:20px; width:20px; background:url('../img/actions/close.svg?v=1') no-repeat center; } -.popup h2 { font-size:20px; } -.arrow { border-bottom:10px solid white; border-left:10px solid transparent; border-right:10px solid transparent; display:block; height:0; position:absolute; width:0; z-index:201; } -.arrow.left { left:-13px; bottom:1.2em; -webkit-transform:rotate(270deg); -ms-transform:rotate(270deg); transform:rotate(270deg); } -.arrow.up { top:-8px; right:6px; } -.arrow.down { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); } - - -/* ---- BREADCRUMB ---- */ -div.crumb { - float: left; - display: block; - background-image: url('../img/breadcrumb.svg?v=1'); - background-repeat: no-repeat; - background-position: right center; - height: 44px; - background-size: auto 24px; -} -div.crumb.hidden { - display: none; -} -div.crumb a, -div.crumb > span { - position: relative; - top: 12px; - padding: 14px 24px 14px 17px; - color: #555; -} -div.crumb.last a { - padding-right: 0; -} -div.crumb:first-child a { - position: relative; - top: 13px; - padding-right: 14px; -} -div.crumb.last { - font-weight: 600; - margin-right: 10px; -} -div.crumb.ellipsized { - padding: 0 10px 0 5px; -} -div.crumb a.ellipsislink { - padding: 0 !important; - position: relative; - top: 8px !important; -} - -/* some feedback for hover/tap on breadcrumbs */ -div.crumb:hover, -div.crumb:focus, -div.crumb a:focus, -div.crumb:active { - -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; - opacity:.7; -} - -.appear { - opacity: 1; - -webkit-transition: opacity 500ms ease 0s; - -moz-transition: opacity 500ms ease 0s; - -ms-transition: opacity 500ms ease 0s; - -o-transition: opacity 500ms ease 0s; - transition: opacity 500ms ease 0s; -} -.appear.transparent { - opacity: 0; -} - - -/* public footer */ -#body-public footer { - position: relative; - text-align: center; -} - -#body-public footer .info { - color: #777; - text-align: center; - margin: 0 auto; - padding: 20px 0; -} - -#body-public footer .info a { - color: #777; - font-weight: 600; - padding: 13px; - margin: -13px; -} - - -/* LEGACY FIX only - do not use fieldsets for settings */ -fieldset.warning legend, fieldset.update legend { - top: 18px; - position: relative; -} -fieldset.warning legend + p, fieldset.update legend + p { - margin-top: 12px; -} - - -/* for IE10 */ -@-ms-viewport { - width: device-width; -} - -/* hidden input type=file field */ -.hiddenuploadfield { - width: 0; - height: 0; - opacity: 0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -} diff --git a/core/css/systemtags.css b/core/css/systemtags.css deleted file mode 100644 index d11dc741065..00000000000 --- a/core/css/systemtags.css +++ /dev/null @@ -1,86 +0,0 @@ -/* - * Copyright (c) 2016 - * - * This file is licensed under the Affero General Public License version 3 - * or later. - * - * See the COPYING-README file. - * - */ - -.systemtags-select2-dropdown .select2-result-label .checkmark { - visibility: hidden; - margin-left: -5px; - margin-right: 5px; - padding: 4px; -} - -.systemtags-select2-dropdown .select2-result-label .new-item .systemtags-actions { - display: none; -} - -.systemtags-select2-dropdown .select2-selected .select2-result-label .checkmark { - visibility: visible; -} - -.systemtags-select2-dropdown .select2-result-label .icon { - display: inline-block; - opacity: .5; -} -.systemtags-select2-dropdown .select2-result-label .icon.rename { - padding: 4px; -} - -.systemtags-select2-dropdown .systemtags-actions { - position: absolute; - right: 5px; -} - -.systemtags-select2-dropdown .systemtags-rename-form { - display: inline-block; - width: calc(100% - 20px); - top: -6px; - position: relative; -} - -.systemtags-select2-dropdown .systemtags-rename-form input { - display: inline-block; - width: calc(100% - 40px); -} - -.systemtags-select2-container { - width: 100%; -} - -#select2-drop.systemtags-select2-dropdown .select2-results li.select2-result { - padding: 5px; -} - -.systemtags-select2-dropdown span { - line-height: 25px; -} - -.systemtags-select2-dropdown .systemtags-item { - display: inline-block; - height: 25px; - width: 100%; -} - -.systemtags-select2-dropdown .select2-result-label { - height: 25px; -} - -.systemtags-select2-container .select2-choices .select2-search-choice.select2-locked .label { - opacity: 0.5; -} - -.systemtags-select2-dropdown .label { - width:85%; - display:-moz-inline-box; - display:inline-block; - overflow:hidden; - text-overflow:ellipsis; -} -.systemtags-select2-dropdown .label.hidden { - display: none; -} diff --git a/core/css/tooltip.css b/core/css/tooltip.css deleted file mode 100644 index e5a2f7b2145..00000000000 --- a/core/css/tooltip.css +++ /dev/null @@ -1,119 +0,0 @@ -/*! - * Bootstrap v3.3.5 (http://getbootstrap.com) - * Copyright 2011-2015 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - */ -.tooltip { - position: absolute; - display: block; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-style: normal; - font-weight: normal; - letter-spacing: normal; - line-break: auto; - line-height: 1.42857143; - text-align: left; - text-align: start; - text-decoration: none; - text-shadow: none; - text-transform: none; - white-space: normal; - word-break: normal; - word-spacing: normal; - word-wrap: normal; - font-size: 12px; - opacity: 0; - z-index: 100000; - filter: alpha(opacity=0); -} -.tooltip.in { - opacity: 0.9; - filter: alpha(opacity=90); -} -.tooltip.top { - margin-top: -3px; - padding: 5px 0; -} -.tooltip.right { - margin-left: 3px; - padding: 0 5px; -} -.tooltip.bottom { - margin-top: 3px; - padding: 5px 0; -} -.tooltip.left { - margin-left: -3px; - padding: 0 5px; -} -.tooltip-inner { - max-width: 350px; - padding: 3px 8px; - color: #ffffff; - text-align: center; - background-color: #000000; - border-radius: 4px; -} -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} -.tooltip.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; -} -.tooltip.top-left .tooltip-arrow { - bottom: 0; - right: 5px; - margin-bottom: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; -} -.tooltip.top-right .tooltip-arrow { - bottom: 0; - left: 5px; - margin-bottom: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; -} -.tooltip.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-width: 5px 5px 5px 0; - border-right-color: #000000; -} -.tooltip.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-width: 5px 0 5px 5px; - border-left-color: #000000; -} -.tooltip.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; -} -.tooltip.bottom-left .tooltip-arrow { - top: 0; - right: 5px; - margin-top: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; -} -.tooltip.bottom-right .tooltip-arrow { - top: 0; - left: 5px; - margin-top: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; -} From e1f018838ea2509cf9726b6d9c1bb30186051474 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 12:20:54 +0100 Subject: [PATCH 34/43] Updated installation css for config error and update MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/installation.css | 1033 ++++++++++++++++++++----------------- 1 file changed, 557 insertions(+), 476 deletions(-) diff --git a/core/css/installation.css b/core/css/installation.css index b57024336e4..69c98f1ea22 100644 --- a/core/css/installation.css +++ b/core/css/installation.css @@ -5,717 +5,798 @@ * It should contain every style needed to correctly display the installation template. * */ + +/* Reset */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-weight: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - cursor: default; + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + cursor: default; } html, body { - height: 100%; + height: 100%; } article, aside, dialog, figure, footer, header, hgroup, nav, section { - display: block; + display: block; } body { - line-height: 1.5; + line-height: 1.5; } table { - border-collapse: separate; - border-spacing: 0; - white-space: nowrap; + border-collapse: separate; + border-spacing: 0; + white-space: nowrap; } caption, th, td { - text-align: left; - font-weight: normal; + text-align: left; + font-weight: normal; } table, td, th { - vertical-align: middle; + vertical-align: middle; } a { - border: 0; - color: #000; - text-decoration: none; - cursor: pointer; + border: 0; + color: #000; + text-decoration: none; + cursor: pointer; } a * { - cursor: pointer; + cursor: pointer; } input { - cursor: pointer; + cursor: pointer; } input * { - cursor: pointer; + cursor: pointer; } select, .button span, label { - cursor: pointer; + cursor: pointer; } ul { - list-style: none; + list-style: none; } body { - background-color: #ffffff; - font-weight: 400; - font-size: .8em; - line-height: 1.6em; - font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; - color: #000; - height: auto; + background-color: #ffffff; + font-weight: 400; + font-size: .8em; + line-height: 1.6em; + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; + color: #000; + height: auto; } +/* Global */ #body-login { - text-align: center; - background-color: #0082c9; - background-image: url("../img/background.jpg?v=1"); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: cover; - background-attachment: fixed; - /* fix background gradient */ - height: 100%; - /* fix sticky footer */ + text-align: center; + background-color: #0082c9; + background-image: url("../img/background.jpg?v=1"); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + /* fix background gradient */ + height: 100%; + /* fix sticky footer */ +} + + +/* heading styles */ +h2 { + font-size: 20px; + font-weight: 300; + margin-bottom: 12px; + line-height: 140%; +} +h3 { + font-size: 15px; + font-weight: 300; + margin: 12px 0; +} + + +/* do not use italic typeface style, instead lighter color */ +em { + font-style: normal; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + opacity: .5; } #header { - padding-top: 100px; + padding-top: 100px; } p.info, form fieldset legend, #datadirContent label { - text-align: center; - color: #fff; + text-align: center; + color: #fff; } form fieldset .warning-info, form input[type='checkbox'] + label { - text-align: center; - color: #fff; + text-align: center; + color: #fff; } form .warning input[type='checkbox']:hover + label, form .warning input[type='checkbox']:focus + label, form .warning input[type='checkbox'] + label { - color: #fff !important; + color: #fff !important; } .infogroup { - margin-bottom: 15px; + margin-bottom: 15px; } p#message img { - vertical-align: middle; - padding: 5px; + vertical-align: middle; + padding: 5px; } div.buttons { - text-align: center; + text-align: center; } p.info { - width: 22em; - margin: 0 auto; - padding-top: 20px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + width: 22em; + margin: 0 auto; + padding-top: 20px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } p.info a { - font-weight: 600; - padding: 13px; - margin: -13px; - color: #fff; + font-weight: 600; + padding: 13px; + margin: -13px; + color: #fff; } #body-login .warning, #body-login .update, #body-login .error { - display: block; - padding: 10px; - background-color: rgba(0, 0, 0, 0.3); - color: #fff; - text-align: left; - border-radius: 3px; - cursor: default; + display: block; + padding: 10px; + background-color: rgba(0, 0, 0, 0.3); + color: #fff; + text-align: left; + border-radius: 3px; + cursor: default; } #body-login .warning { - margin: 0 7px 5px 4px; + margin: 0 7px 5px 4px; } form { - position: relative; - width: 280px; - margin: 16px auto; - padding: 0; + position: relative; + width: 280px; + margin: 16px auto; + padding: 0; } form fieldset { - margin-bottom: 20px; - text-align: left; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + margin-bottom: 20px; + text-align: left; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } form #sqliteInformation { - margin-top: -20px; - margin-bottom: 20px; + margin-top: -20px; + margin-bottom: 20px; } form #adminaccount { - margin-bottom: 15px; + margin-bottom: 15px; } form fieldset legend { - width: 100%; + width: 100%; } form fieldset.warning legend, form fieldset.update legend { - top: 18px; - position: relative; + top: 18px; + position: relative; } form fieldset.warning legend + p, form fieldset.update legend + p { - margin-top: 12px; + margin-top: 12px; } form input[type='checkbox'] + label { - position: relative; - margin: 0; - padding: 14px; - vertical-align: middle; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + position: relative; + margin: 0; + padding: 14px; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } form .errors { - background: #fed7d7; - border: 1px solid #f00; - list-style-indent: inside; - margin: 0 0 2em; - padding: 1em; + background: #fed7d7; + border: 1px solid #f00; + list-style-indent: inside; + margin: 0 0 2em; + padding: 1em; } form .success { - background: #d7fed7; - border: 1px solid #0f0; - width: 35%; - margin: 30px auto; - padding: 1em; - text-align: center; + background: #d7fed7; + border: 1px solid #0f0; + width: 35%; + margin: 30px auto; + padding: 1em; + text-align: center; } form #showAdvanced > img { - padding: 4px; - box-sizing: border-box; + padding: 4px; + box-sizing: border-box; } form p.info a, form #showAdvanced { - color: #fff; + color: #fff; } form #remember_login:hover + label, form #remember_login:focus + label { - opacity: .6; + opacity: .6; } form #forgot-password:hover, form #forgot-password:focus { - opacity: .6; + opacity: .6; } form p.info a:hover, form p.info a:focus { - opacity: .6; + opacity: .6; } form footer .info { - white-space: nowrap; + white-space: nowrap; } #datadirContent label { - display: block; - width: 100%; - margin: 0; + display: block; + width: 100%; + margin: 0; } form #datadirField legend { - margin-bottom: 15px; + margin-bottom: 15px; } #showAdvanced { - padding: 13px; - /* increase clickable area of Advanced dropdown */ + padding: 13px; + /* increase clickable area of Advanced dropdown */ } #showAdvanced img { - vertical-align: bottom; - /* adjust position of Advanced dropdown arrow */ - margin-left: -4px; + vertical-align: bottom; + /* adjust position of Advanced dropdown arrow */ + margin-left: -4px; } .icon-info-white { - padding: 10px; + padding: 10px; } .float-spinner { - height: 32px; - display: none; + height: 32px; + display: none; } .strengthify-wrapper { - display: inline-block; - position: relative; - left: 15px; - top: -23px; - width: 250px; + display: inline-block; + position: relative; + left: 15px; + top: -23px; + width: 250px; } .tipsy-inner { - font-weight: bold; - color: #ccc; + font-weight: bold; + color: #ccc; } -input[type="submit"], input[type="button"], button, .button { - width: auto; - min-width: 25px; - padding: 5px; - background-color: rgba(240, 240, 240, 0.9); - font-weight: 600; - color: #555; - border: 1px solid rgba(240, 240, 240, 0.9); - cursor: pointer; -} - -input { - font-size: 20px; - margin: 5px; - padding: 11px 10px 9px; -} -input[type='text'], input[type='password'], input[type='email'] { - font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; - border: none; - font-weight: 300; - font-size: 20px; - margin: 5px; - padding: 11px 10px 9px; - -webkit-appearance: textfield; - -moz-appearance: textfield; - box-sizing: content-box; - background: #fff; - color: #555; - cursor: text; - font-family: inherit; - outline: none; - border-radius: 3px; - width: 249px; -} -input.login { - width: 269px; - background-position: right 16px center; -} -input[type='submit'] { - padding: 10px 20px; - /* larger log in and installation buttons */ -} - -/* Nicely grouping input field sets */ -.grouptop, .groupmiddle, .groupbottom { - position: relative; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.grouptop input { - margin-bottom: 0 !important; - border-bottom: 0 !important; - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} - -.groupmiddle input { - margin-top: 0 !important; - margin-bottom: 0 !important; - border-top: 0 !important; - border-bottom: 0 !important; - border-radius: 0 !important; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; -} - -.groupbottom input { - margin-top: 0 !important; - border-top: 0 !important; - border-top-right-radius: 0 !important; - border-top-left-radius: 0 !important; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; -} - -.groupbottom input[type=submit] { - box-shadow: none !important; -} - -label.infield { - display: none; -} - -/* Primary action button, use sparingly */ -.primary { - border: 1px solid #0082c9; - background-color: #00a2e9; - color: #fff; -} - -input[type='submit'].primary, input[type='button'].primary { - border: 1px solid #0082c9; - background-color: #00a2e9; - color: #fff; -} - -button.primary, .button.primary { - border: 1px solid #0082c9; - background-color: #00a2e9; - color: #fff; -} - -.primary:hover { - background-color: #0092d9; - color: #fff; -} - -input[type='submit'].primary:hover, input[type='button'].primary:hover { - background-color: #0092d9; - color: #fff; -} - -button.primary:hover, .button.primary:hover, .primary:focus { - background-color: #0092d9; - color: #fff; -} - -input[type='submit'].primary:focus, input[type='button'].primary:focus { - background-color: #0092d9; - color: #fff; -} - -button.primary:focus, .button.primary:focus { - background-color: #0092d9; - color: #fff; -} - -.primary:active { - background-color: #00a2e9; - color: #bbb; -} - -input[type='submit'].primary:active, input[type='button'].primary:active { - background-color: #00a2e9; - color: #bbb; -} - -button.primary:active, .button.primary:active, .primary:disabled { - background-color: #00a2e9; - color: #bbb; -} - -input[type='submit'].primary:disabled, input[type='button'].primary:disabled { - background-color: #00a2e9; - color: #bbb; -} - -button.primary:disabled, .button.primary:disabled, .primary:disabled:hover { - background-color: #00a2e9; - color: #bbb; -} - -input[type='submit'].primary:disabled:hover, input[type='button'].primary:disabled:hover { - background-color: #00a2e9; - color: #bbb; -} - -button.primary:disabled:hover, .button.primary:disabled:hover, .primary:disabled:focus { - background-color: #00a2e9; - color: #bbb; -} - -input[type='submit'].primary:disabled:focus, input[type='button'].primary:disabled:focus { - background-color: #00a2e9; - color: #bbb; -} - -button.primary:disabled:focus, .button.primary:disabled:focus { - background-color: #00a2e9; - color: #bbb; -} /* LOGO */ #header .logo { - background-image: url(../img/logo-icon.svg?v=1); - background-repeat: no-repeat; - background-size: 175px; - background-position: center; - width: 252px; - height: 120px; - margin: 0 auto; + background-image: url(../img/logo-icon.svg?v=1); + background-repeat: no-repeat; + background-size: 175px; + background-position: center; + width: 252px; + height: 120px; + margin: 0 auto; } /* Show password toggle */ #show, #dbpassword { - position: absolute; - right: 1em; - top: .8em; - float: right; + position: absolute; + right: 1em; + top: .8em; + float: right; } #show, #dbpassword, #personal-show { - display: none; + display: none; } #show + label, #dbpassword + label { - right: 21px; - top: 15px !important; - margin: -14px !important; - padding: 14px !important; + right: 21px; + top: 15px !important; + margin: -14px !important; + padding: 14px !important; } #show:checked + label, #dbpassword:checked + label, #personal-show:checked + label { - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; - opacity: .8; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; + opacity: .8; } #show + label, #dbpassword + label, #personal-show + label { - position: absolute !important; - height: 20px; - width: 24px; - background-image: url("../img/actions/toggle.svg?v=1"); - background-repeat: no-repeat; - background-position: center; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; - opacity: .3; + position: absolute !important; + height: 20px; + width: 24px; + background-image: url("../img/actions/toggle.svg?v=1"); + background-repeat: no-repeat; + background-position: center; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; + opacity: .3; } #show + label:before, #dbpassword + label:before, #personal-show + label:before { - display: none; + display: none; } #pass2, input[name='personal-password-clone'] { - padding: .6em 2.5em .4em .4em; - width: 8em; + padding: .6em 2.5em .4em .4em; + width: 8em; } #personal-show + label { - height: 14px; - margin-top: -25px; - left: 295px; - display: block; + height: 14px; + margin-top: -25px; + left: 295px; + display: block; } #passwordbutton { - margin-left: .5em; + margin-left: .5em; } /* LOADER */ #body-login .float-spinner { - margin-top: -32px; - padding-top: 32px; + margin-top: -32px; + padding-top: 32px; } [class^='icon-'], [class*=' icon-'] { - background-repeat: no-repeat; - background-position: center; - min-width: 16px; - min-height: 16px; + background-repeat: no-repeat; + background-position: center; + min-width: 16px; + min-height: 16px; } .loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark { - position: relative; + position: relative; } .loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { - z-index: 2; - content: ''; - height: 32px; - width: 32px; - margin: -17px 0 0 -17px; - position: absolute; - top: 50%; - left: 50%; - border-radius: 100%; - -webkit-animation: rotate .8s infinite linear; - animation: rotate .8s infinite linear; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; + z-index: 2; + content: ''; + height: 32px; + width: 32px; + margin: -17px 0 0 -17px; + position: absolute; + top: 50%; + left: 50%; + border-radius: 100%; + -webkit-animation: rotate .8s infinite linear; + animation: rotate .8s infinite linear; + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; } .loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { - border: 2px solid rgba(150, 150, 150, 0.5); - border-top-color: #646464; + border: 2px solid rgba(150, 150, 150, 0.5); + border-top-color: #646464; } .icon-loading-dark:after, .icon-loading-small-dark:after { - border: 2px solid rgba(187, 187, 187, 0.5); - border-top-color: #bbb; + border: 2px solid rgba(187, 187, 187, 0.5); + border-top-color: #bbb; } .icon-loading-small:after, .icon-loading-small-dark:after { - height: 16px; - width: 16px; - margin: -9px 0 0 -9px; + height: 16px; + width: 16px; + margin: -9px 0 0 -9px; } .icon-info-white { - background-image: url(../img/actions/info-white.svg?v=1); + background-image: url(../img/actions/info-white.svg?v=1); } @-webkit-keyframes rotate { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } @keyframes rotate { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } /*! - * Bootstrap v3.3.5 (http://getbootstrap.com) - * Copyright 2011-2015 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - */ + * Bootstrap v3.3.5 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ .tooltip { - position: absolute; - z-index: 1070; - display: block; - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-style: normal; - font-weight: normal; - letter-spacing: normal; - line-break: auto; - line-height: 1.42857143; - text-align: left; - text-align: start; - text-decoration: none; - text-shadow: none; - text-transform: none; - white-space: normal; - word-break: normal; - word-spacing: normal; - word-wrap: normal; - font-size: 12px; - opacity: 0; - filter: alpha(opacity=0); + position: absolute; + z-index: 1070; + display: block; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-style: normal; + font-weight: normal; + letter-spacing: normal; + line-break: auto; + line-height: 1.42857143; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + white-space: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + font-size: 12px; + opacity: 0; + filter: alpha(opacity=0); } .tooltip.in { - opacity: 0.9; - filter: alpha(opacity=90); + opacity: 0.9; + filter: alpha(opacity=90); } .tooltip.top { - margin-top: -3px; - padding: 5px 0; + margin-top: -3px; + padding: 5px 0; } .tooltip.right { - margin-left: 3px; - padding: 0 5px; + margin-left: 3px; + padding: 0 5px; } .tooltip.bottom { - margin-top: 3px; - padding: 5px 0; + margin-top: 3px; + padding: 5px 0; } .tooltip.left { - margin-left: -3px; - padding: 0 5px; + margin-left: -3px; + padding: 0 5px; } .tooltip-inner { - max-width: 350px; - padding: 3px 8px; - color: #ffffff; - text-align: center; - background-color: #000000; - border-radius: 4px; + max-width: 350px; + padding: 3px 8px; + color: #ffffff; + text-align: center; + background-color: #000000; + border-radius: 4px; } .tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } .tooltip.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; } .tooltip.top-left .tooltip-arrow { - bottom: 0; - right: 5px; - margin-bottom: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; + bottom: 0; + right: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; } .tooltip.top-right .tooltip-arrow { - bottom: 0; - left: 5px; - margin-bottom: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; + bottom: 0; + left: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; } .tooltip.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-width: 5px 5px 5px 0; - border-right-color: #000000; + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #000000; } .tooltip.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-width: 5px 0 5px 5px; - border-left-color: #000000; + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #000000; } .tooltip.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; + top: 0; + left: 50%; + margin-left: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; } .tooltip.bottom-left .tooltip-arrow { - top: 0; - right: 5px; - margin-top: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; + top: 0; + right: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; } .tooltip.bottom-right .tooltip-arrow { - top: 0; - left: 5px; - margin-top: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; + top: 0; + left: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; } /* SCROLLING */ ::-webkit-scrollbar { - width: 5px; + width: 5px; } ::-webkit-scrollbar-track-piece { - background-color: transparent; + background-color: transparent; } ::-webkit-scrollbar-thumb { - background: #ddd; - border-radius: 3px; + background: #ddd; + border-radius: 3px; +} +.error-wide { + width: 700px; + margin-left: -200px !important; +} + +/* Config write issue */ +#body-login .v-align { + width: inherit; +} +#body-login .wrapper { + min-height: 100%; + margin: 0 auto -70px; + width: 300px; +} +.warning legend, .warning a, .error a { + color: #fff !important; + font-weight: 600 !important; +} +#body-login ul.error-wide { + margin-top: 35px; +} + +/* Update info */ +#body-login .update { + width: inherit; + text-align: center; +} +#body-login .update h2 { + margin: 0 0 20px; +} + +#body-login .update a { + color: #fff; + border-bottom: 1px solid #aaa; +} + +/* INPUTS */ +input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="time"], input[type="date"], textarea, select, button, .button, input[type="submit"], input[type="button"], #quota, .pager li a { + width: 130px; + margin: 3px 3px 3px 0; + padding: 7px 6px 5px; + font-size: 13px; + background-color: #fff; + color: #333; + border: 1px solid #ddd; + outline: none; + border-radius: 3px; +} +#body-login input { + font-size: 20px; + margin: 5px; + padding: 11px 10px 9px; +} +input[type="submit"], input[type="button"], button, .button { + width: auto; + min-width: 25px; + padding: 5px; + background-color: rgba(240, 240, 240, 0.9); + font-weight: 600; + color: #555; + border: 1px solid rgba(240, 240, 240, 0.9); + cursor: pointer; +} + +input { + font-size: 20px; + margin: 5px; + padding: 11px 10px 9px; +} +input[type='text'], input[type='password'], input[type='email'] { + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; + border: none; + font-weight: 300; + font-size: 20px; + margin: 5px; + padding: 11px 10px 9px; + -webkit-appearance: textfield; + -moz-appearance: textfield; + box-sizing: content-box; + background: #fff; + color: #555; + cursor: text; + font-family: inherit; + outline: none; + border-radius: 3px; + width: 249px; +} +input.login { + width: 269px; + background-position: right 16px center; +} +input[type='submit'] { + padding: 10px 20px; + /* larger log in and installation buttons */ +} + +/* Nicely grouping input field sets */ +.grouptop, .groupmiddle, .groupbottom { + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.grouptop input { + margin-bottom: 0 !important; + border-bottom: 0 !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.groupmiddle input { + margin-top: 0 !important; + margin-bottom: 0 !important; + border-top: 0 !important; + border-bottom: 0 !important; + border-radius: 0 !important; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; +} + +.groupbottom input { + margin-top: 0 !important; + border-top: 0 !important; + border-top-right-radius: 0 !important; + border-top-left-radius: 0 !important; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; +} + +.groupbottom input[type=submit] { + box-shadow: none !important; +} + +label.infield { + display: none; +} + +/* Primary action button, use sparingly */ +.primary { + border: 1px solid #0082c9; + background-color: #00a2e9; + color: #fff; +} + +input[type='submit'].primary, input[type='button'].primary { + border: 1px solid #0082c9; + background-color: #00a2e9; + color: #fff; +} + +button.primary, .button.primary { + border: 1px solid #0082c9; + background-color: #00a2e9; + color: #fff; +} + +.primary:hover { + background-color: #0092d9; + color: #fff; +} + +input[type='submit'].primary:hover, input[type='button'].primary:hover { + background-color: #0092d9; + color: #fff; +} + +button.primary:hover, .button.primary:hover, .primary:focus { + background-color: #0092d9; + color: #fff; +} + +input[type='submit'].primary:focus, input[type='button'].primary:focus { + background-color: #0092d9; + color: #fff; +} + +button.primary:focus, .button.primary:focus { + background-color: #0092d9; + color: #fff; +} + +.primary:active { + background-color: #00a2e9; + color: #bbb; +} + +input[type='submit'].primary:active, input[type='button'].primary:active { + background-color: #00a2e9; + color: #bbb; +} + +button.primary:active, .button.primary:active, .primary:disabled { + background-color: #00a2e9; + color: #bbb; +} + +input[type='submit'].primary:disabled, input[type='button'].primary:disabled { + background-color: #00a2e9; + color: #bbb; +} + +button.primary:disabled, .button.primary:disabled, .primary:disabled:hover { + background-color: #00a2e9; + color: #bbb; +} + +input[type='submit'].primary:disabled:hover, input[type='button'].primary:disabled:hover { + background-color: #00a2e9; + color: #bbb; +} + +button.primary:disabled:hover, .button.primary:disabled:hover, .primary:disabled:focus { + background-color: #00a2e9; + color: #bbb; +} + +input[type='submit'].primary:disabled:focus, input[type='button'].primary:disabled:focus { + background-color: #00a2e9; + color: #bbb; +} + +button.primary:disabled:focus, .button.primary:disabled:focus { + background-color: #00a2e9; + color: #bbb; +} +input, textarea, select, button { + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; } From e3a57c1f07ece1c93feef31ae44a356f7d794096 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 15:41:13 +0100 Subject: [PATCH 35/43] Fix variables should be passed by reference MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- lib/private/Template/SCSSCacher.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index d227efce6bb..67f77688163 100755 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -175,7 +175,8 @@ class SCSSCacher { * @return string */ public function getCachedSCSS($appName, $fileName) { - $fileName = array_pop(explode('/', $fileName)); + $tmpfileLoc = explode('/', $fileName); + $fileName = array_pop($tmpfileLoc); $fileName = str_replace('.scss', '.css', $fileName); return substr($this->urlGenerator->linkToRoute('core.Css.getCss', array('fileName' => $fileName, 'appName' => $appName)), 1); From 350b7ebc860c59665b60d0d45e5c7ab01b84e716 Mon Sep 17 00:00:00 2001 From: Roeland Jago Douma Date: Mon, 2 Jan 2017 16:32:16 +0100 Subject: [PATCH 36/43] Adds CssControllerTests Signed-off-by: Roeland Jago Douma --- core/Controller/CssController.php | 29 +++-- lib/private/Template/CSSResourceLocator.php | 0 lib/private/Template/SCSSCacher.php | 0 tests/Core/Controller/CssControllerTest.php | 111 ++++++++++++++++++++ 4 files changed, 123 insertions(+), 17 deletions(-) mode change 100755 => 100644 lib/private/Template/CSSResourceLocator.php mode change 100755 => 100644 lib/private/Template/SCSSCacher.php create mode 100644 tests/Core/Controller/CssControllerTest.php diff --git a/core/Controller/CssController.php b/core/Controller/CssController.php index e547987902d..1206c95a5b8 100644 --- a/core/Controller/CssController.php +++ b/core/Controller/CssController.php @@ -21,32 +21,30 @@ namespace OC\Core\Controller; -use OC\AppFramework\Utility\TimeFactory; -use OC\CssManager; use OCP\AppFramework\Controller; use OCP\AppFramework\Http; use OCP\AppFramework\Http\NotFoundResponse; use OCP\AppFramework\Http\FileDisplayResponse; +use OCP\AppFramework\Utility\ITimeFactory; use OCP\Files\IAppData; use OCP\Files\NotFoundException; use OCP\IRequest; -use OCP\Notification\IApp; class CssController extends Controller { /** @var IAppData */ protected $appData; - /** @var TimeFactory */ + /** @var ITimeFactory */ protected $timeFactory; /** * @param string $appName * @param IRequest $request * @param IAppData $appData - * @param TimeFactory $timeFactory + * @param ITimeFactory $timeFactory */ - public function __construct($appName, IRequest $request, IAppData $appData, TimeFactory $timeFactory) { + public function __construct($appName, IRequest $request, IAppData $appData, ITimeFactory $timeFactory) { parent::__construct($appName, $request); $this->appData = $appData; @@ -69,16 +67,13 @@ class CssController extends Controller { return new NotFoundResponse(); } - if ($cssFile !== false) { - $response = new FileDisplayResponse($cssFile, Http::STATUS_OK, ['Content-Type' => 'text/css']); - $response->cacheFor(86400); - $expires = new \DateTime(); - $expires->setTimestamp($this->timeFactory->getTime()); - $expires->add(new \DateInterval('PT24H')); - $response->addHeader('Expires', $expires->format(\DateTime::RFC2822)); - $response->addHeader('Pragma', 'cache'); - return $response; - } - return new NotFoundResponse(); + $response = new FileDisplayResponse($cssFile, Http::STATUS_OK, ['Content-Type' => 'text/css']); + $response->cacheFor(86400); + $expires = new \DateTime(); + $expires->setTimestamp($this->timeFactory->getTime()); + $expires->add(new \DateInterval('PT24H')); + $response->addHeader('Expires', $expires->format(\DateTime::RFC1123)); + $response->addHeader('Pragma', 'cache'); + return $response; } } diff --git a/lib/private/Template/CSSResourceLocator.php b/lib/private/Template/CSSResourceLocator.php old mode 100755 new mode 100644 diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php old mode 100755 new mode 100644 diff --git a/tests/Core/Controller/CssControllerTest.php b/tests/Core/Controller/CssControllerTest.php new file mode 100644 index 00000000000..60fef9dddad --- /dev/null +++ b/tests/Core/Controller/CssControllerTest.php @@ -0,0 +1,111 @@ + + * + * @author Roeland Jago Douma + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ +namespace Tests\Core\Controller; + +use OC\Core\Controller\CssController; +use OC\HintException; +use OCP\AppFramework\Http; +use OCP\AppFramework\Http\FileDisplayResponse; +use OCP\AppFramework\Http\NotFoundResponse; +use OCP\AppFramework\Utility\ITimeFactory; +use OCP\Files\IAppData; +use OCP\Files\NotFoundException; +use OCP\Files\SimpleFS\ISimpleFile; +use OCP\Files\SimpleFS\ISimpleFolder; +use OCP\IRequest; +use Test\TestCase; + +class CssControllerTest extends TestCase { + + /** @var IAppData|\PHPUnit_Framework_MockObject_MockObject */ + private $appData; + + /** @var CssController */ + private $controller; + + public function setUp() { + parent::setUp(); + + $this->appData = $this->createMock(IAppData::class); + + $timeFactory = $this->createMock(ITimeFactory::class); + $timeFactory->method('getTime') + ->willReturn(1337); + + $this->controller = new CssController( + 'core', + $this->createMock(IRequest::class), + $this->appData, + $timeFactory + ); + } + + public function testNoCssFolderForApp() { + $this->appData->method('getFolder') + ->with('myapp') + ->willThrowException(new NotFoundException()); + + $result = $this->controller->getCss('file.css', 'myapp'); + + $this->assertInstanceOf(NotFoundResponse::class, $result); + } + + + public function testNoCssFile() { + $folder = $this->createMock(ISimpleFolder::class); + $this->appData->method('getFolder') + ->with('myapp') + ->willReturn($folder); + + $folder->method('getFile') + ->willThrowException(new NotFoundException()); + + $result = $this->controller->getCss('file.css', 'myapp'); + + $this->assertInstanceOf(NotFoundResponse::class, $result); + } + + public function testGetFile() { + $folder = $this->createMock(ISimpleFolder::class); + $file = $this->createMock(ISimpleFile::class); + $this->appData->method('getFolder') + ->with('myapp') + ->willReturn($folder); + + $folder->method('getFile') + ->with('file.css') + ->willReturn($file); + + $expected = new FileDisplayResponse($file, Http::STATUS_OK, ['Content-Type' => 'text/css']); + $expected->cacheFor(86400); + $expires = new \DateTime(); + $expires->setTimestamp(1337); + $expires->add(new \DateInterval('PT24H')); + $expected->addHeader('Expires', $expires->format(\DateTime::RFC1123)); + $expected->addHeader('Pragma', 'cache'); + + $result = $this->controller->getCss('file.css', 'myapp'); + $this->assertEquals($expected, $result); + } + +} From 7b8debc5d36650654fbc6675a6dca64514ed8461 Mon Sep 17 00:00:00 2001 From: Lukas Reschke Date: Mon, 2 Jan 2017 16:59:36 +0100 Subject: [PATCH 37/43] Remove webroot from file path The webroot is already provided, otherwise this links to stuff like "/nextcloud/nextcloud/index.php" instead of "/nextcloud/index.php" Signed-off-by: Lukas Reschke --- lib/private/Template/SCSSCacher.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index 67f77688163..bc493a44e7e 100644 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -179,6 +179,6 @@ class SCSSCacher { $fileName = array_pop($tmpfileLoc); $fileName = str_replace('.scss', '.css', $fileName); - return substr($this->urlGenerator->linkToRoute('core.Css.getCss', array('fileName' => $fileName, 'appName' => $appName)), 1); + return substr($this->urlGenerator->linkToRoute('core.Css.getCss', array('fileName' => $fileName, 'appName' => $appName)), strlen(\OC::$WEBROOT) + 1); } } From 6d3a890cb3dbd001fe40ee3d1d94ab0a501b79a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Mon, 2 Jan 2017 17:05:58 +0100 Subject: [PATCH 38/43] Camelcase fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- lib/private/Template/SCSSCacher.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index bc493a44e7e..e19640e067a 100644 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -84,7 +84,7 @@ class SCSSCacher { $folder = $this->appData->newFolder('core'); } - if($this->is_cached($fileNameCSS, $fileNameSCSS, $folder, $path)) { + if($this->isCached($fileNameCSS, $fileNameSCSS, $folder, $path)) { return true; } else { return $this->cache($path, $fileNameCSS, $fileNameSCSS, $folder, $webDir); @@ -99,7 +99,7 @@ class SCSSCacher { * @param string $path * @return boolean */ - private function is_cached($fileNameCSS, $fileNameSCSS, ISimpleFolder $folder, $path) { + private function isCached($fileNameCSS, $fileNameSCSS, ISimpleFolder $folder, $path) { try{ $cachedFile = $folder->getFile($fileNameCSS); if( $cachedFile->getMTime() > filemtime($path.'/'.$fileNameSCSS) From 8bcad88c6fbbd95aa5d7bfe2a363997229b464ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Mon, 2 Jan 2017 17:07:37 +0100 Subject: [PATCH 39/43] ScssCcacher typo fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- lib/private/Template/CSSResourceLocator.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/private/Template/CSSResourceLocator.php b/lib/private/Template/CSSResourceLocator.php index 34b4d08929a..351e6d1366f 100644 --- a/lib/private/Template/CSSResourceLocator.php +++ b/lib/private/Template/CSSResourceLocator.php @@ -37,7 +37,7 @@ class CSSResourceLocator extends ResourceLocator { * @param string $theme * @param array $core_map * @param array $party_map - * @param SCSSCacher $scssCcacher + * @param SCSSCacher $scssCacher */ public function __construct(ILogger $logger, $theme, $core_map, $party_map, SCSSCacher $scssCacher) { $this->scssCacher = $scssCacher; From 7b8c777b5728cf4f4296a67950f965f011932183 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 5 Jan 2017 20:29:03 +0100 Subject: [PATCH 40/43] Fix css url prefix for IgnoreFrontController enabled configs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- lib/private/Template/SCSSCacher.php | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index e19640e067a..0c1711b9fb7 100644 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -164,7 +164,12 @@ class SCSSCacher { */ private function rebaseUrls($css, $webDir) { $re = '/url\([\'"]([\.\w?=\/-]*)[\'"]\)/x'; - $subst = 'url(\'../../../'.$webDir.'/$1\')'; + // OC\Route\Router:75 + if(($this->systemConfig->getValue('htaccess.IgnoreFrontController', false) === true || getenv('front_controller_active') === 'true')) { + $subst = 'url(\'../../'.$webDir.'/$1\')'; + } else { + $subst = 'url(\'../../../'.$webDir.'/$1\')'; + } return preg_replace($re, $subst, $css); } From b8ab062ef35a3c7463bd33ad6882f0adfc2a4f27 Mon Sep 17 00:00:00 2001 From: Roeland Jago Douma Date: Fri, 6 Jan 2017 09:41:52 +0100 Subject: [PATCH 41/43] Update autoloader Signed-off-by: Roeland Jago Douma --- lib/composer/composer/autoload_classmap.php | 2 ++ lib/composer/composer/autoload_static.php | 2 ++ 2 files changed, 4 insertions(+) diff --git a/lib/composer/composer/autoload_classmap.php b/lib/composer/composer/autoload_classmap.php index 88845edf085..c32383521fd 100644 --- a/lib/composer/composer/autoload_classmap.php +++ b/lib/composer/composer/autoload_classmap.php @@ -420,6 +420,7 @@ return array( 'OC\\Core\\Command\\User\\ResetPassword' => $baseDir . '/core/Command/User/ResetPassword.php', 'OC\\Core\\Command\\User\\Setting' => $baseDir . '/core/Command/User/Setting.php', 'OC\\Core\\Controller\\AvatarController' => $baseDir . '/core/Controller/AvatarController.php', + 'OC\\Core\\Controller\\CssController' => $baseDir . '/core/Controller/CssController.php', 'OC\\Core\\Controller\\LoginController' => $baseDir . '/core/Controller/LoginController.php', 'OC\\Core\\Controller\\LostController' => $baseDir . '/core/Controller/LostController.php', 'OC\\Core\\Controller\\OCJSController' => $baseDir . '/core/Controller/OCJSController.php', @@ -791,6 +792,7 @@ return array( 'OC\\Template\\JSResourceLocator' => $baseDir . '/lib/private/Template/JSResourceLocator.php', 'OC\\Template\\ResourceLocator' => $baseDir . '/lib/private/Template/ResourceLocator.php', 'OC\\Template\\ResourceNotFoundException' => $baseDir . '/lib/private/Template/ResourceNotFoundException.php', + 'OC\\Template\\SCSSCacher' => $baseDir . '/lib/private/Template/SCSSCacher.php', 'OC\\Template\\TemplateFileLocator' => $baseDir . '/lib/private/Template/TemplateFileLocator.php', 'OC\\URLGenerator' => $baseDir . '/lib/private/URLGenerator.php', 'OC\\Updater' => $baseDir . '/lib/private/Updater.php', diff --git a/lib/composer/composer/autoload_static.php b/lib/composer/composer/autoload_static.php index 532598ca25f..ad5e39326ab 100644 --- a/lib/composer/composer/autoload_static.php +++ b/lib/composer/composer/autoload_static.php @@ -450,6 +450,7 @@ class ComposerStaticInit53792487c5a8370acc0b06b1a864ff4c 'OC\\Core\\Command\\User\\ResetPassword' => __DIR__ . '/../../..' . '/core/Command/User/ResetPassword.php', 'OC\\Core\\Command\\User\\Setting' => __DIR__ . '/../../..' . '/core/Command/User/Setting.php', 'OC\\Core\\Controller\\AvatarController' => __DIR__ . '/../../..' . '/core/Controller/AvatarController.php', + 'OC\\Core\\Controller\\CssController' => __DIR__ . '/../../..' . '/core/Controller/CssController.php', 'OC\\Core\\Controller\\LoginController' => __DIR__ . '/../../..' . '/core/Controller/LoginController.php', 'OC\\Core\\Controller\\LostController' => __DIR__ . '/../../..' . '/core/Controller/LostController.php', 'OC\\Core\\Controller\\OCJSController' => __DIR__ . '/../../..' . '/core/Controller/OCJSController.php', @@ -821,6 +822,7 @@ class ComposerStaticInit53792487c5a8370acc0b06b1a864ff4c 'OC\\Template\\JSResourceLocator' => __DIR__ . '/../../..' . '/lib/private/Template/JSResourceLocator.php', 'OC\\Template\\ResourceLocator' => __DIR__ . '/../../..' . '/lib/private/Template/ResourceLocator.php', 'OC\\Template\\ResourceNotFoundException' => __DIR__ . '/../../..' . '/lib/private/Template/ResourceNotFoundException.php', + 'OC\\Template\\SCSSCacher' => __DIR__ . '/../../..' . '/lib/private/Template/SCSSCacher.php', 'OC\\Template\\TemplateFileLocator' => __DIR__ . '/../../..' . '/lib/private/Template/TemplateFileLocator.php', 'OC\\URLGenerator' => __DIR__ . '/../../..' . '/lib/private/URLGenerator.php', 'OC\\Updater' => __DIR__ . '/../../..' . '/lib/private/Updater.php', From 5e02c7f7bd152ce731a5d9796ba87bd72c2fb3fc Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Fri, 6 Jan 2017 12:36:16 +0100 Subject: [PATCH 42/43] Theme update pages via CSS * SCSS on-the-fly generation isn't allowed during update * fallback to plain CSS Signed-off-by: Morris Jobke --- core/css/update.css | 416 ++++++++++++++++++++++++++++++++++++++++++++ lib/base.php | 3 + 2 files changed, 419 insertions(+) diff --git a/core/css/update.css b/core/css/update.css index 12cda3d5bbd..0ae72fd04a0 100644 --- a/core/css/update.css +++ b/core/css/update.css @@ -31,3 +31,419 @@ #body-login .warning.hidden { display: none; } + +/** + * Below this is a copy of the original CSS because we moved to on-the-fly + * generated CSS from SCSS which doesn't work during update + */ + +/** HEADER **/ + +/* prevent ugly selection effect on accidental selection */ +#header { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +/* removed until content-focusing issue is fixed */ +#skip-to-content a { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} +#skip-to-content a:focus { + left: 76px; + top: -9px; + color: #fff; + width: auto; + height: auto; +} + +/* HEADERS ------------------------------------------------------------------ */ + +#header .logo { + background-image: url('../img/logo-icon.svg?v=1'); + background-repeat: no-repeat; + background-size: 175px; + background-position: center; + width: 252px; + height: 120px; + margin: 0 auto; +} + +/** STYLES **/ + +/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net + This file is licensed under the Affero General Public License version 3 or later. + See the COPYING-README file. */ + +html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; } +html, body { height:100%; } +article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; } +body { line-height:1.5; } +table { border-collapse:separate; border-spacing:0; white-space:nowrap; } +caption, th, td { text-align:left; font-weight:normal; } +table, td, th { vertical-align:middle; } +a { border:0; color:#000; text-decoration:none;} +a, a *, input, input *, select, .button span, label { cursor:pointer; } +ul { list-style:none; } + +body { + background-color: #ffffff; + font-weight: 400; + font-size: .8em; + line-height: 1.6em; + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; + color: #000; + height: auto; +} + +#body-login { + text-align: center; + background-color: #0082c9; + background-image: url('../img/background.jpg?v=1'); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; +} + +#nojavascript { + position: fixed; + top: 0; + bottom: 0; + height: 100%; + width: 100%; + z-index: 9000; + text-align: center; + background-color: rgba(0,0,0,0.5); + color: #fff; + line-height: 125%; + font-size: 24px; +} +#nojavascript div { + display: block; + position: relative; + width: 50%; + top: 35%; + margin: 0px auto; +} +#nojavascript a { + color: #fff; + border-bottom: 2px dotted #fff; +} +#nojavascript a:hover, +#nojavascript a:focus { + color: #ddd; +} + +/* SCROLLING */ +::-webkit-scrollbar { + width: 5px; +} +::-webkit-scrollbar-track-piece { + background-color: transparent; +} +::-webkit-scrollbar-thumb { + background: #ddd; + border-radius: 3px; +} + +/* LOG IN & INSTALLATION ------------------------------------------------------------ */ + +/* Some whitespace to the top */ +#body-login #header { + padding-top: 100px; +} +#body-login { + background-attachment: fixed; /* fix background gradient */ + height: 100%; /* fix sticky footer */ +} + +/* Dark subtle label text */ +#body-login p.info { + text-align: center; + color: #fff; +} + +#body-login .update h2 { + margin: 0 0 20px; +} + +#body-login .update a { + color: #fff; + border-bottom: 1px solid #aaa; +} + +#body-login .infogroup { + margin-bottom: 15px; +} + +#body-login p#message img { + vertical-align: middle; + padding: 5px; +} + +#body-login p.info { + margin: 0 auto; + padding-top: 20px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +#body-login p.info a { + font-weight: 600; + padding: 13px; + margin: -13px; + color: #fff; +} + +#body-login .success { + background:#d7fed7; + border:1px solid #0f0; + width: 35%; + margin: 30px auto; + padding:1em; + text-align: center; +} + +#body-login p.info a:hover, +#body-login p.info a:focus { + opacity: .6; +} + +/* Warnings and errors are the same */ +#body-login .warning, +#body-login .update, +#body-login .error { + display: block; + padding: 10px; + background-color: rgba(0,0,0,.3); + color: #fff; + text-align: left; + border-radius: 3px; + cursor: default; +} + +#body-login .update { + width: inherit; + text-align: center; +} + +#body-login .update .appList { + list-style: disc; + text-align: left; + margin-left: 25px; + margin-right: 25px; +} + +#body-login .v-align { + width: inherit; +} + +.error a { + color: #fff !important; + font-weight: 600 !important; +} +.error a.button { + color: #555 !important; + display: inline-block; + text-align: center; +} +.error pre { + white-space: pre-wrap; + text-align: left; +} + +/* fixes for update page TODO should be fixed some time in a proper way */ +/* this is just for an error while updating the ownCloud instance */ +#body-login .updateProgress .error { + margin-top: 10px; + margin-bottom: 10px; +} + +/* Log in and install button */ +#body-login input { + font-size: 20px; + margin: 5px; + padding: 11px 10px 9px; +} +#body-login input.login { + width: 269px; + background-position: right 16px center; +} + +/* Sticky footer */ +#body-login .wrapper { + min-height: 100%; + margin: 0 auto -70px; + width: 300px; +} +#body-login footer, #body-login .push { + height: 70px; +} + +code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", monospace; } + +/* for IE10 */ +@-ms-viewport { + width: device-width; +} + +/** APPS **/ + +/* buttons */ +button.loading { + background-image: url('../img/loading.gif'); + background-position: right 10px center; background-repeat: no-repeat; + background-size: 16px; + padding-right: 30px; +} + +/* heading styles */ +h2 { + font-size: 20px; + font-weight: 300; + margin-bottom: 12px; + line-height: 140%; +} +h3 { + font-size: 15px; + font-weight: 300; + margin: 12px 0; +} + +/* do not use italic typeface style, instead lighter color */ +em { + font-style: normal; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + opacity: .5; +} + +/** ICONS **/ + +[class^="icon-"], [class*=" icon-"] { + background-repeat: no-repeat; + background-position: center; + min-width: 16px; + min-height: 16px; +} + +/* general assets */ + +.icon-loading-dark { + position: relative; +} +.icon-loading-dark:after { + z-index: 2; + content: ""; + height: 30px; + width: 30px; + margin: -16px 0 0 -16px; + position: absolute; + top: 50%; + left: 50%; + border-radius: 100%; + -webkit-animation: rotate .8s infinite linear; + animation: rotate .8s infinite linear; + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.icon-loading-dark:after { + border: 2px solid rgba(150, 150, 150, .5); + border-top-color: rgb(100, 100, 100); +} + +.icon-loading-dark:after, +.icon-loading-small-dark:after { + border: 2px solid rgba(187, 187, 187, .5); + border-top-color: #bbb; +} + +/* Css replaced elements don't have ::after nor ::before */ +img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark { + background-image: url("../img/loading-dark.gif"); +} + +@-webkit-keyframes rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.icon-32 { + background-size: 32px !important; +} + +.icon-checkmark-white { + background-image: url('../img/actions/checkmark-white.svg?v=1'); +} + +.icon-error-white { + background-image: url('../img/actions/error-white.svg?v=1'); +} + +/* INPUTS */ + +/* specifically override browser styles */ +input { + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; +} + +input[type="button"] { + width: 130px; + margin: 3px 3px 3px 0; + padding: 7px 6px 5px; + font-size: 13px; + background-color: #fff; + color: #333; + border: 1px solid #ddd; + outline: none; + border-radius: 3px; +} + +/* correctly align images inside of buttons */ +input img { + vertical-align: text-bottom; +} + +/* BUTTONS */ +input[type="button"] { + width: auto; + min-width: 25px; + padding: 5px; + background-color: rgba(240,240,240,.9); + font-weight: 600; + color: #555; + border: 1px solid rgba(240,240,240,.9); + cursor: pointer; +} + +input[type="button"]:hover, input[type="button"]:focus { + background-color: rgba(255, 255, 255, .95); + color: #111; +} +input[type="button"] img { + border: none; + box-shadow: none; +} diff --git a/lib/base.php b/lib/base.php index f235629120a..4023ebf14f9 100644 --- a/lib/base.php +++ b/lib/base.php @@ -281,6 +281,7 @@ class OC { // render error page $template = new OC_Template('', 'update.user', 'guest'); OC_Util::addScript('maintenance-check'); + OC_Util::addStyle('update'); $template->printPage(); die(); } @@ -354,6 +355,8 @@ class OC { header('Status: 503 Service Temporarily Unavailable'); header('Retry-After: 120'); + \OCP\Util::addStyle('update'); + // render error page $template = new OC_Template('', 'update.use-cli', 'guest'); $template->assign('productName', 'nextcloud'); // for now From ccab1168cee83509e57fb1d6e843c989cab634ba Mon Sep 17 00:00:00 2001 From: Roeland Jago Douma Date: Fri, 6 Jan 2017 13:33:18 +0100 Subject: [PATCH 43/43] Fix js tests Signed-off-by: Roeland Jago Douma --- autotest-js.sh | 4 ++++ build/package.json | 3 ++- tests/karma.config.js | 1 + 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/autotest-js.sh b/autotest-js.sh index 475a61df59e..bd7310c4e43 100755 --- a/autotest-js.sh +++ b/autotest-js.sh @@ -22,6 +22,10 @@ fi # update/install test packages mkdir -p "$PREFIX" && $NPM install --link --prefix "$PREFIX" || exit 3 +# create scss test +mkdir -p tests/css +./build/bin/node-sass --output tests/css core/css + KARMA="$PREFIX/node_modules/karma/bin/karma" NODE_PATH='build/node_modules' KARMA_TESTSUITE="$1" $KARMA start tests/karma.config.js --single-run diff --git a/build/package.json b/build/package.json index 6058d6785e0..67e999aaf31 100644 --- a/build/package.json +++ b/build/package.json @@ -17,7 +17,8 @@ "karma-coverage": "*", "karma-phantomjs-launcher": "*", "phantomjs-prebuilt": "*", - "jasmine-core": "~2.5.2" + "jasmine-core": "~2.5.2", + "node-sass": "~4.1.1" }, "engine": "node >= 0.8" } diff --git a/tests/karma.config.js b/tests/karma.config.js index f20672f4a55..933d6c57410 100644 --- a/tests/karma.config.js +++ b/tests/karma.config.js @@ -223,6 +223,7 @@ module.exports = function(config) { // include core CSS files.push({pattern: 'core/css/*.css', watched: true, included: true, served: true}); + files.push({pattern: 'tests/css/*.css', watched: true, included: true, served: true}); config.set({