diff options
| author | Roeland Jago Douma <rullzer@users.noreply.github.com> | 2017-01-06 14:15:38 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-01-06 14:15:38 +0100 |
| commit | 5ed4020215ea5a0d4cf67f14778035b0fab9b34c (patch) | |
| tree | 2d6a230496d8ffe42a825f7c3d7d9abb6730e450 | |
| parent | 460ef39b18222dab5452b3dd50a6753060ba3de1 (diff) | |
| parent | ccab1168cee83509e57fb1d6e843c989cab634ba (diff) | |
| download | nextcloud-server-5ed4020215ea5a0d4cf67f14778035b0fab9b34c.tar.gz nextcloud-server-5ed4020215ea5a0d4cf67f14778035b0fab9b34c.zip | |
Merge pull request #2050 from nextcloud/scss-switch-base
Switch to SCSS: base files
36 files changed, 5519 insertions, 3196 deletions
diff --git a/3rdparty b/3rdparty -Subproject 9232ccdf02be87d72b4827a2cfa33a2d75b0ee7 +Subproject 204e4842df5d63c759f9c2d110c1a14036900e2 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/core/Application.php b/core/Application.php index 545b5fe420b..dad7546dcb8 100644 --- a/core/Application.php +++ b/core/Application.php @@ -30,10 +30,11 @@ namespace OC\Core; -use OC\AppFramework\Utility\SimpleContainer; 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; /** @@ -57,5 +58,13 @@ class Application extends App { \OC::$server->getCrypto() ); }); + $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 new file mode 100644 index 00000000000..1206c95a5b8 --- /dev/null +++ b/core/Controller/CssController.php @@ -0,0 +1,79 @@ +<?php +/** + * @copyright Copyright (c) 2016, John Molakvoæ (skjnldsv@protonmail.com) + * + * @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 <http://www.gnu.org/licenses/>. + * + */ + +namespace OC\Core\Controller; + +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; + +class CssController extends Controller { + + /** @var IAppData */ + protected $appData; + + /** @var ITimeFactory */ + protected $timeFactory; + + /** + * @param string $appName + * @param IRequest $request + * @param IAppData $appData + * @param ITimeFactory $timeFactory + */ + public function __construct($appName, IRequest $request, IAppData $appData, ITimeFactory $timeFactory) { + parent::__construct($appName, $request); + + $this->appData = $appData; + $this->timeFactory = $timeFactory; + } + + /** + * @PublicPage + * @NoCSRFRequired + * + * @param string $fileName css filename with extension + * @param string $appName css folder name + * @return FileDisplayResponse|NotFoundResponse + */ + public function getCss($fileName, $appName) { + try { + $folder = $this->appData->getFolder($appName); + $cssFile = $folder->getFile($fileName); + } catch(NotFoundException $e) { + 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/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/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; + } +} 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/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; + } +} diff --git a/core/css/icons.css b/core/css/icons.scss index a2869dfac1c..9afb5630181 100644 --- a/core/css/icons.css +++ b/core/css/icons.scss @@ -1,35 +1,23 @@ -[class^="icon-"], [class*=" icon-"] { +[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 { +.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 { + +.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: ""; + content: ''; height: 30px; width: 30px; margin: -16px 0 0 -16px; @@ -43,41 +31,39 @@ -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); + +.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, .5); +.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 { +.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"); + 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"); + 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"); + 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"); + background-image: url('../img/loading-small-dark.gif'); } @-webkit-keyframes rotate { @@ -85,29 +71,31 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- -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 { @@ -117,12 +105,15 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .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'); } @@ -130,6 +121,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .icon-caret { background-image: url('../img/actions/caret.svg?v=1'); } + .icon-caret-dark { background-image: url('../img/actions/caret-dark.svg?v=1'); } @@ -137,9 +129,11 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .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'); } @@ -159,19 +153,23 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .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 { +.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: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'); } @@ -183,6 +181,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .icon-download { background-image: url('../img/actions/download.svg?v=1'); } + .icon-download-white { background-image: url('../img/actions/download-white.svg?v=1'); } @@ -194,9 +193,11 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .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'); } @@ -208,6 +209,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .icon-fullscreen { background-image: url('../img/actions/fullscreen.svg?v=1'); } + .icon-fullscreen-white { background-image: url('../img/actions/fullscreen-white.svg?v=2'); } @@ -219,6 +221,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .icon-info { background-image: url('../img/actions/info.svg?v=1'); } + .icon-info-white { background-image: url('../img/actions/info-white.svg?v=1'); } @@ -238,6 +241,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .icon-more { background-image: url('../img/actions/more.svg?v=1'); } + .icon-more-white { background-image: url('../img/actions/more-white.svg?v=1'); } @@ -249,6 +253,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .icon-pause { background-image: url('../img/actions/pause.svg?v=1'); } + .icon-pause-big { background-image: url('../img/actions/pause-big.svg?v=1'); } @@ -256,15 +261,19 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .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'); } @@ -280,6 +289,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .icon-search { background-image: url('../img/actions/search.svg?v=1'); } + .icon-search-white { background-image: url('../img/actions/search-white.svg?v=1'); } @@ -291,6 +301,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .icon-share { background-image: url('../img/actions/share.svg?v=1'); } + .icon-shared { background-image: url('../img/actions/shared.svg?v=1'); } @@ -298,26 +309,32 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .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 { +.icon-favorite { background-image: url('../img/actions/star-dark.svg?v=1'); } -.icon-star, -.icon-starred:hover, -.icon-starred:focus { +.icon-star { background-image: url('../img/actions/star.svg?v=1'); } -.icon-starred, -.icon-star:hover, -.icon-star:focus { +.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'); } @@ -329,9 +346,11 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .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'); } @@ -339,6 +358,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .icon-upload { background-image: url('../img/actions/upload.svg?v=1'); } + .icon-upload-white { background-image: url('../img/actions/upload-white.svg?v=1'); } @@ -350,12 +370,15 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .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'); } @@ -363,25 +386,27 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .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 { @@ -395,20 +420,21 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .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 { + +.icon-file, .icon-filetype-text { background-image: url('../img/filetypes/text.svg?v=1'); } -.icon-folder, -.icon-filetype-folder { + +.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; + background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important; } .icon-home { 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/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; +} diff --git a/core/css/installation.css b/core/css/installation.css new file mode 100644 index 00000000000..69c98f1ea22 --- /dev/null +++ b/core/css/installation.css @@ -0,0 +1,802 @@ +/* +* 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. +* +*/ + +/* 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; +} + +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; +} + +/* 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 */ +} + + +/* 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; +} + +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; +} + + +/* 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; +} +.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; +} diff --git a/core/css/jquery-ui-fixes.css b/core/css/jquery-ui-fixes.scss index e8cf2b769b8..4cf4f4cdd4a 100644 --- a/core/css/jquery-ui-fixes.css +++ b/core/css/jquery-ui-fixes.scss @@ -1,134 +1,124 @@ /* Component containers ----------------------------------*/ + .ui-widget { - font-family: "Lucida Grande", Arial, Verdana, sans-serif; + font-family: 'Lucida Grande', Arial, Verdana, sans-serif; font-size: 1em; + button { + font-family: 'Lucida Grande', Arial, Verdana, sans-serif; + } } -.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; + a { + 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; + a { + color: #ffffff; + } } /* Interaction states ----------------------------------*/ -.ui-state-default, -.ui-widget-content .ui-state-default, -.ui-widget-header .ui-state-default { + +.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 { + +.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 { + +.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 { + +.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 { + +.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 { + +.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 { + +.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 { + +.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 { + +.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 { + +.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 { - 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 { + +.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 { + +.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; 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/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; + } + } +} 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/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; +} 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/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)'; +} 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/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; + } +} 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; -} 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; + } +} 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/core/routes.php b/core/routes.php index 2b8080a3b7b..6f1892d19ac 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/{appName}/{fileName}', 'verb' => 'GET'], ], 'ocs' => [ ['root' => '/cloud', 'name' => 'OCS#getCapabilities', 'url' => '/capabilities', 'verb' => 'GET'], 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 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', diff --git a/lib/private/Server.php b/lib/private/Server.php index 5bc72e3614f..cc295dccd17 100644 --- a/lib/private/Server.php +++ b/lib/private/Server.php @@ -898,7 +898,6 @@ class Server extends ServerContainer implements IServerContainer { return $this->query('SystemTagObjectMapper'); } - /** * Returns the avatar manager, used for avatar functionality * diff --git a/lib/private/Template/CSSResourceLocator.php b/lib/private/Template/CSSResourceLocator.php index ffeaf765ff5..351e6d1366f 100644 --- a/lib/private/Template/CSSResourceLocator.php +++ b/lib/private/Template/CSSResourceLocator.php @@ -25,13 +25,34 @@ namespace OC\Template; +use OCP\ILogger; + class CSSResourceLocator extends ResourceLocator { + + /** @var SCSSCacher */ + protected $scssCacher; + + /** + * @param ILogger $logger + * @param string $theme + * @param array $core_map + * @param array $party_map + * @param SCSSCacher $scssCacher + */ + public function __construct(ILogger $logger, $theme, $core_map, $party_map, SCSSCacher $scssCacher) { + $this->scssCacher = $scssCacher; + + 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->appendIfExist($this->serverroot, $style.'.css') || $this->appendIfExist($this->serverroot, 'core/'.$style.'.css') ) { @@ -53,4 +74,25 @@ 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 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)) { + 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']); + return false; + } + } + return false; + } } diff --git a/lib/private/Template/ResourceLocator.php b/lib/private/Template/ResourceLocator.php index 420317d27ac..420317d27ac 100644..100755 --- a/lib/private/Template/ResourceLocator.php +++ b/lib/private/Template/ResourceLocator.php diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php new file mode 100644 index 00000000000..0c1711b9fb7 --- /dev/null +++ b/lib/private/Template/SCSSCacher.php @@ -0,0 +1,189 @@ +<?php +/** + * @copyright Copyright (c) 2016, John Molakvoæ (skjnldsv@protonmail.com) + * + * @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 <http://www.gnu.org/licenses/>. + * + */ + +namespace OC\Template; + +use Leafo\ScssPhp\Compiler; +use Leafo\ScssPhp\Exception\ParserException; +use Leafo\ScssPhp\Formatter\Crunched; +use Leafo\ScssPhp\Formatter\Expanded; +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 ILogger */ + protected $logger; + + /** @var IAppData */ + protected $appData; + + /** @var IURLGenerator */ + protected $urlGenerator; + + /** @var SystemConfig */ + protected $systemConfig; + + /** + * @param ILogger $logger + * @param IAppData $appData + * @param IURLGenerator $urlGenerator + * @param 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; + } + + /** + * Process the caching process if needed + * @param string $root Root path to the nextcloud installation + * @param string $file + * @return boolean + */ + public function process($root, $file) { + $path = explode('/', $root . '/' . $file); + + $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->isCached($fileNameCSS, $fileNameSCSS, $folder, $path)) { + return true; + } else { + 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 isCached($fileNameCSS, $fileNameSCSS, ISimpleFolder $folder, $path) { + try{ + $cachedFile = $folder->getFile($fileNameCSS); + if( $cachedFile->getMTime() > filemtime($path.'/'.$fileNameSCSS) + && $cachedFile->getSize() > 0 ) { + return true; + } + } catch(NotFoundException $e) { + return false; + } + return false; + } + + /** + * 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($path, $fileNameCSS, $fileNameSCSS, ISimpleFolder $folder, $webDir) { + $scss = new Compiler(); + $scss->setImportPaths($path); + if($this->systemConfig->getValue('debug')) { + // Debug mode + $scss->setFormatter(Expanded::class); + $scss->setLineNumberStyle(Compiler::LINE_COMMENTS); + } else { + // Compression + $scss->setFormatter(Crunched::class); + } + + try { + $cachedfile = $folder->getFile($fileNameCSS); + } catch(NotFoundException $e) { + $cachedfile = $folder->newFile($fileNameCSS); + } + + // Compile + try { + $compiledScss = $scss->compile('@import "'.$fileNameSCSS.'";'); + } catch(ParserException $e) { + $this->logger->error($e, ['app' => 'core']); + return false; + } + + try { + $cachedfile->putContent($this->rebaseUrls($compiledScss, $webDir)); + $this->logger->debug($webDir.'/'.$fileNameSCSS.' compiled and successfully cached', ['app' => 'core']); + return true; + } catch(NotFoundException $e) { + return false; + } + } + + /** + * Add the correct uri prefix to make uri valid again + * @param string $css + * @param string $webDir + * @return string + */ + private function rebaseUrls($css, $webDir) { + $re = '/url\([\'"]([\.\w?=\/-]*)[\'"]\)/x'; + // 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); + } + + /** + * Return the cached css file uri + * @param string $appName the app name + * @param string $fileName + * @return string + */ + public function getCachedSCSS($appName, $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)), strlen(\OC::$WEBROOT) + 1); + } +} diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php index ad9f8bac0e4..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 { @@ -159,8 +160,17 @@ 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( + [\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', []); $this->assign('versionHash', self::$versionHash); @@ -184,11 +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 )); + array( \OC::$SERVERROOT => \OC::$WEBROOT ), + $SCSSCacher); $locator->find($styles); return $locator->getResources(); } 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 @@ +<?php +/** + * @copyright 2017, Roeland Jago Douma <roeland@famdouma.nl> + * + * @author Roeland Jago Douma <roeland@famdouma.nl> + * + * @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 <http://www.gnu.org/licenses/>. + * + */ +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); + } + +} 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({ |