Roeland Jago Douma
GitHub
commit
5ed4020215
@ -1 +1 @@
|
||||
Subproject commit 9232ccdf02be87d72b4827a2cfa33a2d75b0ee7f
|
||||
Subproject commit 204e4842df5d63c759f9c2d110c1a14036900e24
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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)";
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue