Merge pull request #9723 from nextcloud/css4-variables
Css4 variables migration
This commit is contained in:
commit
9b6f235015
|
@ -9,11 +9,11 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
display: none;
|
display: none;
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
background: $color-main-background;
|
background: var(--color-main-background);
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
border: 1px solid $color-border;
|
border: 1px solid var(--color-border);
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
box-shadow: 0 0 5px $color-box-shadow;
|
box-shadow: 0 0 5px var(--color-box-shadow);
|
||||||
min-width: 120px;
|
min-width: 120px;
|
||||||
z-index: 11110 !important;
|
z-index: 11110 !important;
|
||||||
}
|
}
|
||||||
|
@ -22,14 +22,14 @@
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-bottom: solid 1px $color-border;
|
border-bottom: solid 1px var(--color-border);
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.atwho-view .atwho-header .small {
|
.atwho-view .atwho-header .small {
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
float: right;
|
float: right;
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
margin-right: -5px;
|
margin-right: -5px;
|
||||||
|
@ -42,18 +42,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.atwho-view .cur {
|
.atwho-view .cur {
|
||||||
background: $color-primary;
|
background: var(--color-primary);
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
}
|
}
|
||||||
.atwho-view .cur small {
|
.atwho-view .cur small {
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
}
|
}
|
||||||
.atwho-view strong {
|
.atwho-view strong {
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
.atwho-view .cur strong {
|
.atwho-view .cur strong {
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
.atwho-view ul {
|
.atwho-view ul {
|
||||||
|
@ -67,11 +67,11 @@
|
||||||
.atwho-view ul li {
|
.atwho-view ul li {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border-bottom: 1px solid $color-border;
|
border-bottom: 1px solid var(--color-border);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.atwho-view small {
|
.atwho-view small {
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
|
@ -70,7 +70,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#commentsTabView .comments .comment {
|
#commentsTabView .comments .comment {
|
||||||
border-top: 1px solid $color-border;
|
border-top: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
#commentsTabView .comment .avatar,
|
#commentsTabView .comment .avatar,
|
||||||
|
|
|
@ -100,7 +100,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-sidebar .file-details {
|
#app-sidebar .file-details {
|
||||||
color: $color-text-details;
|
color: var(--color-text-maxcontrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-sidebar .action-favorite {
|
#app-sidebar .action-favorite {
|
||||||
|
|
|
@ -41,8 +41,8 @@
|
||||||
.newFileMenu .error,
|
.newFileMenu .error,
|
||||||
.newFileMenu .error + .icon-confirm,
|
.newFileMenu .error + .icon-confirm,
|
||||||
#fileList .error {
|
#fileList .error {
|
||||||
color: $color-error;
|
color: var(--color-error);
|
||||||
border-color: $color-error;
|
border-color: var(--color-error);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FILE TABLE */
|
/* FILE TABLE */
|
||||||
|
@ -71,7 +71,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-files #app-content.dir-drop {
|
.app-files #app-content.dir-drop {
|
||||||
background-color: $color-main-background !important;
|
background-color: var(--color-main-background) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover{
|
.file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover{
|
||||||
|
@ -140,12 +140,12 @@
|
||||||
#filestable tbody tr.searchresult,
|
#filestable tbody tr.searchresult,
|
||||||
table tr.mouseOver td {
|
table tr.mouseOver td {
|
||||||
transition: background-color 0.3s ease;
|
transition: background-color 0.3s ease;
|
||||||
background-color: nc-darken($color-main-background, 3%);
|
background-color: var(--color-background-dark);
|
||||||
}
|
}
|
||||||
tbody a { color: $color-main-text; }
|
tbody a { color: var(--color-main-text); }
|
||||||
|
|
||||||
span.conflict-path, span.extension, span.uploading, td.date {
|
span.conflict-path, span.extension, span.uploading, td.date {
|
||||||
color: $color-text-details;
|
color: var(--color-text-maxcontrast);
|
||||||
}
|
}
|
||||||
span.conflict-path, span.extension {
|
span.conflict-path, span.extension {
|
||||||
-webkit-transition: opacity 300ms;
|
-webkit-transition: opacity 300ms;
|
||||||
|
@ -159,11 +159,11 @@ tr:focus span.conflict-path,
|
||||||
tr:hover span.extension,
|
tr:hover span.extension,
|
||||||
tr:focus span.extension {
|
tr:focus span.extension {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: $color-text-details;
|
color: var(--color-text-maxcontrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
table th, table th a {
|
table th, table th a {
|
||||||
color: $color-text-details;
|
color: var(--color-text-maxcontrast);
|
||||||
}
|
}
|
||||||
table.multiselect th a {
|
table.multiselect th a {
|
||||||
color: #000;
|
color: #000;
|
||||||
|
@ -208,7 +208,7 @@ table th:focus .sort-indicator.hidden {
|
||||||
|
|
||||||
table th,
|
table th,
|
||||||
table td {
|
table td {
|
||||||
border-bottom: 1px solid $color-border;
|
border-bottom: 1px solid var(--color-border);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
@ -625,7 +625,7 @@ table.dragshadow td.size {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
background-repeat: no-repeat no-repeat;
|
background-repeat: no-repeat no-repeat;
|
||||||
background-position: 50%;
|
background-position: 50%;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
|
@ -703,11 +703,11 @@ table.dragshadow td.size {
|
||||||
|
|
||||||
.quota-container {
|
.quota-container {
|
||||||
height: 5px;
|
height: 5px;
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
div {
|
div {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: $color-primary;
|
background-color: var(--color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -51,7 +51,7 @@
|
||||||
left: 0px;
|
left: 0px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: $color-primary;
|
background-color: var(--color-primary);
|
||||||
}
|
}
|
||||||
#uploadprogressbar .label {
|
#uploadprogressbar .label {
|
||||||
top: 6px;
|
top: 6px;
|
||||||
|
@ -61,14 +61,14 @@
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
#uploadprogressbar .label.inner {
|
#uploadprogressbar .label.inner {
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
#uploadprogressbar .label.outer {
|
#uploadprogressbar .label.outer {
|
||||||
position: relative;
|
position: relative;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
#uploadprogressbar .desktop {
|
#uploadprogressbar .desktop {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
@ -161,7 +161,7 @@ thead {
|
||||||
|
|
||||||
#header .header-shared-by {
|
#header .header-shared-by {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -10px;
|
top: -10px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
|
|
@ -122,3 +122,11 @@
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* transition effects for theming value changes */
|
||||||
|
#header {
|
||||||
|
transition: background-color 500ms linear;
|
||||||
|
svg, img {
|
||||||
|
transition: 500ms filter linear;
|
||||||
|
}
|
||||||
|
}
|
|
@ -94,7 +94,7 @@
|
||||||
@if variable_exists('theming-logo-mime') and $theming-logo-mime != '' {
|
@if variable_exists('theming-logo-mime') and $theming-logo-mime != '' {
|
||||||
#theming-preview-logo,
|
#theming-preview-logo,
|
||||||
#header .logo {
|
#header .logo {
|
||||||
background-image: url(#{$image-logo});
|
background-image: $image-logo;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
#body-login #header .logo {
|
#body-login #header .logo {
|
||||||
|
@ -102,7 +102,7 @@
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
#theming-preview-logo {
|
#theming-preview-logo {
|
||||||
background-image: url(#{$image-logo});
|
background-image: $image-logo;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -110,12 +110,12 @@
|
||||||
#body-login,
|
#body-login,
|
||||||
#firstrunwizard .firstrunwizard-header,
|
#firstrunwizard .firstrunwizard-header,
|
||||||
#theming-preview {
|
#theming-preview {
|
||||||
background-image: url(#{$image-login-background});
|
background-image: $image-login-background;
|
||||||
background-color: $color-primary;
|
background-color: $color-primary;
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
#theming-preview {
|
#theming-preview {
|
||||||
background-image: url(#{$image-login-background});
|
background-image: $image-login-background;
|
||||||
background-color: $color-primary;
|
background-color: $color-primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -201,14 +201,14 @@ class ThemingController extends Controller {
|
||||||
$this->themingDefaults->set($setting, $value);
|
$this->themingDefaults->set($setting, $value);
|
||||||
|
|
||||||
// reprocess server scss for preview
|
// reprocess server scss for preview
|
||||||
$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/server.scss', 'core');
|
$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/css-variables.scss', 'core');
|
||||||
|
|
||||||
return new DataResponse(
|
return new DataResponse(
|
||||||
[
|
[
|
||||||
'data' =>
|
'data' =>
|
||||||
[
|
[
|
||||||
'message' => $this->l10n->t('Saved'),
|
'message' => $this->l10n->t('Saved'),
|
||||||
'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/server.scss'))
|
'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/css-variables.scss'))
|
||||||
],
|
],
|
||||||
'status' => 'success'
|
'status' => 'success'
|
||||||
]
|
]
|
||||||
|
@ -302,7 +302,7 @@ class ThemingController extends Controller {
|
||||||
|
|
||||||
$this->themingDefaults->set($key.'Mime', $image['type']);
|
$this->themingDefaults->set($key.'Mime', $image['type']);
|
||||||
|
|
||||||
$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/server.scss', 'core');
|
$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/css-variables.scss', 'core');
|
||||||
|
|
||||||
return new DataResponse(
|
return new DataResponse(
|
||||||
[
|
[
|
||||||
|
@ -311,7 +311,7 @@ class ThemingController extends Controller {
|
||||||
'name' => $name,
|
'name' => $name,
|
||||||
'url' => $this->imageManager->getImageUrl($key),
|
'url' => $this->imageManager->getImageUrl($key),
|
||||||
'message' => $this->l10n->t('Saved'),
|
'message' => $this->l10n->t('Saved'),
|
||||||
'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/server.scss'))
|
'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/css-variables.scss'))
|
||||||
],
|
],
|
||||||
'status' => 'success'
|
'status' => 'success'
|
||||||
]
|
]
|
||||||
|
@ -328,7 +328,7 @@ class ThemingController extends Controller {
|
||||||
public function undo(string $setting): DataResponse {
|
public function undo(string $setting): DataResponse {
|
||||||
$value = $this->themingDefaults->undo($setting);
|
$value = $this->themingDefaults->undo($setting);
|
||||||
// reprocess server scss for preview
|
// reprocess server scss for preview
|
||||||
$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/server.scss', 'core');
|
$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/css-variables.scss', 'core');
|
||||||
|
|
||||||
if (strpos($setting, 'Mime') !== -1) {
|
if (strpos($setting, 'Mime') !== -1) {
|
||||||
$imageKey = str_replace('Mime', '', $setting);
|
$imageKey = str_replace('Mime', '', $setting);
|
||||||
|
@ -341,7 +341,7 @@ class ThemingController extends Controller {
|
||||||
[
|
[
|
||||||
'value' => $value,
|
'value' => $value,
|
||||||
'message' => $this->l10n->t('Saved'),
|
'message' => $this->l10n->t('Saved'),
|
||||||
'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/server.scss'))
|
'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/css-variables.scss'))
|
||||||
],
|
],
|
||||||
'status' => 'success'
|
'status' => 'success'
|
||||||
]
|
]
|
||||||
|
|
|
@ -272,10 +272,10 @@ class ThemingDefaults extends \OC_Defaults {
|
||||||
'theming-favicon-mime' => "'" . $this->config->getAppValue('theming', 'faviconMime') . "'"
|
'theming-favicon-mime' => "'" . $this->config->getAppValue('theming', 'faviconMime') . "'"
|
||||||
];
|
];
|
||||||
|
|
||||||
$variables['image-logo'] = "'".$this->imageManager->getImageUrl('logo')."'";
|
$variables['image-logo'] = "url('".$this->imageManager->getImageUrl('logo')."')";
|
||||||
$variables['image-logoheader'] = "'".$this->imageManager->getImageUrl('logoheader')."'";
|
$variables['image-logoheader'] = "'".$this->imageManager->getImageUrl('logoheader')."'";
|
||||||
$variables['image-favicon'] = "'".$this->imageManager->getImageUrl('favicon')."'";
|
$variables['image-favicon'] = "'".$this->imageManager->getImageUrl('favicon')."'";
|
||||||
$variables['image-login-background'] = "'".$this->imageManager->getImageUrl('background')."'";
|
$variables['image-login-background'] = "url('".$this->imageManager->getImageUrl('background')."')";
|
||||||
$variables['image-login-plain'] = 'false';
|
$variables['image-login-plain'] = 'false';
|
||||||
|
|
||||||
if ($this->config->getAppValue('theming', 'color', null) !== null) {
|
if ($this->config->getAppValue('theming', 'color', null) !== null) {
|
||||||
|
|
|
@ -151,20 +151,20 @@ class ThemingControllerTest extends TestCase {
|
||||||
$this->scssCacher
|
$this->scssCacher
|
||||||
->expects($this->once())
|
->expects($this->once())
|
||||||
->method('getCachedSCSS')
|
->method('getCachedSCSS')
|
||||||
->with('core', '/core/css/server.scss')
|
->with('core', '/core/css/css-variables.scss')
|
||||||
->willReturn('/core/css/someHash-server.scss');
|
->willReturn('/core/css/someHash-css-variables.scss');
|
||||||
$this->urlGenerator
|
$this->urlGenerator
|
||||||
->expects($this->once())
|
->expects($this->once())
|
||||||
->method('linkTo')
|
->method('linkTo')
|
||||||
->with('', '/core/css/someHash-server.scss')
|
->with('', '/core/css/someHash-css-variables.scss')
|
||||||
->willReturn('/nextcloudWebroot/core/css/someHash-server.scss');
|
->willReturn('/nextcloudWebroot/core/css/someHash-css-variables.scss');
|
||||||
|
|
||||||
$expected = new DataResponse(
|
$expected = new DataResponse(
|
||||||
[
|
[
|
||||||
'data' =>
|
'data' =>
|
||||||
[
|
[
|
||||||
'message' => $message,
|
'message' => $message,
|
||||||
'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss',
|
'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-css-variables.scss',
|
||||||
],
|
],
|
||||||
'status' => 'success',
|
'status' => 'success',
|
||||||
]
|
]
|
||||||
|
@ -604,13 +604,13 @@ class ThemingControllerTest extends TestCase {
|
||||||
$this->scssCacher
|
$this->scssCacher
|
||||||
->expects($this->once())
|
->expects($this->once())
|
||||||
->method('getCachedSCSS')
|
->method('getCachedSCSS')
|
||||||
->with('core', '/core/css/server.scss')
|
->with('core', '/core/css/css-variables.scss')
|
||||||
->willReturn('/core/css/someHash-server.scss');
|
->willReturn('/core/css/someHash-css-variables.scss');
|
||||||
$this->urlGenerator
|
$this->urlGenerator
|
||||||
->expects($this->once())
|
->expects($this->once())
|
||||||
->method('linkTo')
|
->method('linkTo')
|
||||||
->with('', '/core/css/someHash-server.scss')
|
->with('', '/core/css/someHash-css-variables.scss')
|
||||||
->willReturn('/nextcloudWebroot/core/css/someHash-server.scss');
|
->willReturn('/nextcloudWebroot/core/css/someHash-css-variables.scss');
|
||||||
|
|
||||||
$expected = new DataResponse(
|
$expected = new DataResponse(
|
||||||
[
|
[
|
||||||
|
@ -618,7 +618,7 @@ class ThemingControllerTest extends TestCase {
|
||||||
[
|
[
|
||||||
'value' => 'MyValue',
|
'value' => 'MyValue',
|
||||||
'message' => 'Saved',
|
'message' => 'Saved',
|
||||||
'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss',
|
'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-css-variables.scss',
|
||||||
],
|
],
|
||||||
'status' => 'success'
|
'status' => 'success'
|
||||||
]
|
]
|
||||||
|
@ -648,13 +648,13 @@ class ThemingControllerTest extends TestCase {
|
||||||
$this->scssCacher
|
$this->scssCacher
|
||||||
->expects($this->once())
|
->expects($this->once())
|
||||||
->method('getCachedSCSS')
|
->method('getCachedSCSS')
|
||||||
->with('core', '/core/css/server.scss')
|
->with('core', '/core/css/css-variables.scss')
|
||||||
->willReturn('/core/css/someHash-server.scss');
|
->willReturn('/core/css/someHash-css-variables.scss');
|
||||||
$this->urlGenerator
|
$this->urlGenerator
|
||||||
->expects($this->once())
|
->expects($this->once())
|
||||||
->method('linkTo')
|
->method('linkTo')
|
||||||
->with('', '/core/css/someHash-server.scss')
|
->with('', '/core/css/someHash-css-variables.scss')
|
||||||
->willReturn('/nextcloudWebroot/core/css/someHash-server.scss');
|
->willReturn('/nextcloudWebroot/core/css/someHash-css-variables.scss');
|
||||||
$this->imageManager->expects($this->once())
|
$this->imageManager->expects($this->once())
|
||||||
->method('delete')
|
->method('delete')
|
||||||
->with($filename);
|
->with($filename);
|
||||||
|
@ -665,7 +665,7 @@ class ThemingControllerTest extends TestCase {
|
||||||
[
|
[
|
||||||
'value' => $value,
|
'value' => $value,
|
||||||
'message' => 'Saved',
|
'message' => 'Saved',
|
||||||
'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss',
|
'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-css-variables.scss',
|
||||||
],
|
],
|
||||||
'status' => 'success'
|
'status' => 'success'
|
||||||
]
|
]
|
||||||
|
|
|
@ -645,8 +645,8 @@ class ThemingDefaultsTest extends TestCase {
|
||||||
'theming-cachebuster' => '\'0\'',
|
'theming-cachebuster' => '\'0\'',
|
||||||
'theming-logo-mime' => '\'jpeg\'',
|
'theming-logo-mime' => '\'jpeg\'',
|
||||||
'theming-background-mime' => '\'jpeg\'',
|
'theming-background-mime' => '\'jpeg\'',
|
||||||
'image-logo' => "'custom-logo?v=0'",
|
'image-logo' => "url('custom-logo?v=0')",
|
||||||
'image-login-background' => "'custom-background?v=0'",
|
'image-login-background' => "url('custom-background?v=0')",
|
||||||
'color-primary' => $this->defaults->getColorPrimary(),
|
'color-primary' => $this->defaults->getColorPrimary(),
|
||||||
'color-primary-text' => '#ffffff',
|
'color-primary-text' => '#ffffff',
|
||||||
'image-login-plain' => 'false',
|
'image-login-plain' => 'false',
|
||||||
|
|
|
@ -58,7 +58,7 @@ kbd {
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
|
box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
@ -83,13 +83,13 @@ kbd {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
padding-bottom: 44px;
|
padding-bottom: 44px;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
border-right: 1px solid $color-border;
|
border-right: 1px solid var(--color-border);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
@ -152,7 +152,7 @@ kbd {
|
||||||
&,
|
&,
|
||||||
> a {
|
> a {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
box-shadow: inset 4px 0 $color-primary;
|
box-shadow: inset 4px 0 var(--color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -174,6 +174,23 @@ kbd {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.app-navigation-caption {
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 44px;
|
||||||
|
padding: 0 44px;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
// !important to overwrite specific hover and focus
|
||||||
|
opacity: .7;
|
||||||
|
box-shadow: none !important;
|
||||||
|
user-select: none;
|
||||||
|
pointer-events:none;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Second level nesting for lists */
|
/* Second level nesting for lists */
|
||||||
> ul {
|
> ul {
|
||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
|
@ -198,7 +215,7 @@ kbd {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
box-shadow: inset 4px 0 $color-primary;
|
box-shadow: inset 4px 0 var(--color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* align loader */
|
/* align loader */
|
||||||
|
@ -250,7 +267,7 @@ kbd {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
opacity: .57;
|
opacity: .57;
|
||||||
flex: 1 1 0px;
|
flex: 1 1 0px;
|
||||||
z-index: 100; /* above the bullet to allow click*/
|
z-index: 100; /* above the bullet to allow click*/
|
||||||
|
@ -442,8 +459,8 @@ kbd {
|
||||||
span {
|
span {
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: $color-primary;
|
background-color: var(--color-primary);
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -460,7 +477,7 @@ kbd {
|
||||||
transition: opacity 250ms ease-in-out;
|
transition: opacity 250ms ease-in-out;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
form,
|
form,
|
||||||
div {
|
div {
|
||||||
|
@ -537,7 +554,7 @@ kbd {
|
||||||
z-index 250ms ease-in-out;
|
z-index 250ms ease-in-out;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -551,10 +568,7 @@ kbd {
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
color: $color-error;
|
color: var(--color-error);
|
||||||
}
|
|
||||||
.app-navigation-separator {
|
|
||||||
border-bottom: 1px solid nc-lighten($color-main-text, 86%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-navigation-entry-utils ul,
|
.app-navigation-entry-utils ul,
|
||||||
|
@ -599,8 +613,8 @@ kbd {
|
||||||
width: 27%;
|
width: 27%;
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
display: block;
|
display: block;
|
||||||
background: $color-main-background;
|
background: var(--color-main-background);
|
||||||
border-left: 1px solid $color-border;
|
border-left: 1px solid var(--color-border);
|
||||||
-webkit-transition: margin-right 300ms;
|
-webkit-transition: margin-right 300ms;
|
||||||
transition: margin-right 300ms;
|
transition: margin-right 300ms;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
@ -632,11 +646,11 @@ kbd {
|
||||||
#app-settings-content {
|
#app-settings-content {
|
||||||
display: none;
|
display: none;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
/* restrict height of settings and make scrollable */
|
/* restrict height of settings and make scrollable */
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border-right: 1px solid $color-border;
|
border-right: 1px solid var(--color-border);
|
||||||
width: 250px;
|
width: 250px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
@ -647,7 +661,7 @@ kbd {
|
||||||
|
|
||||||
.info-text {
|
.info-text {
|
||||||
padding: 5px 0 7px 22px;
|
padding: 5px 0 7px 22px;
|
||||||
color: rgba($color-main-text, .4);
|
color: var(--color-text-lighter);
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
&[type='checkbox'],
|
&[type='checkbox'],
|
||||||
|
@ -665,10 +679,10 @@ kbd {
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-settings-header {
|
#app-settings-header {
|
||||||
border-right: 1px solid $color-border;
|
border-right: 1px solid var(--color-border);
|
||||||
width: 250px;
|
width: 250px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-button {
|
.settings-button {
|
||||||
|
@ -677,7 +691,7 @@ kbd {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
background-image: url('../img/actions/settings-dark.svg?v=1');
|
background-image: url('../img/actions/settings-dark.svg?v=1');
|
||||||
background-position: 14px center;
|
background-position: 14px center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -689,14 +703,14 @@ kbd {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
/* like app-navigation a */
|
/* like app-navigation a */
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
opacity: .57;
|
opacity: .57;
|
||||||
|
|
||||||
&.opened,
|
&.opened,
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
box-shadow: inset 4px 0 $color-primary;
|
box-shadow: inset 4px 0 var(--color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -704,7 +718,7 @@ kbd {
|
||||||
.section {
|
.section {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
&.hidden {
|
&.hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
@ -745,25 +759,25 @@ kbd {
|
||||||
float: left;
|
float: left;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
margin-bottom: 1px;
|
margin-bottom: 1px;
|
||||||
a {
|
a {
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
margin-bottom: 1px;
|
margin-bottom: 1px;
|
||||||
}
|
}
|
||||||
&.selected {
|
&.selected {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-bottom: 1px solid nc-lighten($color-main-text, 20%);
|
border-bottom: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
border-bottom: 1px solid nc-lighten($color-main-text, 20%);
|
border-bottom: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
&.selected, &:hover {
|
&.selected, &:hover {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
a {
|
a {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -785,7 +799,7 @@ $popovericon-size: 16px;
|
||||||
.popovermenu, .popovermenu:after,
|
.popovermenu, .popovermenu:after,
|
||||||
#app-navigation .app-navigation-entry-menu,
|
#app-navigation .app-navigation-entry-menu,
|
||||||
#app-navigation .app-navigation-entry-menu:after {
|
#app-navigation .app-navigation-entry-menu:after {
|
||||||
border: 1px solid $color-border;
|
border: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -793,14 +807,14 @@ $popovericon-size: 16px;
|
||||||
.app-navigation-entry-menu,
|
.app-navigation-entry-menu,
|
||||||
.popovermenu {
|
.popovermenu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
z-index: 110;
|
z-index: 110;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
right: 0;
|
right: 0;
|
||||||
filter: drop-shadow(0 1px 3px $color-box-shadow);
|
filter: drop-shadow(0 1px 3px var(--color-box-shadow));
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
|
@ -815,7 +829,7 @@ $popovericon-size: 16px;
|
||||||
width: 0;
|
width: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
border-bottom-color: $color-main-background;
|
border-bottom-color: var(--color-main-background);
|
||||||
border-width: 10px;
|
border-width: 10px;
|
||||||
}
|
}
|
||||||
/* Center the popover */
|
/* Center the popover */
|
||||||
|
@ -865,7 +879,7 @@ $popovericon-size: 16px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
/* Override the app-navigation li opacity */
|
/* Override the app-navigation li opacity */
|
||||||
opacity: .7 !important;
|
opacity: .7 !important;
|
||||||
span[class^='icon-'],
|
span[class^='icon-'],
|
||||||
|
@ -1013,7 +1027,7 @@ $popovericon-size: 16px;
|
||||||
/* CONTENT LIST ------------------------------------------------------------- */
|
/* CONTENT LIST ------------------------------------------------------------- */
|
||||||
.app-content-list {
|
.app-content-list {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
border-right: 1px solid nc-darken($color-main-background, 8%);
|
border-right: 1px solid var(--color-border);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
transition: transform 250ms ease-in-out;
|
transition: transform 250ms ease-in-out;
|
||||||
|
@ -1022,7 +1036,7 @@ $popovericon-size: 16px;
|
||||||
.app-content-list-item {
|
.app-content-list-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 68px;
|
height: 68px;
|
||||||
border-top: 1px solid nc-darken($color-main-background, 8%);
|
border-top: 1px solid var(--color-border);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 10px 7px;
|
padding: 10px 7px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -1061,7 +1075,7 @@ $popovericon-size: 16px;
|
||||||
|
|
||||||
&:hover, &:focus,
|
&:hover, &:focus,
|
||||||
&.active {
|
&.active {
|
||||||
background-color: nc-darken($color-main-background, 6%);
|
background-color: var(--color-background-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-content-list-item-checkbox.checkbox + label,
|
.app-content-list-item-checkbox.checkbox + label,
|
||||||
|
@ -1177,14 +1191,14 @@ $popovericon-size: 16px;
|
||||||
/* full width for message list on mobile */
|
/* full width for message list on mobile */
|
||||||
.app-content-list {
|
.app-content-list {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: $color-main-background;
|
background: var(--color-main-background);
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* overlay message detail on top of message list */
|
/* overlay message detail on top of message list */
|
||||||
.app-content-detail {
|
.app-content-detail {
|
||||||
background: $color-main-background;
|
background: var(--color-main-background);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
// CSS4 Variables
|
||||||
|
// Remember, you cannot use scss functions with css4 variables
|
||||||
|
// All css4 variables must be fixed! Scss is a PRE processor
|
||||||
|
// css4 variables are processed after scss!
|
||||||
|
:root {
|
||||||
|
--color-main-text: $color-main-text;
|
||||||
|
--color-main-background: $color-main-background;
|
||||||
|
|
||||||
|
--color-background-dark: $color-background-dark;
|
||||||
|
--color-background-darker: $color-background-darker;
|
||||||
|
|
||||||
|
--color-primary: $color-primary;
|
||||||
|
--color-primary-text: $color-primary-text;
|
||||||
|
--color-primary-text-dark: $color-primary-text-dark;
|
||||||
|
--color-primary-element: $color-primary-element;
|
||||||
|
--color-primary-element-light: $color-primary-element-light;
|
||||||
|
|
||||||
|
--color-error: $color-error;
|
||||||
|
--color-warning: $color-warning;
|
||||||
|
--color-success: $color-success;
|
||||||
|
|
||||||
|
--color-text-maxcontrast: $color-text-maxcontrast;
|
||||||
|
--color-text-light: $color-text-light;
|
||||||
|
--color-text-lighter: $color-text-lighter;
|
||||||
|
|
||||||
|
--image-logo: $image-logo;
|
||||||
|
--image-login-background: $image-login-background;
|
||||||
|
|
||||||
|
--color-loading-light: $color-loading-light;
|
||||||
|
--color-loading-dark: $color-loading-dark;
|
||||||
|
|
||||||
|
--color-box-shadow: $color-box-shadow;
|
||||||
|
|
||||||
|
--color-border: $color-border;
|
||||||
|
--color-border-dark: $color-border-dark;
|
||||||
|
--border-radius: $border-radius;
|
||||||
|
|
||||||
|
--font-face: $font-face;
|
||||||
|
}
|
|
@ -22,5 +22,5 @@ select {
|
||||||
.ie .ui-timepicker.ui-widget,
|
.ie .ui-timepicker.ui-widget,
|
||||||
.ie #appmenu li span,
|
.ie #appmenu li span,
|
||||||
.ie .tooltip-inner {
|
.ie .tooltip-inner {
|
||||||
box-shadow: 0 1px 10px $color-box-shadow;
|
box-shadow: 0 1px 10px var(--color-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,8 @@
|
||||||
font-family: 'Open Sans';
|
font-family: 'Open Sans';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans-Regular.woff') format('woff');
|
src: local('Open Sans'), local('OpenSans'),
|
||||||
|
url('../fonts/OpenSans-Regular.woff') format('woff');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -12,12 +13,14 @@
|
||||||
font-family: 'Open Sans';
|
font-family: 'Open Sans';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
src: local('Open Sans Light'), local('OpenSans-Light'), url('../fonts/OpenSans-Light.woff') format('woff');
|
src: local('Open Sans Light'), local('OpenSans-Light'),
|
||||||
|
url('../fonts/OpenSans-Light.woff') format('woff');
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Open Sans';
|
font-family: 'Open Sans';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('../fonts/OpenSans-Semibold.woff') format('woff');
|
src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
|
||||||
|
url('../fonts/OpenSans-Semibold.woff') format('woff');
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
&:focus {
|
&:focus {
|
||||||
left: 76px;
|
left: 76px;
|
||||||
top: -9px;
|
top: -9px;
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
@ -50,7 +50,7 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-color: $color-primary;
|
background-color: var(--color-primary);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
@ -72,8 +72,8 @@
|
||||||
#header {
|
#header {
|
||||||
/* Header menu */
|
/* Header menu */
|
||||||
.menu {
|
.menu {
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
filter: drop-shadow(0 1px 10px $color-box-shadow);
|
filter: drop-shadow(0 1px 5px var(--color-box-shadow));
|
||||||
border-radius: 0 0 3px 3px;
|
border-radius: 0 0 3px 3px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
|
@ -91,7 +91,7 @@
|
||||||
/* Dropdown arrow */
|
/* Dropdown arrow */
|
||||||
&:after {
|
&:after {
|
||||||
border: 10px solid transparent;
|
border: 10px solid transparent;
|
||||||
border-bottom-color: $color-main-background;
|
border-bottom-color: var(--color-main-background);
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
content: ' ';
|
content: ' ';
|
||||||
height: 0;
|
height: 0;
|
||||||
|
@ -103,7 +103,7 @@
|
||||||
}
|
}
|
||||||
.logo {
|
.logo {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
background-image: url($image-logo);
|
background-image: var(--image-logo);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
@ -207,7 +207,7 @@
|
||||||
.header-appname {
|
.header-appname {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -239,8 +239,8 @@ nav[role='navigation'] {
|
||||||
.header-left #navigation,
|
.header-left #navigation,
|
||||||
.ui-datepicker,
|
.ui-datepicker,
|
||||||
.ui-timepicker.ui-widget {
|
.ui-timepicker.ui-widget {
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
filter: drop-shadow(0 1px 10px $color-box-shadow);
|
filter: drop-shadow(0 1px 10px var(--color-box-shadow));
|
||||||
&:after {
|
&:after {
|
||||||
/* position of dropdown arrow */
|
/* position of dropdown arrow */
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
@ -252,7 +252,7 @@ nav[role='navigation'] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
border-color: rgba(0, 0, 0, 0);
|
border-color: rgba(0, 0, 0, 0);
|
||||||
border-bottom-color: $color-main-background;
|
border-bottom-color: var(--color-main-background);
|
||||||
border-width: 10px;
|
border-width: 10px;
|
||||||
margin-left: -10px; /* border width */
|
margin-left: -10px; /* border width */
|
||||||
}
|
}
|
||||||
|
@ -276,7 +276,7 @@ nav[role='navigation'] {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
@ -340,7 +340,6 @@ nav[role='navigation'] {
|
||||||
#settings {
|
#settings {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: rgba($color-primary-text, 0.7);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
|
||||||
|
@ -356,7 +355,7 @@ nav[role='navigation'] {
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
|
|
||||||
img, #expandDisplayName {
|
img, #expandDisplayName {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
@ -397,7 +396,7 @@ nav[role='navigation'] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
border: 0 solid transparent;
|
border: 0 solid transparent;
|
||||||
border-bottom-color: $color-main-background;
|
border-bottom-color: var(--color-main-background);
|
||||||
border-width: 10px;
|
border-width: 10px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
@ -414,7 +413,7 @@ nav[role='navigation'] {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
opacity: .7;
|
opacity: .7;
|
||||||
|
@ -434,7 +433,7 @@ nav[role='navigation'] {
|
||||||
&:active,
|
&:active,
|
||||||
&.active {
|
&.active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
box-shadow: inset 4px 0 $color-primary;
|
box-shadow: inset 4px 0 var(--color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -494,19 +493,19 @@ nav[role='navigation'] {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
color: rgba($color-main-text, .7);
|
color: var(--color-text-lighter);
|
||||||
width: auto;
|
width: auto;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
filter: drop-shadow(0 1px 10px $color-box-shadow);
|
filter: drop-shadow(0 1px 10px var(--color-box-shadow));
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -523,7 +522,7 @@ nav[role='navigation'] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
border: 0 solid transparent;
|
border: 0 solid transparent;
|
||||||
border-bottom-color: $color-main-background;
|
border-bottom-color: var(--color-main-background);
|
||||||
border-width: 10px;
|
border-width: 10px;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|
|
@ -25,7 +25,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* LOADING ------------------------------------------------------------------ */
|
/* LOADING ------------------------------------------------------------------ */
|
||||||
.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark {
|
.loading,
|
||||||
|
.loading-small,
|
||||||
|
.icon-loading,
|
||||||
|
.icon-loading-dark,
|
||||||
|
.icon-loading-small,
|
||||||
|
.icon-loading-small-dark {
|
||||||
position: relative;
|
position: relative;
|
||||||
&:after {
|
&:after {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
@ -42,15 +47,15 @@
|
||||||
-webkit-transform-origin: center;
|
-webkit-transform-origin: center;
|
||||||
-ms-transform-origin: center;
|
-ms-transform-origin: center;
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
border: 2px solid rgba($color-loading, 0.5);
|
border: 2px solid var(--color-loading-light);
|
||||||
border-top-color: $color-loading;
|
border-top-color: var(--color-loading-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-loading-dark:after,
|
.icon-loading-dark:after,
|
||||||
.icon-loading-small-dark:after {
|
.icon-loading-small-dark:after {
|
||||||
border: 2px solid rgba($color-loading-dark, 0.5);
|
border: 2px solid var(--color-loading-dark);
|
||||||
border-top-color: $color-loading-dark;
|
border-top-color: var(--color-loading-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-loading-small:after,
|
.icon-loading-small:after,
|
||||||
|
@ -61,7 +66,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Css replaced elements don't have ::after nor ::before */
|
/* Css replaced elements don't have ::after nor ::before */
|
||||||
img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
img, object, video, button, textarea, input, select, div[contenteditable='true'] {
|
||||||
.icon-loading {
|
.icon-loading {
|
||||||
background-image: url('../img/loading.gif');
|
background-image: url('../img/loading.gif');
|
||||||
}
|
}
|
||||||
|
@ -92,7 +97,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
.icon-white {
|
.icon-white {
|
||||||
filter: invert(100%);
|
filter: invert(100%);
|
||||||
&.icon-shadow {
|
&.icon-shadow {
|
||||||
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
|
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -112,7 +117,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
/* TODO: to be deprecated; use .icon-audio.icon-white.icon-shadow */
|
/* TODO: to be deprecated; use .icon-audio.icon-white.icon-shadow */
|
||||||
.icon-audio-white {
|
.icon-audio-white {
|
||||||
background-image: url('../img/actions/audio.svg?v=2');
|
background-image: url('../img/actions/audio.svg?v=2');
|
||||||
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
|
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-audio-off {
|
.icon-audio-off {
|
||||||
|
@ -122,7 +127,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
/* TODO: to be deprecated; use .icon-audio-off.icon-white.icon-shadow */
|
/* TODO: to be deprecated; use .icon-audio-off.icon-white.icon-shadow */
|
||||||
.icon-audio-off-white {
|
.icon-audio-off-white {
|
||||||
background-image: url('../img/actions/audio-off.svg?v=1');
|
background-image: url('../img/actions/audio-off.svg?v=1');
|
||||||
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
|
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-caret {
|
.icon-caret {
|
||||||
|
@ -176,11 +181,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
.icon-delete {
|
.icon-delete {
|
||||||
background-image: url('../img/actions/delete.svg?v=1');
|
background-image: url('../img/actions/delete.svg?v=1');
|
||||||
&.no-permission {
|
&.no-permission {
|
||||||
&:hover, &:focus {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
background-image: url('../img/actions/delete.svg?v=1');
|
background-image: url('../img/actions/delete.svg?v=1');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover, &:focus {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
background-image: url('../img/actions/delete-hover.svg?v=1');
|
background-image: url('../img/actions/delete-hover.svg?v=1');
|
||||||
filter: initial;
|
filter: initial;
|
||||||
}
|
}
|
||||||
|
@ -189,11 +196,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
.icon-delete-white {
|
.icon-delete-white {
|
||||||
background-image: url('../img/actions/delete-white.svg?v=1');
|
background-image: url('../img/actions/delete-white.svg?v=1');
|
||||||
&.no-permission {
|
&.no-permission {
|
||||||
&:hover, &:focus {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
background-image: url('../img/actions/delete-white.svg?v=1');
|
background-image: url('../img/actions/delete-white.svg?v=1');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover, &:focus {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
background-image: url('../img/actions/delete-hover.svg?v=1');
|
background-image: url('../img/actions/delete-hover.svg?v=1');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -237,7 +246,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
/* TODO: to be deprecated; use .icon-fullscreen.icon-white.icon-shadow */
|
/* TODO: to be deprecated; use .icon-fullscreen.icon-white.icon-shadow */
|
||||||
.icon-fullscreen-white {
|
.icon-fullscreen-white {
|
||||||
background-image: url('../img/actions/fullscreen.svg?v=1');
|
background-image: url('../img/actions/fullscreen.svg?v=1');
|
||||||
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
|
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-history {
|
.icon-history {
|
||||||
|
@ -315,7 +324,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
/* TODO: to be deprecated; use .icon-screen.icon-white.icon-shadow */
|
/* TODO: to be deprecated; use .icon-screen.icon-white.icon-shadow */
|
||||||
.icon-screen-white {
|
.icon-screen-white {
|
||||||
background-image: url('../img/actions/screen.svg?v=1');
|
background-image: url('../img/actions/screen.svg?v=1');
|
||||||
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
|
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-screen-off {
|
.icon-screen-off {
|
||||||
|
@ -325,7 +334,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
/* TODO: to be deprecated; use .icon-screen-off.icon-white.icon-shadow */
|
/* TODO: to be deprecated; use .icon-screen-off.icon-white.icon-shadow */
|
||||||
.icon-screen-off-white {
|
.icon-screen-off-white {
|
||||||
background-image: url('../img/actions/screen-off.svg?v=1');
|
background-image: url('../img/actions/screen-off.svg?v=1');
|
||||||
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
|
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-search {
|
.icon-search {
|
||||||
|
@ -375,14 +384,16 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-starred {
|
.icon-starred {
|
||||||
&:hover, &:focus {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
background-image: url('../img/actions/star.svg?v=1');
|
background-image: url('../img/actions/star.svg?v=1');
|
||||||
}
|
}
|
||||||
background-image: url('../img/actions/starred.svg?v=1');
|
background-image: url('../img/actions/starred.svg?v=1');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-star {
|
.icon-star {
|
||||||
&:hover, &:focus {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
background-image: url('../img/actions/starred.svg?v=1');
|
background-image: url('../img/actions/starred.svg?v=1');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -434,7 +445,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
|
/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
|
||||||
.icon-video-white {
|
.icon-video-white {
|
||||||
background-image: url('../img/actions/video.svg?v=2');
|
background-image: url('../img/actions/video.svg?v=2');
|
||||||
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
|
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-video-off {
|
.icon-video-off {
|
||||||
|
@ -444,7 +455,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
|
/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
|
||||||
.icon-video-off-white {
|
.icon-video-off-white {
|
||||||
background-image: url('../img/actions/video-off.svg?v=1');
|
background-image: url('../img/actions/video-off.svg?v=1');
|
||||||
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
|
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-video-switch {
|
.icon-video-switch {
|
||||||
|
@ -500,11 +511,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
background-image: url('../img/places/files-dark.svg?v=1');
|
background-image: url('../img/places/files-dark.svg?v=1');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-file, .icon-filetype-text {
|
.icon-file,
|
||||||
|
.icon-filetype-text {
|
||||||
background-image: url('../img/filetypes/text.svg?v=1');
|
background-image: url('../img/filetypes/text.svg?v=1');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-folder, .icon-filetype-folder {
|
.icon-folder,
|
||||||
|
.icon-filetype-folder {
|
||||||
background-image: url('../img/filetypes/folder.svg?v=1');
|
background-image: url('../img/filetypes/folder.svg?v=1');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -614,4 +627,3 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
.icon-category-search {
|
.icon-category-search {
|
||||||
background-image: url('../img/actions/search.svg?v=1');
|
background-image: url('../img/actions/search.svg?v=1');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,10 +14,10 @@
|
||||||
|
|
||||||
/* Specifically override browser styles */
|
/* Specifically override browser styles */
|
||||||
input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
|
input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
|
||||||
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
|
font-family: var(--font-face)
|
||||||
}
|
}
|
||||||
.select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
|
.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;
|
font-family: var(--font-face) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Simple selector to allow easy overriding */
|
/* Simple selector to allow easy overriding */
|
||||||
|
@ -32,6 +32,13 @@ div[contenteditable=false] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* color-text-lighter normal state
|
||||||
|
* color-text-lighter active state
|
||||||
|
* color-text-maxcontrast disabled state
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
/* Default global values */
|
/* Default global values */
|
||||||
select,
|
select,
|
||||||
button, .button,
|
button, .button,
|
||||||
|
@ -42,28 +49,29 @@ div[contenteditable=true],
|
||||||
margin: 3px 3px 3px 0;
|
margin: 3px 3px 3px 0;
|
||||||
padding: 7px 6px;
|
padding: 7px 6px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
border: 1px solid nc-darken($color-main-background, 14%);
|
border: 1px solid var(--color-border-dark);
|
||||||
outline: none;
|
outline: none;
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
cursor: text;
|
cursor: text;
|
||||||
&:not(:disabled):not(.primary) {
|
&:not(:disabled):not(.primary) {
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&.active {
|
&.active {
|
||||||
/* active class used for multiselect */
|
/* active class used for multiselect */
|
||||||
border-color: $color-primary-element;
|
border-color: var(--color-primary-element);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
|
color: var(--color-text-light);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:disabled {
|
&:disabled {
|
||||||
background-color: nc-darken($color-main-background, 8%);
|
background-color: var(--color-background-dark);
|
||||||
color: rgba($color-main-text, 0.4);
|
color: var(--color-text-maxcontrast);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
@ -72,26 +80,28 @@ div[contenteditable=true],
|
||||||
}
|
}
|
||||||
&:invalid {
|
&:invalid {
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
border-color: $color-error;
|
border-color: var(--color-error);
|
||||||
}
|
}
|
||||||
/* Primary action button, use sparingly */
|
/* Primary action button, use sparingly */
|
||||||
&.primary {
|
&.primary {
|
||||||
background-color: $color-primary-element;
|
background-color: var(--color-primary-element);
|
||||||
border: 1px solid $color-primary-text;
|
border: 1px solid var(--color-primary-text);
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&:not(:disabled) {
|
&:not(:disabled) {
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus,
|
||||||
background-color: rgba($color-primary-element, .85);
|
&:active {
|
||||||
|
background-color: var(--color-primary-element-light)
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
background-color: rgba($color-primary-element, .7);
|
color: var(--color-primary-text-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:disabled {
|
&:disabled {
|
||||||
background-color: rgba($color-primary-element, .7);
|
// opacity is already defined to .5 if disabled
|
||||||
color: nc-lighten($color-main-text, 73%);
|
background-color: var(--color-primary-element);
|
||||||
|
color: var(--color-primary-text-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -100,15 +110,15 @@ div[contenteditable=false] {
|
||||||
margin: 3px 3px 3px 0;
|
margin: 3px 3px 3px 0;
|
||||||
padding: 7px 6px;
|
padding: 7px 6px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
border: 1px solid nc-darken($color-main-background, 14%);
|
border: 1px solid var(--color-background-darker);
|
||||||
outline: none;
|
outline: none;
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
cursor: text;
|
cursor: text;
|
||||||
|
|
||||||
background-color: nc-darken($color-main-background, 8%);
|
background-color: var(--color-background-dark);
|
||||||
color: rgba($color-main-text, 0.4);
|
color: var(--color-text-lighter);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
@ -155,7 +165,7 @@ input[type='reset'] {
|
||||||
min-height: 34px;
|
min-height: 34px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: nc-darken($color-main-background, 3%);
|
background-color: var(--color-background-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Buttons */
|
/* Buttons */
|
||||||
|
@ -182,7 +192,7 @@ button, .button {
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea, div[contenteditable=true] {
|
textarea, div[contenteditable=true] {
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
cursor: text;
|
cursor: text;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
@ -190,14 +200,14 @@ textarea, div[contenteditable=true] {
|
||||||
&:active,
|
&:active,
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: nc-darken($color-main-background, 14%) !important;
|
border-color: var(--color-background-darker) !important;
|
||||||
background-color: $color-main-background !important;
|
background-color: var(--color-main-background) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div[contenteditable=false] {
|
div[contenteditable=false] {
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
cursor: text;
|
cursor: text;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
@ -222,10 +232,10 @@ input {
|
||||||
+ .icon-confirm {
|
+ .icon-confirm {
|
||||||
margin-left: -8px !important;
|
margin-left: -8px !important;
|
||||||
border-left-color: transparent !important;
|
border-left-color: transparent !important;
|
||||||
border-radius: 0 $border-radius $border-radius 0 !important;
|
border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
/* Avoid background under border */
|
/* Avoid background under border */
|
||||||
background-color: $color-main-background !important;
|
background-color: var(--color-main-background) !important;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
width: 34px;
|
width: 34px;
|
||||||
padding: 7px 6px;
|
padding: 7px 6px;
|
||||||
|
@ -242,10 +252,10 @@ input {
|
||||||
&:active,
|
&:active,
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $color-primary-element !important;
|
border-color: var(--color-primary-element) !important;
|
||||||
border-radius: $border-radius !important;
|
border-radius: var(--border-radius) !important;
|
||||||
&:disabled {
|
&:disabled {
|
||||||
border-color: nc-darken($color-main-background, 14%) !important;
|
border-color: var(--color-background-darker) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -255,11 +265,11 @@ input {
|
||||||
&:focus {
|
&:focus {
|
||||||
&:invalid {
|
&:invalid {
|
||||||
+ .icon-confirm {
|
+ .icon-confirm {
|
||||||
border-color: $color-error;
|
border-color: var(--color-error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+ .icon-confirm {
|
+ .icon-confirm {
|
||||||
border-color: $color-primary-element !important;
|
border-color: var(--color-primary-element) !important;
|
||||||
border-left-color: transparent !important;
|
border-left-color: transparent !important;
|
||||||
/* above previous input */
|
/* above previous input */
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
@ -280,9 +290,11 @@ select,
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Radio & Checkboxes */
|
/* Radio & Checkboxes */
|
||||||
|
input, label {
|
||||||
|
--color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
|
||||||
|
--color-checkbox-radio-border: nc-darken($color-main-background, 47%);
|
||||||
|
}
|
||||||
input {
|
input {
|
||||||
$color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
|
|
||||||
$color-checkbox-radio-border: nc-darken($color-main-background, 47%);
|
|
||||||
&[type='checkbox'],
|
&[type='checkbox'],
|
||||||
&[type='radio'] {
|
&[type='radio'] {
|
||||||
&.radio,
|
&.radio,
|
||||||
|
@ -309,26 +321,26 @@ input {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
border: 1px solid $color-checkbox-radio-border;
|
border: 1px solid var(--color-checkbox-radio-border);
|
||||||
}
|
}
|
||||||
&:not(:disabled):not(:checked) + label:hover:before,
|
&:not(:disabled):not(:checked) + label:hover:before,
|
||||||
&:focus + label:before {
|
&:focus + label:before {
|
||||||
border-color: $color-primary-element;
|
border-color: var(--color-primary-element);
|
||||||
}
|
}
|
||||||
&:checked + label:before,
|
&:checked + label:before,
|
||||||
&.checkbox:indeterminate + label:before {
|
&.checkbox:indeterminate + label:before {
|
||||||
/* ^ :indeterminate have a strange behavior on radio,
|
/* ^ :indeterminate have a strange behavior on radio,
|
||||||
so we respecified the checkbox class again to be safe */
|
so we respecified the checkbox class again to be safe */
|
||||||
box-shadow: inset 0px 0px 0px 2px $color-main-background;
|
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
|
||||||
background-color: $color-primary-element;
|
background-color: var(--color-primary-element);
|
||||||
border-color: $color-primary-element;
|
border-color: var(--color-primary-element);
|
||||||
}
|
}
|
||||||
&:disabled + label:before {
|
&:disabled + label:before {
|
||||||
border: 1px solid $color-checkbox-radio-border;
|
border: 1px solid var(--color-checkbox-radio-border);
|
||||||
background-color: $color-checkbox-radio-disabled !important; /* override other status */
|
background-color: var(--color-checkbox-radio-disabled) !important; /* override other status */
|
||||||
}
|
}
|
||||||
&:checked:disabled + label:before {
|
&:checked:disabled + label:before {
|
||||||
background-color: $color-checkbox-radio-disabled;
|
background-color: var(--color-checkbox-radio-disabled);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.checkbox {
|
&.checkbox {
|
||||||
|
@ -347,7 +359,7 @@ input {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* We do not use the nc-darken function as this si not supposed to be changed */
|
/* We do not use the nc-darken function as this is not supposed to be changed */
|
||||||
$color-checkbox-radio-white: #fff;
|
$color-checkbox-radio-white: #fff;
|
||||||
&.radio--white,
|
&.radio--white,
|
||||||
&.checkbox--white {
|
&.checkbox--white {
|
||||||
|
@ -359,7 +371,7 @@ input {
|
||||||
border-color: $color-checkbox-radio-white;
|
border-color: $color-checkbox-radio-white;
|
||||||
}
|
}
|
||||||
&:checked + label:before {
|
&:checked + label:before {
|
||||||
box-shadow: inset 0px 0px 0px 2px $color-main-background;
|
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
|
||||||
background-color: darken($color-checkbox-radio-white, 14%);
|
background-color: darken($color-checkbox-radio-white, 14%);
|
||||||
border-color: darken($color-checkbox-radio-white, 14%);
|
border-color: darken($color-checkbox-radio-white, 14%);
|
||||||
}
|
}
|
||||||
|
@ -368,7 +380,7 @@ input {
|
||||||
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
|
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
|
||||||
}
|
}
|
||||||
&:checked:disabled + label:before {
|
&:checked:disabled + label:before {
|
||||||
box-shadow: inset 0px 0px 0px 2px $color-main-background;
|
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
|
||||||
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
|
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
|
||||||
background-color: darken($color-checkbox-radio-white, 27%);
|
background-color: darken($color-checkbox-radio-white, 27%);
|
||||||
}
|
}
|
||||||
|
@ -393,9 +405,9 @@ input {
|
||||||
/* Select2 overriding. Merged to core with vendor stylesheet */
|
/* Select2 overriding. Merged to core with vendor stylesheet */
|
||||||
.select2-drop {
|
.select2-drop {
|
||||||
margin-top: -2px;
|
margin-top: -2px;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
&.select2-drop-active {
|
&.select2-drop-active {
|
||||||
border-color: nc-darken($color-main-background, 14%);
|
border-color: var(--color-border-dark);
|
||||||
}
|
}
|
||||||
.avatar {
|
.avatar {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -430,16 +442,16 @@ input {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
}
|
}
|
||||||
.select2-result {
|
.select2-result {
|
||||||
&.select2-selected {
|
&.select2-selected {
|
||||||
background-color: nc-darken($color-main-background, 3%);
|
background-color: var(--color-background-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.select2-highlighted {
|
.select2-highlighted {
|
||||||
background-color: nc-darken($color-main-background, 3%);
|
background-color: var(--color-background-dark);
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -456,11 +468,11 @@ input {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
background: $color-main-background;
|
background: var(--color-main-background);
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
border: 1px solid nc-darken($color-main-background, 14%);
|
border: 1px solid var(--color-border-dark);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 2px 0;
|
padding: 2px 0;
|
||||||
min-height: auto;
|
min-height: auto;
|
||||||
|
@ -472,9 +484,9 @@ input {
|
||||||
&:active,
|
&:active,
|
||||||
& {
|
& {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
border: 1px solid nc-darken($color-main-background, 14%);
|
border: 1px solid var(--color-border-dark);
|
||||||
}
|
}
|
||||||
.select2-search-choice-close {
|
.select2-search-choice-close {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -501,11 +513,11 @@ input {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
background: $color-main-background;
|
background: var(--color-main-background);
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
border: 1px solid nc-darken($color-main-background, 14%);
|
border: 1px solid var(--color-border-dark);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 2px 0;
|
padding: 2px 0;
|
||||||
padding-left: 6px;
|
padding-left: 6px;
|
||||||
|
@ -514,15 +526,15 @@ input {
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: nc-darken($color-main-background, 3%);
|
background-color: var(--color-background-dark);
|
||||||
border-color: nc-darken($color-main-background, 3%);
|
border-color: var(--color-background-dark);
|
||||||
.select2-search-choice-close {
|
.select2-search-choice-close {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
&.select2-search-choice-focus,
|
&.select2-search-choice-focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $color-border;
|
background-color: var(--color-border);
|
||||||
border-color: $color-border;
|
border-color: var(--color-border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.select2-arrow {
|
.select2-arrow {
|
||||||
|
@ -556,9 +568,9 @@ input {
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
border: 1px solid nc-darken($color-main-background, 14%);
|
border: 1px solid var(--color-border-dark);
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.close {
|
.close {
|
||||||
|
@ -574,7 +586,7 @@ input {
|
||||||
display: list-item;
|
display: list-item;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
a {
|
a {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -607,11 +619,11 @@ input {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.highlight {
|
&.highlight {
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
&.active > a {
|
&.active > a {
|
||||||
background-color: nc-darken($color-main-background, 3%);
|
background-color: var(--color-background-dark);
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
&::before {
|
&::before {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
@ -628,7 +640,7 @@ input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
&.multiselect--active {
|
&.multiselect--active {
|
||||||
/* Opened: force display the input */
|
/* Opened: force display the input */
|
||||||
input.multiselect__input {
|
input.multiselect__input {
|
||||||
|
@ -638,7 +650,7 @@ input {
|
||||||
}
|
}
|
||||||
&.multiselect--disabled,
|
&.multiselect--disabled,
|
||||||
&.multiselect--disabled .multiselect__single {
|
&.multiselect--disabled .multiselect__single {
|
||||||
background-color: nc-darken($color-main-background, 8%) !important;
|
background-color: var(--color-background-dark) !important;
|
||||||
}
|
}
|
||||||
.multiselect__tags {
|
.multiselect__tags {
|
||||||
/* space between tags and limit tag */
|
/* space between tags and limit tag */
|
||||||
|
@ -647,7 +659,7 @@ input {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid nc-darken($color-main-background, 14%);
|
border: 1px solid var(--color-border-dark);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
@ -676,8 +688,8 @@ input {
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
padding: 1px 5px;
|
padding: 1px 5px;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
border: 1px solid nc-darken($color-main-background, 14%);
|
border: 1px solid var(--color-border-dark);
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
@ -709,7 +721,7 @@ input {
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
flex: 0 0 100%;
|
flex: 0 0 100%;
|
||||||
z-index: 1; /* above input */
|
z-index: 1; /* above input */
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
/* displayed text if tag limit reached */
|
/* displayed text if tag limit reached */
|
||||||
|
@ -717,7 +729,7 @@ input {
|
||||||
.multiselect__limit {
|
.multiselect__limit {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
opacity: .7;
|
opacity: .7;
|
||||||
|
@ -745,8 +757,8 @@ input {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
border: 1px solid nc-darken($color-main-background, 14%);
|
border: 1px solid var(--color-border-dark);
|
||||||
background: $color-main-background;
|
background: var(--color-main-background);
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
max-height: 250px;
|
max-height: 250px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
@ -779,7 +791,7 @@ input {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/* selected checkmark icon */
|
/* selected checkmark icon */
|
||||||
&::before {
|
&::before {
|
||||||
|
@ -795,7 +807,7 @@ input {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
&.multiselect__option--disabled {
|
&.multiselect__option--disabled {
|
||||||
background-color: nc-darken($color-main-background, 8%);
|
background-color: var(--color-background-dark);
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
}
|
}
|
||||||
/* add the prop tag-placeholder="create" to add the +
|
/* add the prop tag-placeholder="create" to add the +
|
||||||
|
@ -808,7 +820,7 @@ input {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.multiselect__option--highlight {
|
&.multiselect__option--highlight {
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
&:not(.multiselect__option--disabled):hover::before {
|
&:not(.multiselect__option--disabled):hover::before {
|
||||||
opacity: .3;
|
opacity: .3;
|
||||||
|
@ -830,30 +842,30 @@ progress {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0 none;
|
border: 0 none;
|
||||||
background-color: nc-darken($color-main-background, 10%);
|
background-color: var(--color-background-dark);
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
&.warn {
|
&.warn {
|
||||||
&::-moz-progress-bar {
|
&::-moz-progress-bar {
|
||||||
background: $color-error;
|
background: var(--color-error);
|
||||||
}
|
}
|
||||||
&::-webkit-progress-value {
|
&::-webkit-progress-value {
|
||||||
background: $color-error;
|
background: var(--color-error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&::-webkit-progress-bar {
|
&::-webkit-progress-bar {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
&::-moz-progress-bar {
|
&::-moz-progress-bar {
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
background: $color-primary;
|
background: var(--color-primary);
|
||||||
transition: 250ms all ease-in-out;
|
transition: 250ms all ease-in-out;
|
||||||
}
|
}
|
||||||
&::-webkit-progress-value {
|
&::-webkit-progress-value {
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
background: $color-primary;
|
background: var(--color-primary);
|
||||||
transition: 250ms all ease-in-out;
|
transition: 250ms all ease-in-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,20 +1,20 @@
|
||||||
/* Component containers
|
/* Component containers
|
||||||
----------------------------------*/
|
----------------------------------*/
|
||||||
.ui-widget-content {
|
.ui-widget-content {
|
||||||
border: 1px solid nc-darken($color-main-background, 20%);
|
border: 1px solid var(--color-border);
|
||||||
background: $color-main-background none;
|
background: var(--color-main-background) none;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
.ui-widget-content a {
|
.ui-widget-content a {
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
.ui-widget-header {
|
.ui-widget-header {
|
||||||
border: none;
|
border: none;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
.ui-widget-header a {
|
.ui-widget-header a {
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Interaction states
|
/* Interaction states
|
||||||
|
@ -22,8 +22,8 @@
|
||||||
.ui-state-default,
|
.ui-state-default,
|
||||||
.ui-widget-content .ui-state-default,
|
.ui-widget-content .ui-state-default,
|
||||||
.ui-widget-header .ui-state-default {
|
.ui-widget-header .ui-state-default {
|
||||||
border: 1px solid nc-darken($color-main-background, 20%);
|
border: 1px solid var(--color-border);
|
||||||
background: $color-main-background none;
|
background: var(--color-main-background) none;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #555;
|
color: #555;
|
||||||
}
|
}
|
||||||
|
@ -39,28 +39,28 @@
|
||||||
.ui-widget-content .ui-state-focus,
|
.ui-widget-content .ui-state-focus,
|
||||||
.ui-widget-header .ui-state-focus {
|
.ui-widget-header .ui-state-focus {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
background: $color-main-background none;
|
background: var(--color-main-background) none;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
.ui-state-hover a,
|
.ui-state-hover a,
|
||||||
.ui-state-hover a:hover,
|
.ui-state-hover a:hover,
|
||||||
.ui-state-hover a:link,
|
.ui-state-hover a:link,
|
||||||
.ui-state-hover a:visited {
|
.ui-state-hover a:visited {
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
.ui-state-active,
|
.ui-state-active,
|
||||||
.ui-widget-content .ui-state-active,
|
.ui-widget-content .ui-state-active,
|
||||||
.ui-widget-header .ui-state-active {
|
.ui-widget-header .ui-state-active {
|
||||||
border: 1px solid $color-primary;
|
border: 1px solid var(--color-primary);
|
||||||
background: $color-main-background none;
|
background: var(--color-main-background) none;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
.ui-state-active a,
|
.ui-state-active a,
|
||||||
.ui-state-active a:link,
|
.ui-state-active a:link,
|
||||||
.ui-state-active a:visited {
|
.ui-state-active a:visited {
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Interaction Cues
|
/* Interaction Cues
|
||||||
|
@ -68,20 +68,20 @@
|
||||||
.ui-state-highlight,
|
.ui-state-highlight,
|
||||||
.ui-widget-content .ui-state-highlight,
|
.ui-widget-content .ui-state-highlight,
|
||||||
.ui-widget-header .ui-state-highlight {
|
.ui-widget-header .ui-state-highlight {
|
||||||
border: 1px solid $color-main-background;
|
border: 1px solid var(--color-main-background);
|
||||||
background: $color-main-background none;
|
background: var(--color-main-background) none;
|
||||||
color: nc-lighten($color-main-text, 30%);
|
color: var(--color-text-lighter);
|
||||||
}
|
}
|
||||||
.ui-state-highlight a,
|
.ui-state-highlight a,
|
||||||
.ui-widget-content .ui-state-highlight a,
|
.ui-widget-content .ui-state-highlight a,
|
||||||
.ui-widget-header .ui-state-highlight a {
|
.ui-widget-header .ui-state-highlight a {
|
||||||
color: nc-lighten($color-main-text, 30%);
|
color: var(--color-text-lighter);
|
||||||
}
|
}
|
||||||
.ui-state-error,
|
.ui-state-error,
|
||||||
.ui-widget-content .ui-state-error,
|
.ui-widget-content .ui-state-error,
|
||||||
.ui-widget-header .ui-state-error {
|
.ui-widget-header .ui-state-error {
|
||||||
border: $color-error;
|
border: var(--color-error);
|
||||||
background: $color-error none;
|
background: var(--color-error) none;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
.ui-state-error a,
|
.ui-state-error a,
|
||||||
|
@ -154,10 +154,10 @@
|
||||||
.ui-state-hover,
|
.ui-state-hover,
|
||||||
.ui-state-active {
|
.ui-state-active {
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 1px solid $color-main-text;
|
border-bottom: 1px solid var(--color-main-text);
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
a, a:link, a:hover, a:visited {
|
a, a:link, a:hover, a:visited {
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ui-state-active {
|
.ui-state-active {
|
||||||
|
@ -178,7 +178,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-widget-content {
|
&.ui-widget-content {
|
||||||
background: $color-main-background;
|
background: var(--color-main-background);
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -191,13 +191,13 @@
|
||||||
.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 transparent;
|
border: 1px solid transparent;
|
||||||
background: inherit;
|
background: inherit;
|
||||||
color: $color-primary-element;
|
color: var(--color-primary-element);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-button.primary {
|
.ui-button.primary {
|
||||||
background-color: $color-primary;
|
background-color: var(--color-primary);
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
border: 1px solid $color-primary-text;
|
border: 1px solid var(--color-primary-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
.oc-dialog {
|
.oc-dialog {
|
||||||
background: $color-main-background;
|
background: var(--color-main-background);
|
||||||
color: nc-darken($color-main-text, 20%);
|
color: var(--color-text-light);
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
box-shadow: 0 0 7px $color-box-shadow;
|
box-shadow: 0 0 7px var(--color-box-shadow);
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
.oc-dialog-title {
|
.oc-dialog-title {
|
||||||
background: $color-main-background;
|
background: var(--color-main-background);
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
.oc-dialog-buttonrow {
|
.oc-dialog-buttonrow {
|
||||||
|
@ -29,7 +29,7 @@
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-image: linear-gradient(rgba(255, 255, 255, 0.0), $color-main-background);
|
background-image: linear-gradient(rgba(255, 255, 255, 0.0), var(--color-main-background));
|
||||||
border-bottom-left-radius: 3px;
|
border-bottom-left-radius: 3px;
|
||||||
border-bottom-right-radius: 3px;
|
border-bottom-right-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -53,7 +53,7 @@
|
||||||
#app-content {
|
#app-content {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
left: 0 !important;
|
left: 0 !important;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
overflow-x: hidden !important;
|
overflow-x: hidden !important;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
@ -72,7 +72,7 @@
|
||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
z-index: 149;
|
z-index: 149;
|
||||||
background-color: rgba($color-main-background, .7);
|
background-color: var(--color-main-background-darker);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: .6;
|
opacity: .6;
|
||||||
}
|
}
|
||||||
|
@ -149,7 +149,7 @@ table.multiselect thead {
|
||||||
}
|
}
|
||||||
&::after {
|
&::after {
|
||||||
border: 10px solid transparent;
|
border: 10px solid transparent;
|
||||||
border-bottom-color: $color-main-background;
|
border-bottom-color: var(--color-main-background);
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
content: ' ';
|
content: ' ';
|
||||||
height: 0;
|
height: 0;
|
||||||
|
|
|
@ -17,10 +17,10 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
ul.multiselectoptions {
|
ul.multiselectoptions {
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
border: 1px solid $color-primary;
|
border: 1px solid var(--color-primary);
|
||||||
border-top: none;
|
border-top: none;
|
||||||
box-shadow: 0 1px 10px $color-box-shadow;
|
box-shadow: 0 1px 10px var(--color-box-shadow);
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
max-height: 20em;
|
max-height: 20em;
|
||||||
|
@ -31,7 +31,7 @@ ul.multiselectoptions {
|
||||||
border-bottom-right-radius: 3px;
|
border-bottom-right-radius: 3px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/* do not cut off group names */
|
/* do not cut off group names */
|
||||||
box-shadow: 0 1px 10px $color-box-shadow;
|
box-shadow: 0 1px 10px var(--color-box-shadow);
|
||||||
}
|
}
|
||||||
&.up {
|
&.up {
|
||||||
border-top-left-radius: 3px;
|
border-top-left-radius: 3px;
|
||||||
|
@ -95,7 +95,7 @@ select.multiselect {
|
||||||
/* To make a select look like a multiselect until it's initialized */
|
/* To make a select look like a multiselect until it's initialized */
|
||||||
div.multiselect {
|
div.multiselect {
|
||||||
&.active {
|
&.active {
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 150;
|
z-index: 150;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
.header-right {
|
.header-right {
|
||||||
|
|
||||||
#header-primary-action a {
|
#header-primary-action a {
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menutoggle,
|
.menutoggle,
|
||||||
|
@ -10,7 +10,7 @@
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
padding-right: 40px;
|
padding-right: 40px;
|
||||||
background-position: right 15px center;
|
background-position: right 15px center;
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -59,9 +59,8 @@
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
.error {
|
.error {
|
||||||
color: $color-error;
|
color: var(--color-error);
|
||||||
border-color: $color-error;
|
border-color: var(--color-error);
|
||||||
box-shadow: 0 0 6px rgba($color-error, 0.35);
|
|
||||||
}
|
}
|
||||||
.mailView .icon-mail {
|
.mailView .icon-mail {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
@ -131,7 +130,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#link {
|
#link {
|
||||||
border-top: 1px solid nc-darken($color-main-background, 14%);
|
border-top: 1px solid var(--color-border);
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
#showPassword img {
|
#showPassword img {
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
|
@ -173,7 +172,7 @@
|
||||||
.notCreatable {
|
.notCreatable {
|
||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
color: rgba($color-main-text, .4);
|
color: var(--color-text-lighter);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contactsmenu-popover {
|
.contactsmenu-popover {
|
||||||
|
|
|
@ -54,7 +54,7 @@ table, td, th {
|
||||||
|
|
||||||
a {
|
a {
|
||||||
border: 0;
|
border: 0;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
* {
|
* {
|
||||||
|
@ -83,18 +83,18 @@ ul {
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: .8em;
|
font-size: .8em;
|
||||||
line-height: 1.6em;
|
line-height: 1.6em;
|
||||||
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
|
font-family: var(--font-face);
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#body-login {
|
#body-login {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: $color-primary;
|
background-color: var(--color-primary);
|
||||||
background-image: url('../img/background.png?v=2');
|
background-image: url('../img/background.png?v=2');
|
||||||
background-position: 50% 50%;
|
background-position: 50% 50%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -110,14 +110,14 @@ body {
|
||||||
width: 258px !important;
|
width: 258px !important;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
background-color: rgba($color-main-text, 0.3) !important;
|
background-color: var(--color-background-darker) !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.two-factor-link {
|
.two-factor-link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
color: rgba($color-main-background, 0.75);
|
color: var(--color-text-lighter);
|
||||||
}
|
}
|
||||||
|
|
||||||
.float-spinner {
|
.float-spinner {
|
||||||
|
@ -138,8 +138,8 @@ body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 9000;
|
z-index: 9000;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: rgba($color-main-text, 0.5);
|
background-color: var(--color-background-darker);
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
line-height: 125%;
|
line-height: 125%;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
div {
|
div {
|
||||||
|
@ -150,10 +150,10 @@ body {
|
||||||
margin: 0px auto;
|
margin: 0px auto;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
border-bottom: 2px dotted $color-main-background;
|
border-bottom: 2px dotted var(--color-main-background);
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
color: nc-lighten($color-main-text, 86%);
|
color: var(--color-primary-text-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -170,8 +170,8 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: nc-darken($color-main-background, 14%);
|
background: var(--color-background-darker);
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Searchbox */
|
/* Searchbox */
|
||||||
|
@ -185,9 +185,9 @@ body {
|
||||||
padding-left: 25px;
|
padding-left: 25px;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
background: transparent url('../img/actions/search-white.svg?v=1') no-repeat center center;
|
background: transparent url('../img/actions/search-white.svg?v=1') no-repeat center center;
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
margin-top: 9px;
|
margin-top: 9px;
|
||||||
width: 0;
|
width: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -196,11 +196,11 @@ body {
|
||||||
opacity: .6;
|
opacity: .6;
|
||||||
&:focus, &:active, &:valid {
|
&:focus, &:active, &:valid {
|
||||||
background-position-x: 6px;
|
background-position-x: 6px;
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
width: 155px;
|
width: 155px;
|
||||||
cursor: text;
|
cursor: text;
|
||||||
background-color: $color-primary !important;
|
background-color: var(--color-primary) !important;
|
||||||
border: 1px solid rgba($color-primary-text, 0.5) !important;
|
border: 1px solid var(--color-primary-text-dark) !important;
|
||||||
}
|
}
|
||||||
&:hover, &:focus, &:active {
|
&:hover, &:focus, &:active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
@ -236,7 +236,7 @@ body {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: rgba($color-main-background, 0.95);
|
background-color: var(--color-main-background-light);
|
||||||
z-index: 60;
|
z-index: 60;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
|
@ -303,7 +303,7 @@ body {
|
||||||
|
|
||||||
#emptycontent,
|
#emptycontent,
|
||||||
.emptycontent {
|
.emptycontent {
|
||||||
color: nc-lighten($color-main-text, 53%);
|
color: var(--color-text-maxcontrast);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 30vh;
|
margin-top: 30vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -344,16 +344,16 @@ body {
|
||||||
/* fix sticky footer */
|
/* fix sticky footer */
|
||||||
p.info, form fieldset legend, #datadirContent label {
|
p.info, form fieldset legend, #datadirContent label {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
}
|
}
|
||||||
form {
|
form {
|
||||||
fieldset .warning-info, input[type='checkbox'] + label {
|
fieldset .warning-info, input[type='checkbox'] + label {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
}
|
}
|
||||||
.warning input[type='checkbox'] {
|
.warning input[type='checkbox'] {
|
||||||
&:hover + label, &:focus + label, + label {
|
&:hover + label, &:focus + label, + label {
|
||||||
color: $color-primary-text !important;
|
color: var(--color-primary-text) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -362,8 +362,8 @@ body {
|
||||||
margin: 0 0 20px;
|
margin: 0 0 20px;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
border-bottom: 1px solid nc-darken($color-main-background, 27%);
|
border-bottom: 1px solid var(--color-background-darker);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.infogroup {
|
.infogroup {
|
||||||
|
@ -488,7 +488,6 @@ body {
|
||||||
border-top: 0 !important;
|
border-top: 0 !important;
|
||||||
border-bottom: 0 !important;
|
border-bottom: 0 !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
box-shadow: 0 1px 0 rgba($color-main-text, 0.1) inset !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#body-login .groupbottom input, .groupbottom input {
|
#body-login .groupbottom input, .groupbottom input {
|
||||||
|
@ -496,7 +495,6 @@ body {
|
||||||
border-top: 0 !important;
|
border-top: 0 !important;
|
||||||
border-top-right-radius: 0 !important;
|
border-top-right-radius: 0 !important;
|
||||||
border-top-left-radius: 0 !important;
|
border-top-left-radius: 0 !important;
|
||||||
box-shadow: 0 1px 0 rgba($color-main-text, 0.1) inset !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#body-login .groupbottom input[type=submit] {
|
#body-login .groupbottom input[type=submit] {
|
||||||
|
@ -522,16 +520,14 @@ label.infield {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
.errors {
|
.errors {
|
||||||
background: rgba($color-error, .35);
|
border: 1px solid var(--color-error);
|
||||||
border: 1px solid $color-error;
|
|
||||||
list-style-indent: inside;
|
list-style-indent: inside;
|
||||||
margin: 0 0 2em;
|
margin: 0 0 2em;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.success {
|
.success {
|
||||||
background: rgba($color-success, .35);
|
border: 1px solid var(--color-success);
|
||||||
border: 1px solid $color-success;
|
|
||||||
width: 35%;
|
width: 35%;
|
||||||
margin: 30px auto;
|
margin: 30px auto;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
@ -542,7 +538,7 @@ label.infield {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
p.info a, #showAdvanced {
|
p.info a, #showAdvanced {
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
}
|
}
|
||||||
#remember_login {
|
#remember_login {
|
||||||
&:hover + label, &:focus + label {
|
&:hover + label, &:focus + label {
|
||||||
|
@ -616,7 +612,6 @@ label.infield {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Database selector */
|
/* Database selector */
|
||||||
|
|
||||||
#body-login {
|
#body-login {
|
||||||
form #selectDbType {
|
form #selectDbType {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -629,27 +624,27 @@ label.infield {
|
||||||
position: static;
|
position: static;
|
||||||
margin: 0 -3px 5px;
|
margin: 0 -3px 5px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
background: nc-darken($color-main-background, 3%);
|
background: var(--color-background-dark);
|
||||||
color: nc-lighten($color-main-text, 53%);
|
color: var(--color-text-lighter);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid nc-darken($color-main-background, 14%);
|
border: 1px solid var(--color-border-dark);
|
||||||
span {
|
span {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
}
|
}
|
||||||
&.ui-state-hover, &.ui-state-active {
|
&.ui-state-hover, &.ui-state-active {
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
background-color: nc-darken($color-main-background, 8%);
|
background-color: var(--color-border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.warning, .update, .error {
|
.warning, .update, .error {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background-color: rgba($color-main-text, 0.3);
|
background-color: var(--color-background-darker);
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
.update {
|
.update {
|
||||||
|
@ -675,23 +670,22 @@ label.infield {
|
||||||
#body-user .warning, #body-settings .warning {
|
#body-user .warning, #body-settings .warning {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background: rgba($color-error, .15);
|
border-radius: var(--border-radius);
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning {
|
.warning {
|
||||||
legend, a {
|
legend, a {
|
||||||
color: $color-primary-text !important;
|
color: var(--color-primary-text) !important;
|
||||||
font-weight: 600 !important;
|
font-weight: 600 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
a {
|
a {
|
||||||
color: $color-primary-text !important;
|
color: var(--color-primary-text) !important;
|
||||||
font-weight: 600 !important;
|
font-weight: 600 !important;
|
||||||
&.button {
|
&.button {
|
||||||
color: nc-lighten($color-main-text, 33%) !important;
|
color: var(--color-text-lighter) !important;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -711,7 +705,7 @@ label.infield {
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning-input {
|
.warning-input {
|
||||||
border-color: $color-error !important;
|
border-color: var(--color-error) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fixes for log in page, TODO should be removed some time */
|
/* Fixes for log in page, TODO should be removed some time */
|
||||||
|
@ -807,7 +801,7 @@ label.infield {
|
||||||
#forgot-password {
|
#forgot-password {
|
||||||
padding: 11px;
|
padding: 11px;
|
||||||
float: right;
|
float: right;
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
}
|
}
|
||||||
.wrapper {
|
.wrapper {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
@ -847,7 +841,7 @@ td.avatar {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
z-index: 8000;
|
z-index: 8000;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 1px 8px;
|
padding: 1px 8px;
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -922,7 +916,7 @@ tr {
|
||||||
|
|
||||||
tbody tr {
|
tbody tr {
|
||||||
&:hover, &:focus, &:active {
|
&:hover, &:focus, &:active {
|
||||||
background-color: nc-darken($color-main-background, 3%);
|
background-color: var(--color-background-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -958,7 +952,7 @@ code {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
width: auto;
|
width: auto;
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
.ui-state-default,
|
.ui-state-default,
|
||||||
|
@ -971,8 +965,8 @@ code {
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
|
|
||||||
.ui-datepicker-title {
|
.ui-datepicker-title {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
@ -995,7 +989,7 @@ code {
|
||||||
.ui-datepicker-calendar {
|
.ui-datepicker-calendar {
|
||||||
th {
|
th {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
width: 26px;
|
width: 26px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
|
@ -1005,20 +999,20 @@ code {
|
||||||
}
|
}
|
||||||
td {
|
td {
|
||||||
&.ui-datepicker-today a:not(.ui-state-hover) {
|
&.ui-datepicker-today a:not(.ui-state-hover) {
|
||||||
background-color: nc-lighten($color-main-text, 86%);
|
background-color: var(--color-background-darker);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-datepicker-current-day a.ui-state-active,
|
&.ui-datepicker-current-day a.ui-state-active,
|
||||||
.ui-state-hover,
|
.ui-state-hover,
|
||||||
.ui-state-focus {
|
.ui-state-focus {
|
||||||
background-color: $color-primary;
|
background-color: var(--color-primary);
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
|
&.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
|
||||||
.ui-priority-secondary:not(.ui-state-hover) {
|
.ui-priority-secondary:not(.ui-state-hover) {
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1026,8 +1020,8 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-datepicker-prev, .ui-datepicker-next {
|
.ui-datepicker-prev, .ui-datepicker-next {
|
||||||
border: nc-darken($color-main-background, 14%);
|
border: var(--color-border-dark);
|
||||||
background: $color-main-background;
|
background: var(--color-main-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -1035,7 +1029,7 @@ code {
|
||||||
.ui-widget.ui-timepicker {
|
.ui-widget.ui-timepicker {
|
||||||
margin-top: 10px !important;
|
margin-top: 10px !important;
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
.ui-widget-content {
|
.ui-widget-content {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
|
@ -1051,8 +1045,8 @@ code {
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
|
|
||||||
.ui-timepicker-title {
|
.ui-timepicker-title {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
@ -1066,7 +1060,7 @@ code {
|
||||||
.ui-timepicker-table {
|
.ui-timepicker-table {
|
||||||
th {
|
th {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
&.periods {
|
&.periods {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -1082,17 +1076,17 @@ code {
|
||||||
&.ui-timepicker-minute-cell a.ui-state-active,
|
&.ui-timepicker-minute-cell a.ui-state-active,
|
||||||
.ui-state-hover,
|
.ui-state-hover,
|
||||||
.ui-state-focus {
|
.ui-state-focus {
|
||||||
background-color: $color-primary;
|
background-color: var(--color-primary);
|
||||||
color: $color-primary-text;
|
color: var(--color-primary-text);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-timepicker-minutes:not(.ui-state-hover) {
|
&.ui-timepicker-minutes:not(.ui-state-hover) {
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-timepicker-hours {
|
&.ui-timepicker-hours {
|
||||||
border-right: 1px solid $color-border;
|
border-right: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1118,7 +1112,7 @@ code {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
|
@ -1163,14 +1157,14 @@ code {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.emptycontent {
|
.emptycontent {
|
||||||
color: nc-lighten($color-main-text, 53%);
|
color: var(--color-text-details);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 80px;
|
margin-top: 80px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.filelist {
|
.filelist {
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
#filestable.filelist {
|
#filestable.filelist {
|
||||||
|
@ -1181,7 +1175,7 @@ code {
|
||||||
.filelist {
|
.filelist {
|
||||||
td {
|
td {
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
border-bottom: 1px solid $color-border;
|
border-bottom: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
tr:last-child td {
|
tr:last-child td {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
@ -1270,7 +1264,7 @@ span.ui-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 3px 3px 3px 10px;
|
padding: 3px 3px 3px 10px;
|
||||||
border-bottom: 1px solid $color-border;
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
|
||||||
:last-of-type {
|
:last-of-type {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
@ -1348,7 +1342,7 @@ span.ui-icon {
|
||||||
}
|
}
|
||||||
.scrollarea {
|
.scrollarea {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
border: 1px solid nc-darken($color-main-background, 14%);
|
border: 1px solid var(--color-background-darker);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 240px;
|
height: 240px;
|
||||||
}
|
}
|
||||||
|
@ -1360,7 +1354,7 @@ span.ui-icon {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.taglist li {
|
.taglist li {
|
||||||
background: nc-darken($color-main-background, 3%);
|
background: var(--color-background-dark);
|
||||||
padding: .3em .8em;
|
padding: .3em .8em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -1368,7 +1362,7 @@ span.ui-icon {
|
||||||
-webkit-transition: background-color 500ms;
|
-webkit-transition: background-color 500ms;
|
||||||
transition: background-color 500ms;
|
transition: background-color 500ms;
|
||||||
&:hover, &:active {
|
&:hover, &:active {
|
||||||
background: nc-darken($color-main-background, 8%);
|
background: var(--color-background-darker);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.addinput {
|
.addinput {
|
||||||
|
@ -1483,12 +1477,12 @@ div.crumb {
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
.info {
|
.info {
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
a {
|
a {
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 13px;
|
padding: 13px;
|
||||||
margin: -13px;
|
margin: -13px;
|
||||||
|
|
|
@ -34,7 +34,7 @@
|
||||||
/* default to top */
|
/* default to top */
|
||||||
margin-top: -3px;
|
margin-top: -3px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
filter: drop-shadow(0 1px 10px $color-box-shadow);
|
filter: drop-shadow(0 1px 10px var(--color-box-shadow));
|
||||||
&.in,
|
&.in,
|
||||||
&.tooltip[aria-hidden='false'] {
|
&.tooltip[aria-hidden='false'] {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
|
@ -60,7 +60,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
margin-top: -10px;
|
margin-top: -10px;
|
||||||
border-width: 10px 10px 10px 0;
|
border-width: 10px 10px 10px 0;
|
||||||
border-right-color: $color-main-background;
|
border-right-color: var(--color-main-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.left,
|
&.left,
|
||||||
|
@ -72,7 +72,7 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-top: -10px;
|
margin-top: -10px;
|
||||||
border-width: 10px 0 10px 10px;
|
border-width: 10px 0 10px 10px;
|
||||||
border-left-color: $color-main-background;
|
border-left-color: var(--color-main-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* TOP */
|
/* TOP */
|
||||||
|
@ -83,7 +83,7 @@
|
||||||
.tooltip-arrow {
|
.tooltip-arrow {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
border-width: 10px 10px 0;
|
border-width: 10px 10px 0;
|
||||||
border-top-color: $color-main-background;
|
border-top-color: var(--color-main-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.top-left .tooltip-arrow {
|
&.top-left .tooltip-arrow {
|
||||||
|
@ -102,7 +102,7 @@
|
||||||
.tooltip-arrow {
|
.tooltip-arrow {
|
||||||
top: 0;
|
top: 0;
|
||||||
border-width: 0 10px 10px;
|
border-width: 0 10px 10px;
|
||||||
border-bottom-color: $color-main-background;
|
border-bottom-color: var(--color-main-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&[x-placement^='bottom'] .tooltip-arrow,
|
&[x-placement^='bottom'] .tooltip-arrow,
|
||||||
|
@ -123,10 +123,10 @@
|
||||||
.tooltip-inner {
|
.tooltip-inner {
|
||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
color: $color-main-text;
|
color: var(--color-main-text);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-arrow {
|
.tooltip-arrow {
|
||||||
|
|
|
@ -1,17 +1,4 @@
|
||||||
$color-main-text: #000000;
|
// SCSS darken/lighten function override
|
||||||
$color-main-background: #ffffff;
|
|
||||||
$color-primary: #0082c9;
|
|
||||||
$color-primary-text: #ffffff;
|
|
||||||
$color-error: #e9322d;
|
|
||||||
$color-warning: #eca700;
|
|
||||||
$color-success: #46ba61;
|
|
||||||
$color-primary-element: $color-primary;
|
|
||||||
|
|
||||||
// rgb(118, 118, 118) / #767676
|
|
||||||
// min. color contrast for normal text on white background according to WCAG AA
|
|
||||||
// (Works as well: color: #000; opacity: 0.57;)
|
|
||||||
$color-text-details: #767676;
|
|
||||||
|
|
||||||
@function nc-darken($color, $value) {
|
@function nc-darken($color, $value) {
|
||||||
@return darken($color, $value);
|
@return darken($color, $value);
|
||||||
}
|
}
|
||||||
|
@ -20,11 +7,46 @@ $color-text-details: #767676;
|
||||||
@return lighten($color, $value);
|
@return lighten($color, $value);
|
||||||
}
|
}
|
||||||
|
|
||||||
$image-logo: '../img/logo.svg?v=1';
|
// SCSS variables
|
||||||
$image-login-background: '../img/background.png?v=2';
|
// DEPRECATED, please use CSS4 vars
|
||||||
|
$color-main-text: #000 !default;
|
||||||
|
$color-main-background: #fff !default;
|
||||||
|
|
||||||
$color-loading: #969696;
|
// used for different active/disabled states
|
||||||
$color-loading-dark: #bbbbbb;
|
$color-background-dark: nc-darken($color-main-background, 7%) !default;
|
||||||
$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
|
$color-background-darker: nc-darken($color-main-background, 14%) !default;
|
||||||
$color-border: nc-darken($color-main-background, 8%);
|
|
||||||
$border-radius: 3px;
|
$color-primary: #0082c9;
|
||||||
|
$color-primary-text: #ffffff;
|
||||||
|
// do not use nc-darken/lighten in case of overriding because
|
||||||
|
// primary-text is independent of color-main-text
|
||||||
|
$color-primary-text-dark: darken($color-primary-text, 7%) !default;
|
||||||
|
$color-primary-element: $color-primary !default;
|
||||||
|
$color-primary-element-light: lighten($color-primary-element, 15%) !default;
|
||||||
|
|
||||||
|
$color-error: #e9322d;
|
||||||
|
$color-warning: #eca700;
|
||||||
|
$color-success: #46ba61;
|
||||||
|
|
||||||
|
// rgb(118, 118, 118) / #767676
|
||||||
|
// min. color contrast for normal text on white background according to WCAG AA
|
||||||
|
// (Works as well: color: #000; opacity: 0.57;)
|
||||||
|
$color-text-maxcontrast: nc-lighten($color-main-text, 46.2%) !default;
|
||||||
|
$color-text-light: nc-lighten($color-main-text, 15%) !default;
|
||||||
|
$color-text-lighter: nc-lighten($color-main-text, 30%) !default;
|
||||||
|
|
||||||
|
$image-logo: url('../img/logo.svg?v=1');
|
||||||
|
$image-login-background: url('../img/background.png?v=2');
|
||||||
|
|
||||||
|
$color-loading-light: #ccc !default;
|
||||||
|
$color-loading-dark: #777 !default;
|
||||||
|
|
||||||
|
$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75) !default;
|
||||||
|
|
||||||
|
// light border like file table or app-content list
|
||||||
|
$color-border: nc-darken($color-main-background, 7%) !default;
|
||||||
|
// darker border like inputs or very visible elements
|
||||||
|
$color-border-dark: nc-darken($color-main-background, 14%) !default;
|
||||||
|
$border-radius: 3px !default;
|
||||||
|
|
||||||
|
$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
|
||||||
|
|
|
@ -15,7 +15,8 @@
|
||||||
"autosize/dist/autosize.min.js",
|
"autosize/dist/autosize.min.js",
|
||||||
"DOMPurify/dist/purify.min.js",
|
"DOMPurify/dist/purify.min.js",
|
||||||
"snapjs/dist/latest/snap.js",
|
"snapjs/dist/latest/snap.js",
|
||||||
"select2/select2.js"
|
"select2/select2.js",
|
||||||
|
"css-vars-ponyfill/dist/css-vars-ponyfill.min.js"
|
||||||
],
|
],
|
||||||
"libraries": [
|
"libraries": [
|
||||||
"jquery-showpassword.js",
|
"jquery-showpassword.js",
|
||||||
|
|
|
@ -1342,6 +1342,11 @@ function initCore() {
|
||||||
$('html').addClass('edge');
|
$('html').addClass('edge');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// css variables fallback for IE
|
||||||
|
if (msie > 0 || trident > 0) {
|
||||||
|
cssVars();
|
||||||
|
}
|
||||||
|
|
||||||
$(window).on('unload.main', function() {
|
$(window).on('unload.main', function() {
|
||||||
OC._unloadCalled = true;
|
OC._unloadCalled = true;
|
||||||
});
|
});
|
||||||
|
|
|
@ -176,3 +176,10 @@ DOMPurify/**
|
||||||
# strengthify
|
# strengthify
|
||||||
strengthify/examples.html
|
strengthify/examples.html
|
||||||
strengthify/examples.png
|
strengthify/examples.png
|
||||||
|
|
||||||
|
# underscore
|
||||||
|
css-vars-ponyfill/**
|
||||||
|
!css-vars-ponyfill/dist
|
||||||
|
!css-vars-ponyfill/dist/css-vars-ponyfill.min.js
|
||||||
|
!css-vars-ponyfill/dist/css-vars-ponyfill.min.js.map
|
||||||
|
!css-vars-ponyfill/LICENSE
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2018 John Hildenbiddle
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -109,6 +109,7 @@ class OC_Template extends \OC\Template\Base {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
OC_Util::addStyle('css-variables', null, true);
|
||||||
OC_Util::addStyle('server', null, true);
|
OC_Util::addStyle('server', null, true);
|
||||||
OC_Util::addStyle('jquery-ui-fixes',null,true);
|
OC_Util::addStyle('jquery-ui-fixes',null,true);
|
||||||
OC_Util::addVendorStyle('jquery-ui/themes/base/jquery-ui',null,true);
|
OC_Util::addVendorStyle('jquery-ui/themes/base/jquery-ui',null,true);
|
||||||
|
|
|
@ -78,7 +78,7 @@ input {
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #333;
|
color: #333;
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
box-shadow: 0 0 7px #888;
|
box-shadow: 0 0 7px #888;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
.jcrop-holder {
|
.jcrop-holder {
|
||||||
|
@ -130,11 +130,6 @@ input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#personal-settings {
|
|
||||||
.section {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#personal-settings {
|
#personal-settings {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
@ -143,8 +138,11 @@ input {
|
||||||
grid-template-columns:1fr 2fr 1fr;
|
grid-template-columns:1fr 2fr 1fr;
|
||||||
.section {
|
.section {
|
||||||
padding: 10px 10px;
|
padding: 10px 10px;
|
||||||
|
border: 0;
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.personal-info {
|
.personal-info {
|
||||||
margin-right: 10%;
|
margin-right: 10%;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
@ -223,7 +221,6 @@ input {
|
||||||
> div {
|
> div {
|
||||||
h2 {
|
h2 {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 12px;
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
@ -328,7 +325,7 @@ input {
|
||||||
opacity: .75;
|
opacity: .75;
|
||||||
}
|
}
|
||||||
&.active {
|
&.active {
|
||||||
box-shadow: inset 2px 0 $color-primary;
|
box-shadow: inset 2px 0 var(--color-primary);
|
||||||
.menuitem-text {
|
.menuitem-text {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
@ -426,7 +423,7 @@ table.nostyle {
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
border-top: 1px solid #DDD;
|
border-top: 1px solid var(--color-border);
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -482,7 +479,6 @@ table.nostyle {
|
||||||
#new-app-password {
|
#new-app-password {
|
||||||
width: 245px;
|
width: 245px;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
background-color: lightyellow;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-password-row {
|
.app-password-row {
|
||||||
|
@ -556,14 +552,14 @@ table.grid {
|
||||||
th {
|
th {
|
||||||
height: 2em;
|
height: 2em;
|
||||||
color: #999;
|
color: #999;
|
||||||
border-bottom: 1px solid $color-border;
|
border-bottom: 1px solid var(--color-border);
|
||||||
padding: 0 .5em;
|
padding: 0 .5em;
|
||||||
padding-left: .8em;
|
padding-left: .8em;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
td {
|
td {
|
||||||
border-bottom: 1px solid $color-border;
|
border-bottom: 1px solid var(--color-border);
|
||||||
padding: 0 .5em;
|
padding: 0 .5em;
|
||||||
padding-left: .8em;
|
padding-left: .8em;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
@ -639,7 +635,7 @@ span.usersLastLoginTooltip {
|
||||||
thead th,
|
thead th,
|
||||||
thead tr {
|
thead tr {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
position: sticky;
|
position: sticky;
|
||||||
// positional attribute is required for position to take affect.
|
// positional attribute is required for position to take affect.
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -734,7 +730,7 @@ span.version {
|
||||||
color: #555;
|
color: #555;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 1px solid #555;
|
border: 1px solid #555;
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
padding: 3px 6px;
|
padding: 3px 6px;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
|
@ -804,7 +800,7 @@ span.version {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.app-author, .app-licence {
|
.app-author, .app-licence {
|
||||||
color: $color-text-details;
|
color: var(--color-text-maxcontrast);
|
||||||
}
|
}
|
||||||
.app-dependencies {
|
.app-dependencies {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
|
@ -819,7 +815,7 @@ span.version {
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}.
|
}
|
||||||
.actions {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
@ -885,7 +881,7 @@ span.version {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
/* use 2nd child since app-navigation-toggle is the first */
|
/* use 2nd child since app-navigation-toggle is the first */
|
||||||
&:not(:nth-child(2)) {
|
&:not(:nth-child(2)) {
|
||||||
border-top: 1px solid $color-border;
|
border-top: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* correctly display help icons next to headings */
|
/* correctly display help icons next to headings */
|
||||||
|
@ -980,12 +976,12 @@ span.version {
|
||||||
height: initial;
|
height: initial;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
float: none;
|
float: none;
|
||||||
border-bottom: 1px solid $color-border;
|
border-bottom: 1px solid var(--color-border);
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
&.selected {
|
&.selected {
|
||||||
background-color: nc-darken($color-main-background, 3%);
|
background-color: var(--color-background-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.groups-enable {
|
.groups-enable {
|
||||||
|
@ -1126,13 +1122,13 @@ table.grid td.date {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
&.icon-checkmark-white {
|
&.icon-checkmark-white {
|
||||||
background-color: $color-success;
|
background-color: var(--color-success);
|
||||||
}
|
}
|
||||||
&.icon-error-white {
|
&.icon-error-white {
|
||||||
background-color: $color-warning;
|
background-color: var(--color-warning);
|
||||||
}
|
}
|
||||||
&.icon-close-white {
|
&.icon-close-white {
|
||||||
background-color: $color-error;
|
background-color: var(--color-error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1233,14 +1229,14 @@ table.grid td.date {
|
||||||
|
|
||||||
span {
|
span {
|
||||||
&.success {
|
&.success {
|
||||||
background-color: $color-success;
|
background-color: var(--color-success);
|
||||||
border-radius: $border-radius;
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
&.error {
|
&.error {
|
||||||
background-color: $color-error;
|
background-color: var(--color-error);
|
||||||
}
|
}
|
||||||
&.indeterminate {
|
&.indeterminate {
|
||||||
background-color: $color-warning;
|
background-color: var(--color-warning);
|
||||||
border-radius: 40% 0;
|
border-radius: 40% 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1303,10 +1299,10 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
||||||
background-position: left center;
|
background-position: left center;
|
||||||
}
|
}
|
||||||
.errors, .errors a {
|
.errors, .errors a {
|
||||||
color: $color-error;
|
color: var(--color-error);
|
||||||
}
|
}
|
||||||
.warnings, .warnings a {
|
.warnings, .warnings a {
|
||||||
color: $color-warning;
|
color: var(--color-warning);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hint {
|
.hint {
|
||||||
|
@ -1351,21 +1347,6 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
||||||
opacity: .7;
|
opacity: .7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-caption {
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 44px;
|
|
||||||
padding: 0 44px;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
// !important to overwrite specific hover and focus
|
|
||||||
opacity: .4 !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
|
|
||||||
&:not(:first-child) {
|
|
||||||
margin-top: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* USERS LIST -------------------------------------------------------------- */
|
/* USERS LIST -------------------------------------------------------------- */
|
||||||
#body-settings {
|
#body-settings {
|
||||||
|
@ -1402,7 +1383,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
||||||
what follows will be manually defined */
|
what follows will be manually defined */
|
||||||
grid-template-columns: 44px;
|
grid-template-columns: 44px;
|
||||||
grid-auto-columns: min-content;
|
grid-auto-columns: min-content;
|
||||||
border-top: $color-border 1px solid;
|
border-top: var(--color-border) 1px solid;
|
||||||
&.disabled {
|
&.disabled {
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
}
|
}
|
||||||
|
@ -1438,11 +1419,11 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
||||||
&#new-user {
|
&#new-user {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
align-self: normal;
|
align-self: normal;
|
||||||
background-color: $color-main-background;
|
background-color: var(--color-main-background);
|
||||||
z-index: 55; /* above multiselect */
|
z-index: 55; /* above multiselect */
|
||||||
top: 0;
|
top: 0;
|
||||||
&.sticky {
|
&.sticky {
|
||||||
box-shadow: 0 -2px 10px 1px $color-box-shadow;
|
box-shadow: 0 -2px 10px 1px var(--color-box-shadow);
|
||||||
}
|
}
|
||||||
/* fake input for groups validation */
|
/* fake input for groups validation */
|
||||||
input#newgroups {
|
input#newgroups {
|
||||||
|
@ -1458,12 +1439,12 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
||||||
top: $grid-row-height;
|
top: $grid-row-height;
|
||||||
}
|
}
|
||||||
&#grid-header {
|
&#grid-header {
|
||||||
color: nc-lighten($color-main-text, 60%);
|
color: var(--color-background-darker);
|
||||||
z-index: 60; /* above new-user */
|
z-index: 60; /* above new-user */
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
input:not([type='submit']):not(:focus):not(:active) {
|
input:not([type='submit']):not(:focus):not(:active) {
|
||||||
border-color: nc-darken($color-main-background, 14%) !important;
|
border-color: var(--color-border) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> div,
|
> div,
|
||||||
|
@ -1471,7 +1452,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: var(--color-text-lighter);
|
||||||
position: relative;
|
position: relative;
|
||||||
> input:not(:focus):not(:active) {
|
> input:not(:focus):not(:active) {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
|
|
@ -30,7 +30,7 @@ script('files', 'jquery.fileupload');
|
||||||
|
|
||||||
<div id="app-navigation">
|
<div id="app-navigation">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="settings-caption"><?php p($l->t('Personal')); ?></li>
|
<li class="app-navigation-caption"><?php p($l->t('Personal')); ?></li>
|
||||||
<?php
|
<?php
|
||||||
foreach($_['forms']['personal'] as $form) {
|
foreach($_['forms']['personal'] as $form) {
|
||||||
if (isset($form['anchor'])) {
|
if (isset($form['anchor'])) {
|
||||||
|
@ -57,7 +57,7 @@ script('files', 'jquery.fileupload');
|
||||||
<?php
|
<?php
|
||||||
if(!empty($_['forms']['admin'])) {
|
if(!empty($_['forms']['admin'])) {
|
||||||
?>
|
?>
|
||||||
<li class="settings-caption"><?php p($l->t('Administration')); ?></li>
|
<li class="app-navigation-caption"><?php p($l->t('Administration')); ?></li>
|
||||||
<?php
|
<?php
|
||||||
}
|
}
|
||||||
foreach($_['forms']['admin'] as $form) {
|
foreach($_['forms']['admin'] as $form) {
|
||||||
|
|
|
@ -78,7 +78,7 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
||||||
<div class="personal-settings-setting-box personal-settings-group-box section">
|
<div class="personal-settings-setting-box personal-settings-group-box section">
|
||||||
<h2><?php p($l->t('Details')); ?></h2>
|
<h2><?php p($l->t('Details')); ?></h2>
|
||||||
<div id="groups" class="personal-info icon-user">
|
<div id="groups" class="personal-info icon-user">
|
||||||
<p class="icon-groups"><?php p($l->t('You are a member of the following groups:')); ?></p>
|
<p><?php p($l->t('You are a member of the following groups:')); ?></p>
|
||||||
<p id="groups-groups">
|
<p id="groups-groups">
|
||||||
<strong><?php p(implode(', ', $_['groups'])); ?></strong>
|
<strong><?php p(implode(', ', $_['groups'])); ?></strong>
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -5,10 +5,13 @@ Feature: app-theming
|
||||||
And I visit the settings page
|
And I visit the settings page
|
||||||
And I open the "Theming" section
|
And I open the "Theming" section
|
||||||
And I see that the color selector in the Theming app has loaded
|
And I see that the color selector in the Theming app has loaded
|
||||||
And I see that the header color is "#0082C9"
|
# The "eventually" part is not really needed here, as the colour is not
|
||||||
|
# being animated at this point, but there is no need to create a specific
|
||||||
|
# step just for this.
|
||||||
|
And I see that the header color is eventually "#0082C9"
|
||||||
When I set the "Color" parameter in the Theming app to "#C9C9C9"
|
When I set the "Color" parameter in the Theming app to "#C9C9C9"
|
||||||
Then I see that the parameters in the Theming app are eventually saved
|
Then I see that the parameters in the Theming app are eventually saved
|
||||||
And I see that the header color is "#C9C9C9"
|
And I see that the header color is eventually "#C9C9C9"
|
||||||
|
|
||||||
Scenario: resetting the color updates the header color
|
Scenario: resetting the color updates the header color
|
||||||
Given I am logged in as the admin
|
Given I am logged in as the admin
|
||||||
|
@ -17,7 +20,7 @@ Feature: app-theming
|
||||||
And I see that the color selector in the Theming app has loaded
|
And I see that the color selector in the Theming app has loaded
|
||||||
And I set the "Color" parameter in the Theming app to "#C9C9C9"
|
And I set the "Color" parameter in the Theming app to "#C9C9C9"
|
||||||
And I see that the parameters in the Theming app are eventually saved
|
And I see that the parameters in the Theming app are eventually saved
|
||||||
And I see that the header color is "#C9C9C9"
|
And I see that the header color is eventually "#C9C9C9"
|
||||||
When I reset the "Color" parameter in the Theming app to its default value
|
When I reset the "Color" parameter in the Theming app to its default value
|
||||||
Then I see that the parameters in the Theming app are eventually saved
|
Then I see that the parameters in the Theming app are eventually saved
|
||||||
And I see that the header color is "#0082C9"
|
And I see that the header color is eventually "#0082C9"
|
||||||
|
|
|
@ -79,7 +79,7 @@ class SettingsMenuContext implements Context, ActorAwareInterface {
|
||||||
* @return Locator
|
* @return Locator
|
||||||
*/
|
*/
|
||||||
private static function settingsPanelFor($itemText) {
|
private static function settingsPanelFor($itemText) {
|
||||||
return Locator::forThe()->xpath("//div[@id = 'app-navigation']//ul//li[@class = 'settings-caption' and normalize-space() = '$itemText']")->
|
return Locator::forThe()->xpath("//div[@id = 'app-navigation']//ul//li[@class = 'app-navigation-caption' and normalize-space() = '$itemText']")->
|
||||||
describedAs($itemText . " item in Settings panel");
|
describedAs($itemText . " item in Settings panel");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -125,13 +125,20 @@ class ThemingAppContext implements Context, ActorAwareInterface {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @Then I see that the header color is :color
|
* @Then I see that the header color is eventually :color
|
||||||
*/
|
*/
|
||||||
public function iSeeThatTheHeaderColorIs($color) {
|
public function iSeeThatTheHeaderColorIsEventually($color) {
|
||||||
|
$headerColorMatchesCallback = function() use($color) {
|
||||||
$headerColor = $this->actor->getSession()->evaluateScript("return $('#header').css('background-color');");
|
$headerColor = $this->actor->getSession()->evaluateScript("return $('#header').css('background-color');");
|
||||||
$headerColor = $this->getRGBArray($headerColor);
|
$headerColor = $this->getRGBArray($headerColor);
|
||||||
$color = $this->getRGBArray($color);
|
$color = $this->getRGBArray($color);
|
||||||
PHPUnit_Framework_Assert::assertEquals($color, $headerColor);
|
|
||||||
|
return $headerColor == $color;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!Utils::waitFor($headerColorMatchesCallback, $timeout = 10 * $this->actor->getFindTimeoutMultiplier(), $timeoutStep = 1)) {
|
||||||
|
PHPUnit_Framework_Assert::fail("The header color is not $color yet after $timeout seconds");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue