aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMorris Jobke <hey@morrisjobke.de>2018-06-20 19:54:10 +0200
committerGitHub <noreply@github.com>2018-06-20 19:54:10 +0200
commit9b6f235015032712c90767b996d60bbb6669fa48 (patch)
treeba5f9cfa0258c7bb72c74f7a7385dda962b50a99
parent9d37c191a39e17434e68551cb5cde1307b8ed78c (diff)
parentb188b2d133ebff3cd47f53eeb1de4111cf83ad27 (diff)
downloadnextcloud-server-9b6f235015032712c90767b996d60bbb6669fa48.tar.gz
nextcloud-server-9b6f235015032712c90767b996d60bbb6669fa48.zip
Merge pull request #9723 from nextcloud/css4-variables
Css4 variables migration
-rw-r--r--apps/comments/css/autocomplete.scss30
-rw-r--r--apps/comments/css/comments.scss2
-rw-r--r--apps/files/css/detailsView.scss2
-rw-r--r--apps/files/css/files.scss24
-rw-r--r--apps/files/css/upload.scss6
-rw-r--r--apps/files_sharing/css/public.scss2
-rw-r--r--apps/theming/css/settings-admin.scss8
-rw-r--r--apps/theming/css/theming.scss8
-rw-r--r--apps/theming/lib/Controller/ThemingController.php12
-rw-r--r--apps/theming/lib/ThemingDefaults.php4
-rw-r--r--apps/theming/tests/Controller/ThemingControllerTest.php30
-rw-r--r--apps/theming/tests/ThemingDefaultsTest.php4
-rw-r--r--core/css/apps.scss102
-rw-r--r--core/css/css-variables.scss39
-rw-r--r--core/css/fixes.scss2
-rw-r--r--core/css/fonts.scss9
-rw-r--r--core/css/header.scss41
-rw-r--r--core/css/icons.scss58
-rw-r--r--core/css/inputs.scss208
-rw-r--r--core/css/jquery-ui-fixes.scss58
-rw-r--r--core/css/jquery.ocdialog.scss12
-rw-r--r--core/css/mobile.scss6
-rw-r--r--core/css/multiselect.scss10
-rw-r--r--core/css/public.scss4
-rw-r--r--core/css/share.scss9
-rw-r--r--core/css/styles.scss152
-rw-r--r--core/css/tooltip.scss16
-rw-r--r--core/css/variables.scss56
-rw-r--r--core/js/core.json3
-rw-r--r--core/js/js.js5
-rw-r--r--core/vendor/.gitignore7
-rw-r--r--core/vendor/css-vars-ponyfill/LICENSE21
-rw-r--r--core/vendor/css-vars-ponyfill/dist/css-vars-ponyfill.min.js9
-rw-r--r--core/vendor/css-vars-ponyfill/dist/css-vars-ponyfill.min.js.map1
-rw-r--r--lib/private/legacy/template.php1
-rw-r--r--settings/css/settings.scss81
-rw-r--r--settings/templates/settings/frame.php4
-rw-r--r--settings/templates/settings/personal/personal.info.php2
-rw-r--r--tests/acceptance/features/app-theming.feature11
-rw-r--r--tests/acceptance/features/bootstrap/SettingsMenuContext.php2
-rw-r--r--tests/acceptance/features/bootstrap/ThemingAppContext.php19
41 files changed, 609 insertions, 471 deletions
diff --git a/apps/comments/css/autocomplete.scss b/apps/comments/css/autocomplete.scss
index 41695e08301..0837b387814 100644
--- a/apps/comments/css/autocomplete.scss
+++ b/apps/comments/css/autocomplete.scss
@@ -9,11 +9,11 @@
left: 0;
display: none;
margin-top: 18px;
- background: $color-main-background;
- color: $color-main-text;
- border: 1px solid $color-border;
- border-radius: $border-radius;
- box-shadow: 0 0 5px $color-box-shadow;
+ background: var(--color-main-background);
+ color: var(--color-main-text);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ box-shadow: 0 0 5px var(--color-box-shadow);
min-width: 120px;
z-index: 11110 !important;
}
@@ -22,14 +22,14 @@
padding: 5px;
margin: 5px;
cursor: pointer;
- border-bottom: solid 1px $color-border;
- color: $color-main-text;
+ border-bottom: solid 1px var(--color-border);
+ color: var(--color-main-text);
font-size: 11px;
font-weight: bold;
}
.atwho-view .atwho-header .small {
- color: $color-main-text;
+ color: var(--color-main-text);
float: right;
padding-top: 2px;
margin-right: -5px;
@@ -42,18 +42,18 @@
}
.atwho-view .cur {
- background: $color-primary;
- color: $color-primary-text;
+ background: var(--color-primary);
+ color: var(--color-primary-text);
}
.atwho-view .cur small {
- color: $color-primary-text;
+ color: var(--color-primary-text);
}
.atwho-view strong {
- color: $color-main-text;
+ color: var(--color-main-text);
font-weight: normal;
}
.atwho-view .cur strong {
- color: $color-primary-text;
+ color: var(--color-primary-text);
font-weight: normal;
}
.atwho-view ul {
@@ -67,11 +67,11 @@
.atwho-view ul li {
display: block;
padding: 5px 10px;
- border-bottom: 1px solid $color-border;
+ border-bottom: 1px solid var(--color-border);
cursor: pointer;
}
.atwho-view small {
font-size: smaller;
- color: $color-main-text;
+ color: var(--color-main-text);
font-weight: normal;
}
diff --git a/apps/comments/css/comments.scss b/apps/comments/css/comments.scss
index d2ed74adaeb..ae1f6d71720 100644
--- a/apps/comments/css/comments.scss
+++ b/apps/comments/css/comments.scss
@@ -70,7 +70,7 @@
}
#commentsTabView .comments .comment {
- border-top: 1px solid $color-border;
+ border-top: 1px solid var(--color-border);
}
#commentsTabView .comment .avatar,
diff --git a/apps/files/css/detailsView.scss b/apps/files/css/detailsView.scss
index 334fc0c8fd8..4a3336cdbcf 100644
--- a/apps/files/css/detailsView.scss
+++ b/apps/files/css/detailsView.scss
@@ -100,7 +100,7 @@
}
#app-sidebar .file-details {
- color: $color-text-details;
+ color: var(--color-text-maxcontrast);
}
#app-sidebar .action-favorite {
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index ca2915a9034..01703df5bf1 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -41,8 +41,8 @@
.newFileMenu .error,
.newFileMenu .error + .icon-confirm,
#fileList .error {
- color: $color-error;
- border-color: $color-error;
+ color: var(--color-error);
+ border-color: var(--color-error);
}
/* FILE TABLE */
@@ -71,7 +71,7 @@
}
.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{
@@ -140,12 +140,12 @@
#filestable tbody tr.searchresult,
table tr.mouseOver td {
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 {
- color: $color-text-details;
+ color: var(--color-text-maxcontrast);
}
span.conflict-path, span.extension {
-webkit-transition: opacity 300ms;
@@ -159,11 +159,11 @@ tr:focus span.conflict-path,
tr:hover span.extension,
tr:focus span.extension {
opacity: 1;
- color: $color-text-details;
+ color: var(--color-text-maxcontrast);
}
table th, table th a {
- color: $color-text-details;
+ color: var(--color-text-maxcontrast);
}
table.multiselect th a {
color: #000;
@@ -208,7 +208,7 @@ table th:focus .sort-indicator.hidden {
table th,
table td {
- border-bottom: 1px solid $color-border;
+ border-bottom: 1px solid var(--color-border);
text-align: left;
font-weight: normal;
}
@@ -625,7 +625,7 @@ table.dragshadow td.size {
left: 0;
right: 0;
bottom: 0;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
background-repeat: no-repeat no-repeat;
background-position: 50%;
opacity: 0.7;
@@ -703,11 +703,11 @@ table.dragshadow td.size {
.quota-container {
height: 5px;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
div {
height: 100%;
- background-color: $color-primary;
+ background-color: var(--color-primary);
}
}
}
diff --git a/apps/files/css/upload.scss b/apps/files/css/upload.scss
index 5263a4b0e03..8d54c28eef9 100644
--- a/apps/files/css/upload.scss
+++ b/apps/files/css/upload.scss
@@ -51,7 +51,7 @@
left: 0px;
position: absolute;
overflow: hidden;
- background-color: $color-primary;
+ background-color: var(--color-primary);
}
#uploadprogressbar .label {
top: 6px;
@@ -61,14 +61,14 @@
font-weight: normal;
}
#uploadprogressbar .label.inner {
- color: $color-primary-text;
+ color: var(--color-primary-text);
position: absolute;
display: block;
width: 200px;
}
#uploadprogressbar .label.outer {
position: relative;
- color: $color-main-text;
+ color: var(--color-main-text);
}
#uploadprogressbar .desktop {
display: block;
diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index 2a4225a7f12..2e788a06c40 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -161,7 +161,7 @@ thead {
#header .header-shared-by {
display: inline-block;
- color: $color-primary-text;
+ color: var(--color-primary-text);
position: relative;
top: -10px;
font-weight: 300;
diff --git a/apps/theming/css/settings-admin.scss b/apps/theming/css/settings-admin.scss
index 7753540ccd2..c67d48d46fe 100644
--- a/apps/theming/css/settings-admin.scss
+++ b/apps/theming/css/settings-admin.scss
@@ -122,3 +122,11 @@
background-size: contain;
}
}
+
+/* transition effects for theming value changes */
+#header {
+ transition: background-color 500ms linear;
+ svg, img {
+ transition: 500ms filter linear;
+ }
+} \ No newline at end of file
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 6b0566039d2..4a32458d8a8 100644
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -94,7 +94,7 @@
@if variable_exists('theming-logo-mime') and $theming-logo-mime != '' {
#theming-preview-logo,
#header .logo {
- background-image: url(#{$image-logo});
+ background-image: $image-logo;
background-size: contain;
}
#body-login #header .logo {
@@ -102,7 +102,7 @@
}
} @else {
#theming-preview-logo {
- background-image: url(#{$image-logo});
+ background-image: $image-logo;
}
}
@@ -110,12 +110,12 @@
#body-login,
#firstrunwizard .firstrunwizard-header,
#theming-preview {
- background-image: url(#{$image-login-background});
+ background-image: $image-login-background;
background-color: $color-primary;
}
} @else {
#theming-preview {
- background-image: url(#{$image-login-background});
+ background-image: $image-login-background;
background-color: $color-primary;
}
}
diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php
index 96f8dfde9fd..44f1ea51c06 100644
--- a/apps/theming/lib/Controller/ThemingController.php
+++ b/apps/theming/lib/Controller/ThemingController.php
@@ -201,14 +201,14 @@ class ThemingController extends Controller {
$this->themingDefaults->set($setting, $value);
// 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(
[
'data' =>
[
'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'
]
@@ -302,7 +302,7 @@ class ThemingController extends Controller {
$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(
[
@@ -311,7 +311,7 @@ class ThemingController extends Controller {
'name' => $name,
'url' => $this->imageManager->getImageUrl($key),
'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'
]
@@ -328,7 +328,7 @@ class ThemingController extends Controller {
public function undo(string $setting): DataResponse {
$value = $this->themingDefaults->undo($setting);
// 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) {
$imageKey = str_replace('Mime', '', $setting);
@@ -341,7 +341,7 @@ class ThemingController extends Controller {
[
'value' => $value,
'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'
]
diff --git a/apps/theming/lib/ThemingDefaults.php b/apps/theming/lib/ThemingDefaults.php
index d29eb69873f..72286ece4b8 100644
--- a/apps/theming/lib/ThemingDefaults.php
+++ b/apps/theming/lib/ThemingDefaults.php
@@ -272,10 +272,10 @@ class ThemingDefaults extends \OC_Defaults {
'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-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';
if ($this->config->getAppValue('theming', 'color', null) !== null) {
diff --git a/apps/theming/tests/Controller/ThemingControllerTest.php b/apps/theming/tests/Controller/ThemingControllerTest.php
index 360eb7083a4..a2105264f10 100644
--- a/apps/theming/tests/Controller/ThemingControllerTest.php
+++ b/apps/theming/tests/Controller/ThemingControllerTest.php
@@ -151,20 +151,20 @@ class ThemingControllerTest extends TestCase {
$this->scssCacher
->expects($this->once())
->method('getCachedSCSS')
- ->with('core', '/core/css/server.scss')
- ->willReturn('/core/css/someHash-server.scss');
+ ->with('core', '/core/css/css-variables.scss')
+ ->willReturn('/core/css/someHash-css-variables.scss');
$this->urlGenerator
->expects($this->once())
->method('linkTo')
- ->with('', '/core/css/someHash-server.scss')
- ->willReturn('/nextcloudWebroot/core/css/someHash-server.scss');
+ ->with('', '/core/css/someHash-css-variables.scss')
+ ->willReturn('/nextcloudWebroot/core/css/someHash-css-variables.scss');
$expected = new DataResponse(
[
'data' =>
[
'message' => $message,
- 'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss',
+ 'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-css-variables.scss',
],
'status' => 'success',
]
@@ -604,13 +604,13 @@ class ThemingControllerTest extends TestCase {
$this->scssCacher
->expects($this->once())
->method('getCachedSCSS')
- ->with('core', '/core/css/server.scss')
- ->willReturn('/core/css/someHash-server.scss');
+ ->with('core', '/core/css/css-variables.scss')
+ ->willReturn('/core/css/someHash-css-variables.scss');
$this->urlGenerator
->expects($this->once())
->method('linkTo')
- ->with('', '/core/css/someHash-server.scss')
- ->willReturn('/nextcloudWebroot/core/css/someHash-server.scss');
+ ->with('', '/core/css/someHash-css-variables.scss')
+ ->willReturn('/nextcloudWebroot/core/css/someHash-css-variables.scss');
$expected = new DataResponse(
[
@@ -618,7 +618,7 @@ class ThemingControllerTest extends TestCase {
[
'value' => 'MyValue',
'message' => 'Saved',
- 'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss',
+ 'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-css-variables.scss',
],
'status' => 'success'
]
@@ -648,13 +648,13 @@ class ThemingControllerTest extends TestCase {
$this->scssCacher
->expects($this->once())
->method('getCachedSCSS')
- ->with('core', '/core/css/server.scss')
- ->willReturn('/core/css/someHash-server.scss');
+ ->with('core', '/core/css/css-variables.scss')
+ ->willReturn('/core/css/someHash-css-variables.scss');
$this->urlGenerator
->expects($this->once())
->method('linkTo')
- ->with('', '/core/css/someHash-server.scss')
- ->willReturn('/nextcloudWebroot/core/css/someHash-server.scss');
+ ->with('', '/core/css/someHash-css-variables.scss')
+ ->willReturn('/nextcloudWebroot/core/css/someHash-css-variables.scss');
$this->imageManager->expects($this->once())
->method('delete')
->with($filename);
@@ -665,7 +665,7 @@ class ThemingControllerTest extends TestCase {
[
'value' => $value,
'message' => 'Saved',
- 'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss',
+ 'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-css-variables.scss',
],
'status' => 'success'
]
diff --git a/apps/theming/tests/ThemingDefaultsTest.php b/apps/theming/tests/ThemingDefaultsTest.php
index ceaf2cc19d5..87b2003ded2 100644
--- a/apps/theming/tests/ThemingDefaultsTest.php
+++ b/apps/theming/tests/ThemingDefaultsTest.php
@@ -645,8 +645,8 @@ class ThemingDefaultsTest extends TestCase {
'theming-cachebuster' => '\'0\'',
'theming-logo-mime' => '\'jpeg\'',
'theming-background-mime' => '\'jpeg\'',
- 'image-logo' => "'custom-logo?v=0'",
- 'image-login-background' => "'custom-background?v=0'",
+ 'image-logo' => "url('custom-logo?v=0')",
+ 'image-login-background' => "url('custom-background?v=0')",
'color-primary' => $this->defaults->getColorPrimary(),
'color-primary-text' => '#ffffff',
'image-login-plain' => 'false',
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 19447d6e41d..822a27cc197 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -58,7 +58,7 @@ kbd {
padding: 4px 10px;
border: 1px solid #ccc;
box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
display: inline-block;
white-space: nowrap;
}
@@ -83,13 +83,13 @@ kbd {
height: 100%;
float: left;
box-sizing: border-box;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
padding-bottom: 44px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
- border-right: 1px solid $color-border;
+ border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
@@ -152,7 +152,7 @@ kbd {
&,
> a {
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 */
> ul {
flex: 0 1 auto;
@@ -198,7 +215,7 @@ kbd {
}
&.active {
- box-shadow: inset 4px 0 $color-primary;
+ box-shadow: inset 4px 0 var(--color-primary);
}
/* align loader */
@@ -250,7 +267,7 @@ kbd {
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
- color: $color-main-text;
+ color: var(--color-main-text);
opacity: .57;
flex: 1 1 0px;
z-index: 100; /* above the bullet to allow click*/
@@ -442,8 +459,8 @@ kbd {
span {
padding: 2px 5px;
border-radius: 10px;
- background-color: $color-primary;
- color: $color-primary-text;
+ background-color: var(--color-primary);
+ color: var(--color-primary-text);
}
}
}
@@ -460,7 +477,7 @@ kbd {
transition: opacity 250ms ease-in-out;
opacity: 0;
position: absolute;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
z-index: -1;
form,
div {
@@ -537,7 +554,7 @@ kbd {
z-index 250ms ease-in-out;
position: absolute;
left: 0;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
box-sizing: border-box;
}
@@ -551,10 +568,7 @@ kbd {
}
.error {
- color: $color-error;
- }
- .app-navigation-separator {
- border-bottom: 1px solid nc-lighten($color-main-text, 86%);
+ color: var(--color-error);
}
.app-navigation-entry-utils ul,
@@ -599,8 +613,8 @@ kbd {
width: 27%;
min-width: 300px;
display: block;
- background: $color-main-background;
- border-left: 1px solid $color-border;
+ background: var(--color-main-background);
+ border-left: 1px solid var(--color-border);
-webkit-transition: margin-right 300ms;
transition: margin-right 300ms;
overflow-x: hidden;
@@ -632,11 +646,11 @@ kbd {
#app-settings-content {
display: none;
padding: 10px;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
/* restrict height of settings and make scrollable */
max-height: 300px;
overflow-y: auto;
- border-right: 1px solid $color-border;
+ border-right: 1px solid var(--color-border);
width: 250px;
box-sizing: border-box;
@@ -647,7 +661,7 @@ kbd {
.info-text {
padding: 5px 0 7px 22px;
- color: rgba($color-main-text, .4);
+ color: var(--color-text-lighter);
}
input {
&[type='checkbox'],
@@ -665,10 +679,10 @@ kbd {
}
#app-settings-header {
- border-right: 1px solid $color-border;
+ border-right: 1px solid var(--color-border);
width: 250px;
box-sizing: border-box;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
}
.settings-button {
@@ -677,7 +691,7 @@ kbd {
width: 100%;
padding: 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-position: 14px center;
background-repeat: no-repeat;
@@ -689,14 +703,14 @@ kbd {
font-weight: 400;
/* like app-navigation a */
- color: $color-main-text;
+ color: var(--color-main-text);
opacity: .57;
&.opened,
&:hover {
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
opacity: 1;
- box-shadow: inset 4px 0 $color-primary;
+ box-shadow: inset 4px 0 var(--color-primary);
}
}
@@ -704,7 +718,7 @@ kbd {
.section {
display: block;
padding: 30px;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
margin-bottom: 24px;
&.hidden {
display: none !important;
@@ -745,25 +759,25 @@ kbd {
float: left;
padding: 5px;
cursor: pointer;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
margin-bottom: 1px;
a {
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
margin-bottom: 1px;
}
&.selected {
font-weight: 600;
- border-bottom: 1px solid nc-lighten($color-main-text, 20%);
+ border-bottom: 1px solid var(--color-border);
}
&:hover {
- border-bottom: 1px solid nc-lighten($color-main-text, 20%);
+ border-bottom: 1px solid var(--color-border);
}
&.selected, &:hover {
margin-bottom: 0px;
- color: $color-main-text;
+ color: var(--color-main-text);
a {
margin-bottom: 0px;
- color: $color-main-text;
+ color: var(--color-main-text);
}
}
}
@@ -785,7 +799,7 @@ $popovericon-size: 16px;
.popovermenu, .popovermenu:after,
#app-navigation .app-navigation-entry-menu,
#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,
.popovermenu {
position: absolute;
- background-color: $color-main-background;
- color: $color-main-text;
- border-radius: $border-radius;
+ background-color: var(--color-main-background);
+ color: var(--color-main-text);
+ border-radius: var(--border-radius);
z-index: 110;
margin: 5px;
margin-top: -5px;
right: 0;
- filter: drop-shadow(0 1px 3px $color-box-shadow);
+ filter: drop-shadow(0 1px 3px var(--color-box-shadow));
display: none;
&:after {
@@ -815,7 +829,7 @@ $popovericon-size: 16px;
width: 0;
position: absolute;
pointer-events: none;
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
border-width: 10px;
}
/* Center the popover */
@@ -865,7 +879,7 @@ $popovericon-size: 16px;
font-weight: 300;
box-shadow: none;
width: 100%;
- color: $color-main-text;
+ color: var(--color-main-text);
/* Override the app-navigation li opacity */
opacity: .7 !important;
span[class^='icon-'],
@@ -1013,7 +1027,7 @@ $popovericon-size: 16px;
/* CONTENT LIST ------------------------------------------------------------- */
.app-content-list {
width: 300px;
- border-right: 1px solid nc-darken($color-main-background, 8%);
+ border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
transition: transform 250ms ease-in-out;
@@ -1022,7 +1036,7 @@ $popovericon-size: 16px;
.app-content-list-item {
position: relative;
height: 68px;
- border-top: 1px solid nc-darken($color-main-background, 8%);
+ border-top: 1px solid var(--color-border);
cursor: pointer;
padding: 10px 7px;
display: flex;
@@ -1061,7 +1075,7 @@ $popovericon-size: 16px;
&:hover, &:focus,
&.active {
- background-color: nc-darken($color-main-background, 6%);
+ background-color: var(--color-background-dark);
}
.app-content-list-item-checkbox.checkbox + label,
@@ -1177,14 +1191,14 @@ $popovericon-size: 16px;
/* full width for message list on mobile */
.app-content-list {
width: 100%;
- background: $color-main-background;
+ background: var(--color-main-background);
position: relative;
z-index: 100;
}
/* overlay message detail on top of message list */
.app-content-detail {
- background: $color-main-background;
+ background: var(--color-main-background);
width: 100%;
left: 0;
height: 100%;
diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
new file mode 100644
index 00000000000..b1b7df3115f
--- /dev/null
+++ b/core/css/css-variables.scss
@@ -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;
+}
diff --git a/core/css/fixes.scss b/core/css/fixes.scss
index 09ab9c1d244..2b93b2914cd 100644
--- a/core/css/fixes.scss
+++ b/core/css/fixes.scss
@@ -22,5 +22,5 @@ select {
.ie .ui-timepicker.ui-widget,
.ie #appmenu li span,
.ie .tooltip-inner {
- box-shadow: 0 1px 10px $color-box-shadow;
+ box-shadow: 0 1px 10px var(--color-box-shadow);
}
diff --git a/core/css/fonts.scss b/core/css/fonts.scss
index f72aa2930cf..441b48f3856 100644
--- a/core/css/fonts.scss
+++ b/core/css/fonts.scss
@@ -4,7 +4,8 @@
font-family: 'Open Sans';
font-style: 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-style: normal;
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-family: 'Open Sans';
font-style: normal;
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');
}
diff --git a/core/css/header.scss b/core/css/header.scss
index d71ec5b713a..1507a711636 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -33,7 +33,7 @@
&:focus {
left: 76px;
top: -9px;
- color: $color-primary-text;
+ color: var(--color-primary-text);
width: auto;
height: auto;
}
@@ -50,7 +50,7 @@
right: 0;
z-index: 2000;
height: 50px;
- background-color: $color-primary;
+ background-color: var(--color-primary);
box-sizing: border-box;
justify-content: space-between;
}
@@ -72,8 +72,8 @@
#header {
/* Header menu */
.menu {
- background-color: $color-main-background;
- filter: drop-shadow(0 1px 10px $color-box-shadow);
+ background-color: var(--color-main-background);
+ filter: drop-shadow(0 1px 5px var(--color-box-shadow));
border-radius: 0 0 3px 3px;
box-sizing: border-box;
z-index: 2000;
@@ -91,7 +91,7 @@
/* Dropdown arrow */
&:after {
border: 10px solid transparent;
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
bottom: 100%;
content: ' ';
height: 0;
@@ -103,7 +103,7 @@
}
.logo {
display: inline-flex;
- background-image: url($image-logo);
+ background-image: var(--image-logo);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
@@ -207,7 +207,7 @@
.header-appname {
display: inline-block;
position: relative;
- color: $color-primary-text;
+ color: var(--color-primary-text);
font-size: 16px;
font-weight: 300;
margin: 0;
@@ -239,8 +239,8 @@ nav[role='navigation'] {
.header-left #navigation,
.ui-datepicker,
.ui-timepicker.ui-widget {
- background-color: $color-main-background;
- filter: drop-shadow(0 1px 10px $color-box-shadow);
+ background-color: var(--color-main-background);
+ filter: drop-shadow(0 1px 10px var(--color-box-shadow));
&:after {
/* position of dropdown arrow */
left: 50%;
@@ -252,7 +252,7 @@ nav[role='navigation'] {
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
border-width: 10px;
margin-left: -10px; /* border width */
}
@@ -276,7 +276,7 @@ nav[role='navigation'] {
display: inline-block;
padding-bottom: 0;
padding-left: 10px;
- color: $color-main-text;
+ color: var(--color-main-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -340,7 +340,6 @@ nav[role='navigation'] {
#settings {
display: inline-block;
height: 100%;
- color: rgba($color-primary-text, 0.7);
cursor: pointer;
flex: 0 0 auto;
@@ -356,7 +355,7 @@ nav[role='navigation'] {
&:hover,
&:focus,
&:active {
- color: $color-primary-text;
+ color: var(--color-primary-text);
img, #expandDisplayName {
opacity: 1;
@@ -397,7 +396,7 @@ nav[role='navigation'] {
position: absolute;
pointer-events: none;
border: 0 solid transparent;
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
border-width: 10px;
bottom: 0;
z-index: 100;
@@ -414,7 +413,7 @@ nav[role='navigation'] {
display: inline-flex;
align-items: center;
height: 40px;
- color: $color-main-text;
+ color: var(--color-main-text);
padding: 12px;
box-sizing: border-box;
opacity: .7;
@@ -434,7 +433,7 @@ nav[role='navigation'] {
&:active,
&.active {
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;
position: absolute;
overflow: visible;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
white-space: nowrap;
border: none;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
border-top-left-radius: 0;
border-top-right-radius: 0;
- color: rgba($color-main-text, .7);
+ color: var(--color-text-lighter);
width: auto;
left: 50%;
top: 100%;
transform: translateX(-50%);
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;
}
@@ -523,7 +522,7 @@ nav[role='navigation'] {
position: absolute;
pointer-events: none;
border: 0 solid transparent;
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
border-width: 10px;
transform: translateX(-50%);
left: 50%;
diff --git a/core/css/icons.scss b/core/css/icons.scss
index 86f416094ba..23d35b3742f 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -25,7 +25,12 @@
}
/* 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;
&:after {
z-index: 2;
@@ -42,15 +47,15 @@
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
- border: 2px solid rgba($color-loading, 0.5);
- border-top-color: $color-loading;
+ border: 2px solid var(--color-loading-light);
+ border-top-color: var(--color-loading-dark);
}
}
.icon-loading-dark:after,
.icon-loading-small-dark:after {
- border: 2px solid rgba($color-loading-dark, 0.5);
- border-top-color: $color-loading-dark;
+ border: 2px solid var(--color-loading-dark);
+ border-top-color: var(--color-loading-light);
}
.icon-loading-small:after,
@@ -61,7 +66,7 @@
}
/* 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 {
background-image: url('../img/loading.gif');
}
@@ -92,7 +97,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
.icon-white {
filter: invert(100%);
&.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 */
.icon-audio-white {
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 {
@@ -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 */
.icon-audio-off-white {
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 {
@@ -176,11 +181,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
.icon-delete {
background-image: url('../img/actions/delete.svg?v=1');
&.no-permission {
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background-image: url('../img/actions/delete.svg?v=1');
}
}
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background-image: url('../img/actions/delete-hover.svg?v=1');
filter: initial;
}
@@ -189,11 +196,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
.icon-delete-white {
background-image: url('../img/actions/delete-white.svg?v=1');
&.no-permission {
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background-image: url('../img/actions/delete-white.svg?v=1');
}
}
- &:hover, &:focus {
+ &:hover,
+ &:focus {
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 */
.icon-fullscreen-white {
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 {
@@ -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 */
.icon-screen-white {
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 {
@@ -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 */
.icon-screen-off-white {
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 {
@@ -375,14 +384,16 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
}
.icon-starred {
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background-image: url('../img/actions/star.svg?v=1');
}
background-image: url('../img/actions/starred.svg?v=1');
}
.icon-star {
- &:hover, &:focus {
+ &:hover,
+ &:focus {
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 */
.icon-video-white {
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 {
@@ -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 */
.icon-video-off-white {
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 {
@@ -500,11 +511,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/places/files-dark.svg?v=1');
}
-.icon-file, .icon-filetype-text {
+.icon-file,
+.icon-filetype-text {
background-image: url('../img/filetypes/text.svg?v=1');
}
-.icon-folder, .icon-filetype-folder {
+.icon-folder,
+.icon-filetype-folder {
background-image: url('../img/filetypes/folder.svg?v=1');
}
@@ -614,4 +627,3 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
.icon-category-search {
background-image: url('../img/actions/search.svg?v=1');
}
-
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index e6060d2c8c8..a3ff713d813 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -14,10 +14,10 @@
/* Specifically override browser styles */
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 {
- font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !important;
+ font-family: var(--font-face) !important;
}
/* Simple selector to allow easy overriding */
@@ -32,6 +32,13 @@ div[contenteditable=false] {
box-sizing: border-box;
}
+/**
+ * color-text-lighter normal state
+ * color-text-lighter active state
+ * color-text-maxcontrast disabled state
+ */
+
+
/* Default global values */
select,
button, .button,
@@ -42,28 +49,29 @@ div[contenteditable=true],
margin: 3px 3px 3px 0;
padding: 7px 6px;
font-size: 13px;
- background-color: $color-main-background;
- color: nc-lighten($color-main-text, 33%);
- border: 1px solid nc-darken($color-main-background, 14%);
+ background-color: var(--color-main-background);
+ color: var(--color-text-lighter);
+ border: 1px solid var(--color-border-dark);
outline: none;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
cursor: text;
&:not(:disabled):not(.primary) {
&:hover,
&:focus,
&.active {
/* active class used for multiselect */
- border-color: $color-primary-element;
+ border-color: var(--color-primary-element);
outline: none;
}
&:active {
outline: none;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
+ color: var(--color-text-light);
}
}
&:disabled {
- background-color: nc-darken($color-main-background, 8%);
- color: rgba($color-main-text, 0.4);
+ background-color: var(--color-background-dark);
+ color: var(--color-text-maxcontrast);
cursor: default;
opacity: 0.5;
}
@@ -72,26 +80,28 @@ div[contenteditable=true],
}
&:invalid {
box-shadow: none !important;
- border-color: $color-error;
+ border-color: var(--color-error);
}
/* Primary action button, use sparingly */
&.primary {
- background-color: $color-primary-element;
- border: 1px solid $color-primary-text;
- color: $color-primary-text;
+ background-color: var(--color-primary-element);
+ border: 1px solid var(--color-primary-text);
+ color: var(--color-primary-text);
cursor: pointer;
&:not(:disabled) {
&:hover,
- &:focus {
- background-color: rgba($color-primary-element, .85);
+ &:focus,
+ &:active {
+ background-color: var(--color-primary-element-light)
}
&:active {
- background-color: rgba($color-primary-element, .7);
+ color: var(--color-primary-text-dark);
}
}
&:disabled {
- background-color: rgba($color-primary-element, .7);
- color: nc-lighten($color-main-text, 73%);
+ // opacity is already defined to .5 if disabled
+ background-color: var(--color-primary-element);
+ color: var(--color-primary-text-dark);
}
}
}
@@ -100,15 +110,15 @@ div[contenteditable=false] {
margin: 3px 3px 3px 0;
padding: 7px 6px;
font-size: 13px;
- background-color: $color-main-background;
- color: nc-lighten($color-main-text, 33%);
- border: 1px solid nc-darken($color-main-background, 14%);
+ background-color: var(--color-main-background);
+ color: var(--color-text-lighter);
+ border: 1px solid var(--color-background-darker);
outline: none;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
cursor: text;
- background-color: nc-darken($color-main-background, 8%);
- color: rgba($color-main-text, 0.4);
+ background-color: var(--color-background-dark);
+ color: var(--color-text-lighter);
cursor: default;
opacity: 0.5;
}
@@ -155,7 +165,7 @@ input[type='reset'] {
min-height: 34px;
cursor: pointer;
box-sizing: border-box;
- background-color: nc-darken($color-main-background, 3%);
+ background-color: var(--color-background-dark);
}
/* Buttons */
@@ -182,7 +192,7 @@ button, .button {
}
textarea, div[contenteditable=true] {
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
cursor: text;
font-family: inherit;
height: auto;
@@ -190,14 +200,14 @@ textarea, div[contenteditable=true] {
&:active,
&:hover,
&:focus {
- border-color: nc-darken($color-main-background, 14%) !important;
- background-color: $color-main-background !important;
+ border-color: var(--color-background-darker) !important;
+ background-color: var(--color-main-background) !important;
}
}
}
div[contenteditable=false] {
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
cursor: text;
font-family: inherit;
height: auto;
@@ -222,10 +232,10 @@ input {
+ .icon-confirm {
margin-left: -8px !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;
/* Avoid background under border */
- background-color: $color-main-background !important;
+ background-color: var(--color-main-background) !important;
opacity: 1;
width: 34px;
padding: 7px 6px;
@@ -242,10 +252,10 @@ input {
&:active,
&:hover,
&:focus {
- border-color: $color-primary-element !important;
- border-radius: $border-radius !important;
+ border-color: var(--color-primary-element) !important;
+ border-radius: var(--border-radius) !important;
&:disabled {
- border-color: nc-darken($color-main-background, 14%) !important;
+ border-color: var(--color-background-darker) !important;
}
}
}
@@ -255,11 +265,11 @@ input {
&:focus {
&:invalid {
+ .icon-confirm {
- border-color: $color-error;
+ border-color: var(--color-error);
}
}
+ .icon-confirm {
- border-color: $color-primary-element !important;
+ border-color: var(--color-primary-element) !important;
border-left-color: transparent !important;
/* above previous input */
z-index: 2;
@@ -280,9 +290,11 @@ select,
}
/* 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 {
- $color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
- $color-checkbox-radio-border: nc-darken($color-main-background, 47%);
&[type='checkbox'],
&[type='radio'] {
&.radio,
@@ -309,26 +321,26 @@ input {
border-radius: 50%;
margin: 3px;
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,
&:focus + label:before {
- border-color: $color-primary-element;
+ border-color: var(--color-primary-element);
}
&:checked + label:before,
&.checkbox:indeterminate + label:before {
/* ^ :indeterminate have a strange behavior on radio,
so we respecified the checkbox class again to be safe */
- box-shadow: inset 0px 0px 0px 2px $color-main-background;
- background-color: $color-primary-element;
- border-color: $color-primary-element;
+ box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
+ background-color: var(--color-primary-element);
+ border-color: var(--color-primary-element);
}
&:disabled + label:before {
- border: 1px solid $color-checkbox-radio-border;
- background-color: $color-checkbox-radio-disabled !important; /* override other status */
+ border: 1px solid var(--color-checkbox-radio-border);
+ background-color: var(--color-checkbox-radio-disabled) !important; /* override other status */
}
&:checked:disabled + label:before {
- background-color: $color-checkbox-radio-disabled;
+ background-color: var(--color-checkbox-radio-disabled);
}
}
&.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;
&.radio--white,
&.checkbox--white {
@@ -359,7 +371,7 @@ input {
border-color: $color-checkbox-radio-white;
}
&: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%);
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 */
}
&: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 */
background-color: darken($color-checkbox-radio-white, 27%);
}
@@ -393,9 +405,9 @@ input {
/* Select2 overriding. Merged to core with vendor stylesheet */
.select2-drop {
margin-top: -2px;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
&.select2-drop-active {
- border-color: nc-darken($color-main-background, 14%);
+ border-color: var(--color-border-dark);
}
.avatar {
display: inline-block;
@@ -430,16 +442,16 @@ input {
padding: 12px;
background-color: transparent;
cursor: pointer;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
}
.select2-result {
&.select2-selected {
- background-color: nc-darken($color-main-background, 3%);
+ background-color: var(--color-background-dark);
}
}
.select2-highlighted {
- background-color: nc-darken($color-main-background, 3%);
- color: $color-main-text;
+ background-color: var(--color-background-dark);
+ color: var(--color-main-text);
}
}
}
@@ -456,11 +468,11 @@ input {
box-shadow: none;
white-space: nowrap;
text-overflow: ellipsis;
- background: $color-main-background;
- color: nc-lighten($color-main-text, 33%);
+ background: var(--color-main-background);
+ color: var(--color-text-lighter);
box-sizing: content-box;
- border-radius: $border-radius;
- border: 1px solid nc-darken($color-main-background, 14%);
+ border-radius: var(--border-radius);
+ border: 1px solid var(--color-border-dark);
margin: 0;
padding: 2px 0;
min-height: auto;
@@ -472,9 +484,9 @@ input {
&:active,
& {
background-image: none;
- background-color: $color-main-background;
- color: nc-lighten($color-main-text, 33%);
- border: 1px solid nc-darken($color-main-background, 14%);
+ background-color: var(--color-main-background);
+ color: var(--color-text-lighter);
+ border: 1px solid var(--color-border-dark);
}
.select2-search-choice-close {
display: none;
@@ -501,11 +513,11 @@ input {
box-shadow: none;
white-space: nowrap;
text-overflow: ellipsis;
- background: $color-main-background;
- color: nc-lighten($color-main-text, 33%);
+ background: var(--color-main-background);
+ color: var(--color-text-lighter);
box-sizing: content-box;
- border-radius: $border-radius;
- border: 1px solid nc-darken($color-main-background, 14%);
+ border-radius: var(--border-radius);
+ border: 1px solid var(--color-border-dark);
margin: 0;
padding: 2px 0;
padding-left: 6px;
@@ -514,15 +526,15 @@ input {
line-height: 20px;
padding-left: 5px;
background-image: none;
- background-color: nc-darken($color-main-background, 3%);
- border-color: nc-darken($color-main-background, 3%);
+ background-color: var(--color-background-dark);
+ border-color: var(--color-background-dark);
.select2-search-choice-close {
display: none;
}
&.select2-search-choice-focus,
&:hover {
- background-color: $color-border;
- border-color: $color-border;
+ background-color: var(--color-border);
+ border-color: var(--color-border);
}
}
.select2-arrow {
@@ -556,9 +568,9 @@ input {
line-height: 20px;
padding-left: 5px;
background-image: none;
- background-color: $color-main-background;
- color: nc-lighten($color-main-text, 33%);
- border: 1px solid nc-darken($color-main-background, 14%);
+ background-color: var(--color-main-background);
+ color: var(--color-text-lighter);
+ border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
.close {
@@ -574,7 +586,7 @@ input {
display: list-item;
background-color: transparent;
cursor: pointer;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
a {
white-space: nowrap;
overflow: hidden;
@@ -607,11 +619,11 @@ input {
}
}
&.highlight {
- color: $color-main-text;
+ color: var(--color-main-text);
}
&.active > a {
- background-color: nc-darken($color-main-background, 3%);
- color: $color-main-text;
+ background-color: var(--color-background-dark);
+ color: var(--color-main-text);
&::before {
visibility: visible;
}
@@ -628,7 +640,7 @@ input {
display: inline-block;
width: 160px;
position: relative;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
&.multiselect--active {
/* Opened: force display the input */
input.multiselect__input {
@@ -638,7 +650,7 @@ input {
}
&.multiselect--disabled,
&.multiselect--disabled .multiselect__single {
- background-color: nc-darken($color-main-background, 8%) !important;
+ background-color: var(--color-background-dark) !important;
}
.multiselect__tags {
/* space between tags and limit tag */
@@ -647,7 +659,7 @@ input {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
- border: 1px solid nc-darken($color-main-background, 14%);
+ border: 1px solid var(--color-border-dark);
cursor: pointer;
position: relative;
border-radius: 3px;
@@ -676,8 +688,8 @@ input {
line-height: 20px;
padding: 1px 5px;
background-image: none;
- color: nc-lighten($color-main-text, 33%);
- border: 1px solid nc-darken($color-main-background, 14%);
+ color: var(--color-text-lighter);
+ border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
border-radius: 3px;
@@ -709,7 +721,7 @@ input {
padding: 8px 10px;
flex: 0 0 100%;
z-index: 1; /* above input */
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
cursor: pointer;
}
/* displayed text if tag limit reached */
@@ -717,7 +729,7 @@ input {
.multiselect__limit {
flex: 0 0 auto;
line-height: 20px;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
display: inline-flex;
align-items: center;
opacity: .7;
@@ -745,8 +757,8 @@ input {
position: absolute;
width: 100%;
margin-top: -1px;
- border: 1px solid nc-darken($color-main-background, 14%);
- background: $color-main-background;
+ border: 1px solid var(--color-border-dark);
+ background: var(--color-main-background);
z-index: 50;
max-height: 250px;
overflow-y: auto;
@@ -779,7 +791,7 @@ input {
display: inline-flex;
align-items: center;
background-color: transparent !important;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
width: 100%;
/* selected checkmark icon */
&::before {
@@ -795,7 +807,7 @@ input {
visibility: hidden;
}
&.multiselect__option--disabled {
- background-color: nc-darken($color-main-background, 8%);
+ background-color: var(--color-background-dark);
opacity: .5;
}
/* add the prop tag-placeholder="create" to add the +
@@ -808,7 +820,7 @@ input {
}
}
&.multiselect__option--highlight {
- color: $color-main-text;
+ color: var(--color-main-text);
}
&:not(.multiselect__option--disabled):hover::before {
opacity: .3;
@@ -830,30 +842,30 @@ progress {
width: 100%;
padding: 0;
border: 0 none;
- background-color: nc-darken($color-main-background, 10%);
- border-radius: $border-radius;
+ background-color: var(--color-background-dark);
+ border-radius: var(--border-radius);
flex-basis: 100%;
height: 5px;
overflow: hidden;
&.warn {
&::-moz-progress-bar {
- background: $color-error;
+ background: var(--color-error);
}
&::-webkit-progress-value {
- background: $color-error;
+ background: var(--color-error);
}
}
&::-webkit-progress-bar {
background: transparent;
}
&::-moz-progress-bar {
- border-radius: $border-radius;
- background: $color-primary;
+ border-radius: var(--border-radius);
+ background: var(--color-primary);
transition: 250ms all ease-in-out;
}
&::-webkit-progress-value {
- border-radius: $border-radius;
- background: $color-primary;
+ border-radius: var(--border-radius);
+ background: var(--color-primary);
transition: 250ms all ease-in-out;
}
}
diff --git a/core/css/jquery-ui-fixes.scss b/core/css/jquery-ui-fixes.scss
index 0500e1b08c8..8ee7412af3c 100644
--- a/core/css/jquery-ui-fixes.scss
+++ b/core/css/jquery-ui-fixes.scss
@@ -1,20 +1,20 @@
/* Component containers
----------------------------------*/
.ui-widget-content {
- border: 1px solid nc-darken($color-main-background, 20%);
- background: $color-main-background none;
- color: $color-main-text;
+ border: 1px solid var(--color-border);
+ background: var(--color-main-background) none;
+ color: var(--color-main-text);
}
.ui-widget-content a {
- color: $color-main-text;
+ color: var(--color-main-text);
}
.ui-widget-header {
border: none;
- color: $color-main-text;
+ color: var(--color-main-text);
background-image: none;
}
.ui-widget-header a {
- color: $color-main-text;
+ color: var(--color-main-text);
}
/* Interaction states
@@ -22,8 +22,8 @@
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
- border: 1px solid nc-darken($color-main-background, 20%);
- background: $color-main-background none;
+ border: 1px solid var(--color-border);
+ background: var(--color-main-background) none;
font-weight: bold;
color: #555;
}
@@ -39,28 +39,28 @@
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border: 1px solid #ddd;
- background: $color-main-background none;
+ background: var(--color-main-background) none;
font-weight: bold;
- color: $color-main-text;
+ color: var(--color-main-text);
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
- color: $color-main-text;
+ color: var(--color-main-text);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
- border: 1px solid $color-primary;
- background: $color-main-background none;
+ border: 1px solid var(--color-primary);
+ background: var(--color-main-background) none;
font-weight: bold;
- color: $color-main-text;
+ color: var(--color-main-text);
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
- color: $color-main-text;
+ color: var(--color-main-text);
}
/* Interaction Cues
@@ -68,20 +68,20 @@
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
- border: 1px solid $color-main-background;
- background: $color-main-background none;
- color: nc-lighten($color-main-text, 30%);
+ border: 1px solid var(--color-main-background);
+ background: var(--color-main-background) none;
+ color: var(--color-text-lighter);
}
.ui-state-highlight a,
.ui-widget-content .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-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
- border: $color-error;
- background: $color-error none;
+ border: var(--color-error);
+ background: var(--color-error) none;
color: #ffffff;
}
.ui-state-error a,
@@ -154,10 +154,10 @@
.ui-state-hover,
.ui-state-active {
border: none;
- border-bottom: 1px solid $color-main-text;
- color: $color-main-text;
+ border-bottom: 1px solid var(--color-main-text);
+ color: var(--color-main-text);
a, a:link, a:hover, a:visited {
- color: $color-main-text;
+ color: var(--color-main-text);
}
}
.ui-state-active {
@@ -178,7 +178,7 @@
}
&.ui-widget-content {
- background: $color-main-background;
+ background: var(--color-main-background);
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 {
border: 1px solid transparent;
background: inherit;
- color: $color-primary-element;
+ color: var(--color-primary-element);
}
}
.ui-button.primary {
- background-color: $color-primary;
- color: $color-primary-text;
- border: 1px solid $color-primary-text;
+ background-color: var(--color-primary);
+ color: var(--color-primary-text);
+ border: 1px solid var(--color-primary-text);
}
diff --git a/core/css/jquery.ocdialog.scss b/core/css/jquery.ocdialog.scss
index 24cb426b18d..991ef8495ea 100644
--- a/core/css/jquery.ocdialog.scss
+++ b/core/css/jquery.ocdialog.scss
@@ -1,8 +1,8 @@
.oc-dialog {
- background: $color-main-background;
- color: nc-darken($color-main-text, 20%);
- border-radius: $border-radius;
- box-shadow: 0 0 7px $color-box-shadow;
+ background: var(--color-main-background);
+ color: var(--color-text-light);
+ border-radius: var(--border-radius);
+ box-shadow: 0 0 7px var(--color-box-shadow);
padding: 15px;
z-index: 10000;
font-size: 100%;
@@ -16,7 +16,7 @@
overflow: auto;
}
.oc-dialog-title {
- background: $color-main-background;
+ background: var(--color-main-background);
margin-left: 12px;
}
.oc-dialog-buttonrow {
@@ -29,7 +29,7 @@
padding-bottom: 0;
box-sizing: border-box;
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-right-radius: 3px;
}
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index 239876223d5..f3b89ddb48c 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -53,7 +53,7 @@
#app-content {
width: 100% !important;
left: 0 !important;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
overflow-x: hidden !important;
z-index: 1000;
}
@@ -72,7 +72,7 @@
width: 44px;
height: 44px;
z-index: 149;
- background-color: rgba($color-main-background, .7);
+ background-color: var(--color-main-background-darker);
cursor: pointer;
opacity: .6;
}
@@ -149,7 +149,7 @@ table.multiselect thead {
}
&::after {
border: 10px solid transparent;
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
bottom: 0;
content: ' ';
height: 0;
diff --git a/core/css/multiselect.scss b/core/css/multiselect.scss
index 6c8bd118060..6df137cc0f9 100644
--- a/core/css/multiselect.scss
+++ b/core/css/multiselect.scss
@@ -17,10 +17,10 @@
*/
ul.multiselectoptions {
- background-color: $color-main-background;
- border: 1px solid $color-primary;
+ background-color: var(--color-main-background);
+ border: 1px solid var(--color-primary);
border-top: none;
- box-shadow: 0 1px 10px $color-box-shadow;
+ box-shadow: 0 1px 10px var(--color-box-shadow);
padding-top: 8px;
position: absolute;
max-height: 20em;
@@ -31,7 +31,7 @@ ul.multiselectoptions {
border-bottom-right-radius: 3px;
width: 100%;
/* do not cut off group names */
- box-shadow: 0 1px 10px $color-box-shadow;
+ box-shadow: 0 1px 10px var(--color-box-shadow);
}
&.up {
border-top-left-radius: 3px;
@@ -95,7 +95,7 @@ select.multiselect {
/* To make a select look like a multiselect until it's initialized */
div.multiselect {
&.active {
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
position: relative;
z-index: 150;
}
diff --git a/core/css/public.scss b/core/css/public.scss
index cc2c6bd0826..2ddca32c884 100644
--- a/core/css/public.scss
+++ b/core/css/public.scss
@@ -2,7 +2,7 @@
.header-right {
#header-primary-action a {
- color: $color-primary-text;
+ color: var(--color-primary-text);
}
.menutoggle,
@@ -10,7 +10,7 @@
padding: 14px;
padding-right: 40px;
background-position: right 15px center;
- color: $color-primary-text;
+ color: var(--color-primary-text);
cursor: pointer;
}
diff --git a/core/css/share.scss b/core/css/share.scss
index 68b601bcb65..07489cd55a3 100644
--- a/core/css/share.scss
+++ b/core/css/share.scss
@@ -59,9 +59,8 @@
margin-right: 0;
}
.error {
- color: $color-error;
- border-color: $color-error;
- box-shadow: 0 0 6px rgba($color-error, 0.35);
+ color: var(--color-error);
+ border-color: var(--color-error);
}
.mailView .icon-mail {
opacity: 0.5;
@@ -131,7 +130,7 @@
}
#link {
- border-top: 1px solid nc-darken($color-main-background, 14%);
+ border-top: 1px solid var(--color-border);
padding-top: 8px;
#showPassword img {
padding-left: 5px;
@@ -173,7 +172,7 @@
.notCreatable {
padding-left: 12px;
padding-top: 12px;
- color: rgba($color-main-text, .4);
+ color: var(--color-text-lighter);
}
.contactsmenu-popover {
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 57333689750..3affa3d7096 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -54,7 +54,7 @@ table, td, th {
a {
border: 0;
- color: $color-main-text;
+ color: var(--color-main-text);
text-decoration: none;
cursor: pointer;
* {
@@ -83,18 +83,18 @@ ul {
}
body {
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
font-weight: 400;
font-size: .8em;
line-height: 1.6em;
- font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
- color: $color-main-text;
+ font-family: var(--font-face);
+ color: var(--color-main-text);
height: auto;
}
#body-login {
text-align: center;
- background-color: $color-primary;
+ background-color: var(--color-primary);
background-image: url('../img/background.png?v=2');
background-position: 50% 50%;
background-repeat: no-repeat;
@@ -110,14 +110,14 @@ body {
width: 258px !important;
display: inline-block;
margin-bottom: 0 !important;
- background-color: rgba($color-main-text, 0.3) !important;
+ background-color: var(--color-background-darker) !important;
border: none !important;
}
.two-factor-link {
display: inline-block;
padding: 12px;
- color: rgba($color-main-background, 0.75);
+ color: var(--color-text-lighter);
}
.float-spinner {
@@ -138,8 +138,8 @@ body {
width: 100%;
z-index: 9000;
text-align: center;
- background-color: rgba($color-main-text, 0.5);
- color: $color-primary-text;
+ background-color: var(--color-background-darker);
+ color: var(--color-primary-text);
line-height: 125%;
font-size: 24px;
div {
@@ -150,10 +150,10 @@ body {
margin: 0px auto;
}
a {
- color: $color-primary-text;
- border-bottom: 2px dotted $color-main-background;
+ color: var(--color-primary-text);
+ border-bottom: 2px dotted var(--color-main-background);
&:hover, &:focus {
- color: nc-lighten($color-main-text, 86%);
+ color: var(--color-primary-text-dark);
}
}
}
@@ -170,8 +170,8 @@ body {
}
::-webkit-scrollbar-thumb {
- background: nc-darken($color-main-background, 14%);
- border-radius: $border-radius;
+ background: var(--color-background-darker);
+ border-radius: var(--border-radius);
}
/* Searchbox */
@@ -185,9 +185,9 @@ body {
padding-left: 25px;
padding-right: 20px;
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-radius: $border-radius;
+ border-radius: var(--border-radius);
margin-top: 9px;
width: 0;
cursor: pointer;
@@ -196,11 +196,11 @@ body {
opacity: .6;
&:focus, &:active, &:valid {
background-position-x: 6px;
- color: $color-primary-text;
+ color: var(--color-primary-text);
width: 155px;
cursor: text;
- background-color: $color-primary !important;
- border: 1px solid rgba($color-primary-text, 0.5) !important;
+ background-color: var(--color-primary) !important;
+ border: 1px solid var(--color-primary-text-dark) !important;
}
&:hover, &:focus, &:active {
opacity: 1;
@@ -236,7 +236,7 @@ body {
height: 44px;
padding: 0;
margin: 0;
- background-color: rgba($color-main-background, 0.95);
+ background-color: var(--color-main-background-light);
z-index: 60;
-webkit-user-select: none;
-moz-user-select: none;
@@ -303,7 +303,7 @@ body {
#emptycontent,
.emptycontent {
- color: nc-lighten($color-main-text, 53%);
+ color: var(--color-text-maxcontrast);
text-align: center;
margin-top: 30vh;
width: 100%;
@@ -344,16 +344,16 @@ body {
/* fix sticky footer */
p.info, form fieldset legend, #datadirContent label {
text-align: center;
- color: $color-primary-text;
+ color: var(--color-primary-text);
}
form {
fieldset .warning-info, input[type='checkbox'] + label {
text-align: center;
- color: $color-primary-text;
+ color: var(--color-primary-text);
}
.warning input[type='checkbox'] {
&: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;
}
a {
- color: $color-primary-text;
- border-bottom: 1px solid nc-darken($color-main-background, 27%);
+ color: var(--color-primary-text);
+ border-bottom: 1px solid var(--color-background-darker);
}
}
.infogroup {
@@ -488,7 +488,6 @@ body {
border-top: 0 !important;
border-bottom: 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 {
@@ -496,7 +495,6 @@ body {
border-top: 0 !important;
border-top-right-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] {
@@ -522,16 +520,14 @@ label.infield {
user-select: none;
}
.errors {
- background: rgba($color-error, .35);
- border: 1px solid $color-error;
+ border: 1px solid var(--color-error);
list-style-indent: inside;
margin: 0 0 2em;
padding: 1em;
}
}
.success {
- background: rgba($color-success, .35);
- border: 1px solid $color-success;
+ border: 1px solid var(--color-success);
width: 35%;
margin: 30px auto;
padding: 1em;
@@ -542,7 +538,7 @@ label.infield {
box-sizing: border-box;
}
p.info a, #showAdvanced {
- color: $color-primary-text;
+ color: var(--color-primary-text);
}
#remember_login {
&:hover + label, &:focus + label {
@@ -616,7 +612,6 @@ label.infield {
}
/* Database selector */
-
#body-login {
form #selectDbType {
text-align: center;
@@ -629,27 +624,27 @@ label.infield {
position: static;
margin: 0 -3px 5px;
font-size: 12px;
- background: nc-darken($color-main-background, 3%);
- color: nc-lighten($color-main-text, 53%);
+ background: var(--color-background-dark);
+ color: var(--color-text-lighter);
cursor: pointer;
- border: 1px solid nc-darken($color-main-background, 14%);
+ border: 1px solid var(--color-border-dark);
span {
cursor: pointer;
padding: 10px 20px;
}
&.ui-state-hover, &.ui-state-active {
- color: $color-main-text;
- background-color: nc-darken($color-main-background, 8%);
+ color: var(--color-main-text);
+ background-color: var(--color-border);
}
}
}
.warning, .update, .error {
display: block;
padding: 10px;
- background-color: rgba($color-main-text, 0.3);
- color: $color-primary-text;
+ background-color: var(--color-background-darker);
+ color: var(--color-primary-text);
text-align: left;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
cursor: default;
}
.update {
@@ -675,23 +670,22 @@ label.infield {
#body-user .warning, #body-settings .warning {
margin-top: 8px;
padding: 5px;
- background: rgba($color-error, .15);
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
}
.warning {
legend, a {
- color: $color-primary-text !important;
+ color: var(--color-primary-text) !important;
font-weight: 600 !important;
}
}
.error {
a {
- color: $color-primary-text !important;
+ color: var(--color-primary-text) !important;
font-weight: 600 !important;
&.button {
- color: nc-lighten($color-main-text, 33%) !important;
+ color: var(--color-text-lighter) !important;
display: inline-block;
text-align: center;
}
@@ -711,7 +705,7 @@ label.infield {
}
.warning-input {
- border-color: $color-error !important;
+ border-color: var(--color-error) !important;
}
/* Fixes for log in page, TODO should be removed some time */
@@ -807,7 +801,7 @@ label.infield {
#forgot-password {
padding: 11px;
float: right;
- color: $color-primary-text;
+ color: var(--color-primary-text);
}
.wrapper {
min-height: 100%;
@@ -847,7 +841,7 @@ td.avatar {
margin: 0 auto;
max-width: 60%;
z-index: 8000;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
border: 0;
padding: 1px 8px;
display: none;
@@ -922,7 +916,7 @@ tr {
tbody tr {
&: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;
padding: 4px 8px;
width: auto;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
border: none;
.ui-state-default,
@@ -971,8 +965,8 @@ code {
padding: 7px;
font-size: 13px;
border: none;
- background-color: $color-main-background;
- color: $color-main-text;
+ background-color: var(--color-main-background);
+ color: var(--color-main-text);
.ui-datepicker-title {
line-height: 1;
@@ -995,7 +989,7 @@ code {
.ui-datepicker-calendar {
th {
font-weight: normal;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
opacity: .8;
width: 26px;
padding: 2px;
@@ -1005,20 +999,20 @@ code {
}
td {
&.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-state-hover,
.ui-state-focus {
- background-color: $color-primary;
- color: $color-primary-text;
+ background-color: var(--color-primary);
+ color: var(--color-primary-text);
font-weight: bold;
}
&.ui-datepicker-week-end:not(.ui-state-disabled) :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;
}
}
@@ -1026,8 +1020,8 @@ code {
}
.ui-datepicker-prev, .ui-datepicker-next {
- border: nc-darken($color-main-background, 14%);
- background: $color-main-background;
+ border: var(--color-border-dark);
+ background: var(--color-main-background);
}
@@ -1035,7 +1029,7 @@ code {
.ui-widget.ui-timepicker {
margin-top: 10px !important;
width: auto !important;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
.ui-widget-content {
border: none !important;
@@ -1051,8 +1045,8 @@ code {
padding: 7px;
font-size: 13px;
border: none;
- background-color: $color-main-background;
- color: $color-main-text;
+ background-color: var(--color-main-background);
+ color: var(--color-main-text);
.ui-timepicker-title {
line-height: 1;
@@ -1066,7 +1060,7 @@ code {
.ui-timepicker-table {
th {
font-weight: normal;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
opacity: .8;
&.periods {
padding: 0;
@@ -1082,17 +1076,17 @@ code {
&.ui-timepicker-minute-cell a.ui-state-active,
.ui-state-hover,
.ui-state-focus {
- background-color: $color-primary;
- color: $color-primary-text;
+ background-color: var(--color-primary);
+ color: var(--color-primary-text);
font-weight: bold;
}
&.ui-timepicker-minutes:not(.ui-state-hover) {
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
}
&.ui-timepicker-hours {
- border-right: 1px solid $color-border;
+ border-right: 1px solid var(--color-border);
}
}
}
@@ -1118,7 +1112,7 @@ code {
border-radius: 50%;
text-align: center;
font-weight: normal;
- color: $color-main-text;
+ color: var(--color-main-text);
display: block;
line-height: 18px;
width: 18px;
@@ -1163,14 +1157,14 @@ code {
width: 100%;
}
.emptycontent {
- color: nc-lighten($color-main-text, 53%);
+ color: var(--color-text-details);
text-align: center;
margin-top: 80px;
width: 100%;
display: none;
}
.filelist {
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
width: 100%;
}
#filestable.filelist {
@@ -1181,7 +1175,7 @@ code {
.filelist {
td {
padding: 14px;
- border-bottom: 1px solid $color-border;
+ border-bottom: 1px solid var(--color-border);
}
tr:last-child td {
border-bottom: none;
@@ -1270,7 +1264,7 @@ span.ui-icon {
position: relative;
align-items: center;
padding: 3px 3px 3px 10px;
- border-bottom: 1px solid $color-border;
+ border-bottom: 1px solid var(--color-border);
:last-of-type {
border-bottom: none;
@@ -1348,7 +1342,7 @@ span.ui-icon {
}
.scrollarea {
overflow: auto;
- border: 1px solid nc-darken($color-main-background, 14%);
+ border: 1px solid var(--color-background-darker);
width: 100%;
height: 240px;
}
@@ -1360,7 +1354,7 @@ span.ui-icon {
}
}
.taglist li {
- background: nc-darken($color-main-background, 3%);
+ background: var(--color-background-dark);
padding: .3em .8em;
white-space: nowrap;
overflow: hidden;
@@ -1368,7 +1362,7 @@ span.ui-icon {
-webkit-transition: background-color 500ms;
transition: background-color 500ms;
&:hover, &:active {
- background: nc-darken($color-main-background, 8%);
+ background: var(--color-background-darker);
}
}
.addinput {
@@ -1483,12 +1477,12 @@ div.crumb {
position: relative;
text-align: center;
.info {
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
text-align: center;
margin: 0 auto;
padding: 20px 0;
a {
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
font-weight: 600;
padding: 13px;
margin: -13px;
diff --git a/core/css/tooltip.scss b/core/css/tooltip.scss
index fe9a96cf314..ad433185f1c 100644
--- a/core/css/tooltip.scss
+++ b/core/css/tooltip.scss
@@ -34,7 +34,7 @@
/* default to top */
margin-top: -3px;
padding: 10px 0;
- filter: drop-shadow(0 1px 10px $color-box-shadow);
+ filter: drop-shadow(0 1px 10px var(--color-box-shadow));
&.in,
&.tooltip[aria-hidden='false'] {
visibility: visible;
@@ -60,7 +60,7 @@
left: 0;
margin-top: -10px;
border-width: 10px 10px 10px 0;
- border-right-color: $color-main-background;
+ border-right-color: var(--color-main-background);
}
}
&.left,
@@ -72,7 +72,7 @@
right: 0;
margin-top: -10px;
border-width: 10px 0 10px 10px;
- border-left-color: $color-main-background;
+ border-left-color: var(--color-main-background);
}
}
/* TOP */
@@ -83,7 +83,7 @@
.tooltip-arrow {
bottom: 0;
border-width: 10px 10px 0;
- border-top-color: $color-main-background;
+ border-top-color: var(--color-main-background);
}
}
&.top-left .tooltip-arrow {
@@ -102,7 +102,7 @@
.tooltip-arrow {
top: 0;
border-width: 0 10px 10px;
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
}
}
&[x-placement^='bottom'] .tooltip-arrow,
@@ -123,10 +123,10 @@
.tooltip-inner {
max-width: 350px;
padding: 5px 8px;
- background-color: $color-main-background;
- color: $color-main-text;
+ background-color: var(--color-main-background);
+ color: var(--color-main-text);
text-align: center;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
}
.tooltip-arrow {
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 4e2c1c396cb..43e3c6b97bb 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -1,30 +1,52 @@
-$color-main-text: #000000;
-$color-main-background: #ffffff;
+// SCSS darken/lighten function override
+@function nc-darken($color, $value) {
+ @return darken($color, $value);
+}
+
+@function nc-lighten($color, $value) {
+ @return lighten($color, $value);
+}
+
+// SCSS variables
+// DEPRECATED, please use CSS4 vars
+$color-main-text: #000 !default;
+$color-main-background: #fff !default;
+
+// used for different active/disabled states
+$color-background-dark: nc-darken($color-main-background, 7%) !default;
+$color-background-darker: nc-darken($color-main-background, 14%) !default;
+
$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;
-$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;
+$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;
-@function nc-darken($color, $value) {
- @return darken($color, $value);
-}
+$image-logo: url('../img/logo.svg?v=1');
+$image-login-background: url('../img/background.png?v=2');
-@function nc-lighten($color, $value) {
- @return lighten($color, $value);
-}
+$color-loading-light: #ccc !default;
+$color-loading-dark: #777 !default;
+
+$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75) !default;
-$image-logo: '../img/logo.svg?v=1';
-$image-login-background: '../img/background.png?v=2';
+// 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;
-$color-loading: #969696;
-$color-loading-dark: #bbbbbb;
-$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
-$color-border: nc-darken($color-main-background, 8%);
-$border-radius: 3px;
+$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
diff --git a/core/js/core.json b/core/js/core.json
index 9da91a7f639..41b927147b6 100644
--- a/core/js/core.json
+++ b/core/js/core.json
@@ -15,7 +15,8 @@
"autosize/dist/autosize.min.js",
"DOMPurify/dist/purify.min.js",
"snapjs/dist/latest/snap.js",
- "select2/select2.js"
+ "select2/select2.js",
+ "css-vars-ponyfill/dist/css-vars-ponyfill.min.js"
],
"libraries": [
"jquery-showpassword.js",
diff --git a/core/js/js.js b/core/js/js.js
index 47fe4c4be58..a7dba7981f7 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -1342,6 +1342,11 @@ function initCore() {
$('html').addClass('edge');
}
+ // css variables fallback for IE
+ if (msie > 0 || trident > 0) {
+ cssVars();
+ }
+
$(window).on('unload.main', function() {
OC._unloadCalled = true;
});
diff --git a/core/vendor/.gitignore b/core/vendor/.gitignore
index 2c04d2e3177..a74b7f89a39 100644
--- a/core/vendor/.gitignore
+++ b/core/vendor/.gitignore
@@ -176,3 +176,10 @@ DOMPurify/**
# strengthify
strengthify/examples.html
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 \ No newline at end of file
diff --git a/core/vendor/css-vars-ponyfill/LICENSE b/core/vendor/css-vars-ponyfill/LICENSE
new file mode 100644
index 00000000000..51e689fe047
--- /dev/null
+++ b/core/vendor/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.
diff --git a/core/vendor/css-vars-ponyfill/dist/css-vars-ponyfill.min.js b/core/vendor/css-vars-ponyfill/dist/css-vars-ponyfill.min.js
new file mode 100644
index 00000000000..f68b2e18b81
--- /dev/null
+++ b/core/vendor/css-vars-ponyfill/dist/css-vars-ponyfill.min.js
@@ -0,0 +1,9 @@
+/*!
+ * css-vars-ponyfill
+ * v1.7.2
+ * https://github.com/jhildenbiddle/css-vars-ponyfill
+ * (c) 2018 John Hildenbiddle <http://hildenbiddle.com>
+ * MIT license
+ */
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.cssVars=n()}(this,function(){"use strict";function e(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r={mimeType:n.mimeType||null,onBeforeSend:n.onBeforeSend||Function.prototype,onSuccess:n.onSuccess||Function.prototype,onError:n.onError||Function.prototype,onComplete:n.onComplete||Function.prototype},t=Array.isArray(e)?e:[e],o=Array.apply(null,Array(t.length)).map(function(e){return null});function s(e,n){r.onError(e,t[n],n)}function a(e,n){var s=r.onSuccess(e,t[n],n);e=!1===s?"":s||e,o[n]=e,-1===o.indexOf(null)&&r.onComplete(o)}t.forEach(function(e,n){var t=document.createElement("a");t.setAttribute("href",e),t.href=t.href;var o=t.host!==location.host,i=t.protocol===location.protocol;if(o&&"undefined"!=typeof XDomainRequest)if(i){var u=new XDomainRequest;u.open("GET",e),u.timeout=0,u.onprogress=Function.prototype,u.ontimeout=Function.prototype,u.onload=function(){a(u.responseText,n)},u.onerror=function(e){s(u,n)},setTimeout(function(){u.send()},0)}else console.log("Internet Explorer 9 Cross-Origin (CORS) requests must use the same protocol"),s(null,n);else{var c=new XMLHttpRequest;c.open("GET",e),r.mimeType&&c.overrideMimeType&&c.overrideMimeType(r.mimeType),r.onBeforeSend(c,e,n),c.onreadystatechange=function(){4===c.readyState&&(200===c.status?a(c.responseText,n):s(c,n))},c.send()}})}function n(n){var t={cssComments:/\/\*[\s\S]+?\*\//g,cssImports:/(?:@import\s*)(?:url\(\s*)?(?:['"])([^'"]*)(?:['"])(?:\s*\))?(?:[^;]*;)/g},o={include:n.include||'style,link[rel="stylesheet"]',exclude:n.exclude||null,filter:n.filter||null,onBeforeSend:n.onBeforeSend||Function.prototype,onSuccess:n.onSuccess||Function.prototype,onError:n.onError||Function.prototype,onComplete:n.onComplete||Function.prototype},s=Array.apply(null,document.querySelectorAll(o.include)).filter(function(e){return n=e,r=o.exclude,!(n.matches||n.matchesSelector||n.webkitMatchesSelector||n.mozMatchesSelector||n.msMatchesSelector||n.oMatchesSelector).call(n,r);var n,r}),a=Array.apply(null,Array(s.length)).map(function(e){return null});function i(){if(-1===a.indexOf(null)){var e=a.join("");o.onComplete(e,a,s)}}function u(n,r,t,s){var u=o.onSuccess(n,t,s);(function n(r,t,s,a){var i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[];var u=arguments.length>5&&void 0!==arguments[5]?arguments[5]:[];var l=c(r,s,u);l.rules.length?e(l.absoluteUrls,{onBeforeSend:function(e,n,r){o.onBeforeSend(e,t,n)},onSuccess:function(e,n,r){var s=o.onSuccess(e,t,n),a=c(e=!1===s?"":s||e,n,u);return a.rules.forEach(function(n,r){e=e.replace(n,a.absoluteRules[r])}),e},onError:function(e,o,c){i.push({xhr:e,url:o}),u.push(l.rules[c]),n(r,t,s,a,i,u)},onComplete:function(e){e.forEach(function(e,n){r=r.replace(l.rules[n],e)}),n(r,t,s,a,i,u)}}):a(r,i)})(n=!1===u?"":u||n,t,s,function(e,n){null===a[r]&&(n.forEach(function(e){return o.onError(e.xhr,t,e.url)}),!o.filter||o.filter.test(e)?a[r]=e:a[r]="",i())})}function c(e,n){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],s={};return s.rules=(e.replace(t.cssComments,"").match(t.cssImports)||[]).filter(function(e){return-1===o.indexOf(e)}),s.urls=s.rules.map(function(e){return e.replace(t.cssImports,"$1")}),s.absoluteUrls=s.urls.map(function(e){return r(e,n)}),s.absoluteRules=s.rules.map(function(e,t){var o=s.urls[t],a=r(s.absoluteUrls[t],n);return e.replace(o,a)}),s}s.length?s.forEach(function(n,t){var s=n.getAttribute("href"),c=n.getAttribute("rel"),l="LINK"===n.nodeName&&s&&c&&"stylesheet"===c.toLowerCase(),f="STYLE"===n.nodeName;l?e(s,{mimeType:"text/css",onBeforeSend:function(e,r,t){o.onBeforeSend(e,n,r)},onSuccess:function(e,o,a){var i=r(s,location.href);u(e,t,n,i)},onError:function(e,r,s){a[t]="",o.onError(e,n,r),i()}}):f?u(n.textContent,t,n,location.href):(a[t]="",i())}):o.onComplete("",[])}function r(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:location.href,r=document.implementation.createHTMLDocument(""),t=r.createElement("base"),o=r.createElement("a");return r.head.appendChild(t),r.body.appendChild(o),t.href=n,o.href=e,o.href}function t(){for(var e=function(e){return e instanceof Object&&e.constructor===Object},n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];return r.reduce(function(n,r){return Object.keys(r).forEach(function(o){var s=n[o],a=r[o];e(s)&&e(a)?n[o]=t(s,a):n[o]=a}),n},{})}var o=s;function s(e,n,r){e instanceof RegExp&&(e=a(e,r)),n instanceof RegExp&&(n=a(n,r));var t=i(e,n,r);return t&&{start:t[0],end:t[1],pre:r.slice(0,t[0]),body:r.slice(t[0]+e.length,t[1]),post:r.slice(t[1]+n.length)}}function a(e,n){var r=n.match(e);return r?r[0]:null}function i(e,n,r){var t,o,s,a,i,u=r.indexOf(e),c=r.indexOf(n,u+1),l=u;if(u>=0&&c>0){for(t=[],s=r.length;l>=0&&!i;)l==u?(t.push(l),u=r.indexOf(e,l+1)):1==t.length?i=[t.pop(),c]:((o=t.pop())<s&&(s=o,a=c),c=r.indexOf(n,l+1)),l=u<c&&u>=0?u:c;t.length&&(i=[s,a])}return i}function u(e){function n(e){throw new Error("CSS parse error: "+e)}function r(n){var r=n.exec(e);if(r)return e=e.slice(r[0].length),r}function t(){r(/^\s*/)}function o(){return r(/^{\s*/)}function s(){return r(/^}/)}function a(){if(t(),"/"===e[0]&&"*"===e[1]){for(var r=2;e[r]&&("*"!==e[r]||"/"!==e[r+1]);)r++;if(!e[r])return n("end of comment is missing");var o=e.slice(2,r);return e=e.slice(r+2),{type:"comment",comment:o}}}function i(){for(var e=[],n=void 0;n=a();)e.push(n);return e}function u(){for(t();"}"===e[0];)n("extra closing bracket");var o=r(/^(("(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^{])+)/);if(o)return o[0].trim().replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g,"").replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g,function(e){return e.replace(/,/g,"‌")}).split(/\s*(?![^(]*\)),\s*/).map(function(e){return e.replace(/\u200C/g,",")})}function c(){r(/^([;\s]*)+/);var e=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//g,t=r(/^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);if(t){if(t=t[0].trim(),!r(/^:\s*/))return n("property missing ':'");var o=r(/^((?:\/\*.*?\*\/|'(?:\\'|.)*?'|"(?:\\"|.)*?"|\((\s*'(?:\\'|.)*?'|"(?:\\"|.)*?"|[^)]*?)\s*\)|[^};])+)/),s={type:"declaration",property:t.replace(e,""),value:o?o[0].replace(e,"").trim():""};return r(/^[;\s]*/),s}}function l(){if(!o())return n("missing '{'");for(var e=void 0,r=i();e=c();)r.push(e),r=r.concat(i());return s()?r:n("missing '}'")}function f(){t();for(var e=[],n=void 0;n=r(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/);)e.push(n[1]),r(/^,\s*/);if(e.length)return{type:"keyframe",values:e,declarations:l()}}function p(){if(t(),"@"===e[0])return function(){var e=r(/^@([-\w]+)?keyframes\s*/);if(e){var t=e[1];if(!(e=r(/^([-\w]+)\s*/)))return n("@keyframes missing name");var a=e[1];if(!o())return n("@keyframes missing '{'");for(var u=void 0,c=i();u=f();)c.push(u),c=c.concat(i());return s()?{type:"keyframes",name:a,vendor:t,keyframes:c}:n("@keyframes missing '}'")}}()||function(){var e=r(/^@supports *([^{]+)/);if(e)return{type:"supports",supports:e[1].trim(),rules:d()}}()||function(){if(r(/^@host\s*/))return{type:"host",rules:d()}}()||function(){var e=r(/^@media *([^{]+)/);if(e)return{type:"media",media:e[1].trim(),rules:d()}}()||function(){var e=r(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);if(e)return{type:"custom-media",name:e[1].trim(),media:e[2].trim()}}()||function(){if(r(/^@page */))return{type:"page",selectors:u()||[],declarations:l()}}()||function(){var e=r(/^@([-\w]+)?document *([^{]+)/);if(e)return{type:"document",document:e[2].trim(),vendor:e[1]?e[1].trim():null,rules:d()}}()||function(){if(r(/^@font-face\s*/))return{type:"font-face",declarations:l()}}()||function(){var e=r(/^@(import|charset|namespace)\s*([^;]+);/);if(e)return{type:e[1],name:e[2].trim()}}()}function d(r){if(!r&&!o())return n("missing '{'");for(var t,a=void 0,c=i();e.length&&(r||"}"!==e[0])&&(a=p()||(void 0,(t=u()||[]).length||n("selector missing"),{type:"rule",selectors:t,declarations:l()}));)c.push(a),c=c.concat(i());return r||s()?c:n("missing '}'")}return{type:"stylesheet",stylesheet:{rules:d(!0),errors:[]}}}s.range=i;var c={},l="--",f="var";function p(e){var n,r,s={},a=t({fixNestedCalc:!0,onlyVars:!0,persist:!1,preserve:!1,variables:{},onWarning:function(){}},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),i=a.persist?c:a.variables,p=u(e);if(a.onlyVars&&(p.stylesheet.rules=function e(n){return n.filter(function(n){if(n.declarations){var r=n.declarations.filter(function(e){var n=e.property&&0===e.property.indexOf(l),r=e.value&&e.value.indexOf(f+"(")>-1;return n||r});return"font-face"!==n.type&&(n.declarations=r),Boolean(r.length)}return n.keyframes?Boolean(n.keyframes.filter(function(e){return Boolean(e.declarations.filter(function(e){var n=e.property&&0===e.property.indexOf(l),r=e.value&&e.value.indexOf(f+"(")>-1;return n||r}).length)}).length):!n.rules||(n.rules=e(n.rules).filter(function(e){return e.declarations&&e.declarations.length}),Boolean(n.rules.length))})}(p.stylesheet.rules)),p.stylesheet.rules.forEach(function(e){var n=[];if("rule"===e.type&&1===e.selectors.length&&":root"===e.selectors[0]&&(e.declarations.forEach(function(e,r){var t=e.property,o=e.value;t&&0===t.indexOf(l)&&(s[t]=o,n.push(r))}),!a.preserve))for(var r=n.length-1;r>=0;r--)e.declarations.splice(n[r],1)}),Object.keys(a.variables).forEach(function(e){var n="--"+e.replace(/^-+/,""),r=a.variables[e];e!==n&&(a.variables[n]=r,delete a.variables[e]),a.persist&&(c[n]=r)}),Object.keys(i).length){var m={declarations:[],selectors:[":root"],type:"rule"};Object.keys(i).forEach(function(e){s[e]=i[e],m.declarations.push({type:"declaration",property:e,value:i[e]}),a.persist&&(c[e]=i[e])}),a.preserve&&p.stylesheet.rules.push(m)}return function e(n,r){n.rules.forEach(function(t){t.rules?e(t,r):t.keyframes?t.keyframes.forEach(function(e){"keyframe"===e.type&&r(e.declarations,t)}):t.declarations&&r(t.declarations,n)})}(p.stylesheet,function(e,n){for(var r=void 0,t=void 0,o=void 0,i=0;i<e.length;i++)o=(r=e[i]).value,"declaration"===r.type&&o&&-1!==o.indexOf(f+"(")&&"undefined"!==(t=d(o,s,a))&&(a.preserve?(e.splice(i,0,{type:r.type,property:r.property,value:t}),i++):r.value=t)}),a.fixNestedCalc&&(n=p.stylesheet.rules,r=/(-[a-z]+-)?calc\(/,n.forEach(function(e){e.declarations&&e.declarations.forEach(function(e){for(var n=e.value,t="";r.test(n);){var s=o("calc(",")",n||"");for(n=n.slice(s.end);r.test(s.body);){var a=o(r,")",s.body);s.body=a.pre+"("+a.body+")"+a.post}t+=s.pre+"calc("+s.body,t+=r.test(n)?"":")"+s.post}e.value=t||e.value})})),function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",r=arguments[2],t={charset:function(e){return"@charset "+e.name+";"},comment:function(e){return 0===e.comment.indexOf("__CSSVARSPONYFILL")?"/*"+e.comment+"*/":""},"custom-media":function(e){return"@custom-media "+e.name+" "+e.media+";"},declaration:function(e){return e.property+":"+e.value+";"},document:function(e){return"@"+(e.vendor||"")+"document "+e.document+"{"+o(e.rules)+"}"},"font-face":function(e){return"@font-face{"+o(e.declarations)+"}"},host:function(e){return"@host{"+o(e.rules)+"}"},import:function(e){return"@import "+e.name+";"},keyframe:function(e){return e.values.join(",")+"{"+o(e.declarations)+"}"},keyframes:function(e){return"@"+(e.vendor||"")+"keyframes "+e.name+"{"+o(e.keyframes)+"}"},media:function(e){return"@media "+e.media+"{"+o(e.rules)+"}"},namespace:function(e){return"@namespace "+e.name+";"},page:function(e){return"@page "+(e.selectors.length?e.selectors.join(", "):"")+"{"+o(e.declarations)+"}"},rule:function(e){var n=e.declarations;if(n.length)return e.selectors.join(",")+"{"+o(n)+"}"},supports:function(e){return"@supports "+e.supports+"{"+o(e.rules)+"}"}};function o(e){for(var o="",s=0;s<e.length;s++){var a=e[s];r&&r(a);var i=t[a.type](a);i&&(o+=i,i.length&&a.selectors&&(o+=n))}return o}return o(e.stylesheet.rules)}(p)}function d(e,n,r){var t=o("(",")",e),s=e.indexOf("var("),a=o("(",")",e.substring(s)).body,i="CSS transform warning:";t||r.onWarning(i+' missing closing ")" in the value "'+e+'"'),""===a&&r.onWarning(i+" var() must contain a non-whitespace string");var u=f+"("+a+")",c=a.replace(/([\w-]+)(?:\s*,\s*)?(.*)?/,function(e,t,o){var s=n[t];return s||o||r.onWarning(i+' variable "'+t+'" is undefined'),!s&&o?o:s});return-1!==(e=e.split(u).join(c)).indexOf(f+"(")&&(e=d(e,n,r)),e}var m="css-vars-ponyfill",v={include:"style,link[rel=stylesheet]",exclude:"",fixNestedCalc:!0,onlyLegacy:!0,onlyVars:!1,preserve:!1,silent:!1,updateDOM:!0,updateURLs:!0,variables:{},onBeforeSend:function(){},onSuccess:function(){},onWarning:function(){},onError:function(){},onComplete:function(){}},y={cssComments:/\/\*[\s\S]+?\*\//g,cssUrls:/url\((?!['"]?(?:data|http|\/\/):)['"]?([^'")]*)['"]?\)/g,cssVars:/(?:(?::root\s*{\s*[^;]*;*\s*)|(?:var\(\s*))(--[^:)]+)(?:\s*[:)])/};function h(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:location.href,r=document.implementation.createHTMLDocument(""),t=r.createElement("base"),o=r.createElement("a");return r.head.appendChild(t),r.body.appendChild(o),t.href=n,o.href=e,o.href}return function e(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=t(v,r);function s(e,n,r,t){o.silent||console.error(e+"\n",n),o.onError(e,n,r,t)}function a(e){o.silent||console.warn(e),o.onWarning(e)}if("loading"!==document.readyState){var i=window.CSS&&window.CSS.supports&&window.CSS.supports("(--a: 0)");if(i&&o.onlyLegacy)i&&o.updateDOM&&Object.keys(o.variables).forEach(function(e){var n="--"+e.replace(/^-+/,""),r=o.variables[e];document.documentElement.style.setProperty(n,r)});else{var u=m;n({include:o.include,exclude:"#"+u+(o.exclude?","+o.exclude:""),filter:o.onlyVars?y.cssVars:null,onBeforeSend:o.onBeforeSend,onSuccess:function(e,n,r){var t=o.onSuccess(e,n,r);return e=!1===t?"":t||e,o.updateURLs&&(e.replace(y.cssComments,"").match(y.cssUrls)||[]).forEach(function(n){var t=n.replace(y.cssUrls,"$1"),o=h(t,r);e=e.replace(n,n.replace(t,o))}),e},onError:function(e,n,r){var t=e.responseURL||h(r,location.href),o=e.statusText?"("+e.statusText+")":"Unspecified Error"+(0===e.status?" (possibly CORS related)":"");s("CSS XHR Error: "+t+" "+e.status+" "+o,n,e,t)},onComplete:function(e,n,r){var t=/\/\*__CSSVARSPONYFILL-(\d+)__\*\//g,i=null;e=n.map(function(e,n){return y.cssVars.test(e)?e:"/*__CSSVARSPONYFILL-"+n+"__*/"}).join("");try{e=p(e,{fixNestedCalc:o.fixNestedCalc,onlyVars:o.onlyVars,persist:o.updateDOM,preserve:o.preserve,variables:o.variables,onWarning:a});for(var c=t.exec(e);null!==c;){var l=c[0],f=c[1];e=e.replace(l,n[f]),c=t.exec(e)}if(o.updateDOM&&r&&r.length){var d=r[r.length-1];(i=document.querySelector("#"+u)||document.createElement("style")).setAttribute("id",u),i.textContent!==e&&(i.textContent=e),d.nextSibling!==i&&d.parentNode.insertBefore(i,d.nextSibling)}}catch(e){var m=!1;n.forEach(function(e,n){try{e=p(e,o)}catch(e){var t=r[n-0];m=!0,s(e.message,t)}}),m||s(e.message||e)}o.onComplete(e,i)}})}}else document.addEventListener("DOMContentLoaded",function n(t){e(r),document.removeEventListener("DOMContentLoaded",n)})}});
+//# sourceMappingURL=css-vars-ponyfill.min.js.map
diff --git a/core/vendor/css-vars-ponyfill/dist/css-vars-ponyfill.min.js.map b/core/vendor/css-vars-ponyfill/dist/css-vars-ponyfill.min.js.map
new file mode 100644
index 00000000000..a14eaaf0ab7
--- /dev/null
+++ b/core/vendor/css-vars-ponyfill/dist/css-vars-ponyfill.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"css-vars-ponyfill.min.js","sources":["../node_modules/get-css-data/dist/get-css-data.esm.js","../src/merge-deep.js","../node_modules/balanced-match/index.js","../src/parse-css.js","../src/transform-css.js","../src/walk-css.js","../src/stringify-css.js","../src/index.js"],"sourcesContent":["/*!\n * get-css-data\n * v1.3.2\n * https://github.com/jhildenbiddle/get-css-data\n * (c) 2018 John Hildenbiddle <http://hildenbiddle.com>\n * MIT license\n */\nfunction getUrls(urls) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n var settings = {\n mimeType: options.mimeType || null,\n onBeforeSend: options.onBeforeSend || Function.prototype,\n onSuccess: options.onSuccess || Function.prototype,\n onError: options.onError || Function.prototype,\n onComplete: options.onComplete || Function.prototype\n };\n var urlArray = Array.isArray(urls) ? urls : [ urls ];\n var urlQueue = Array.apply(null, Array(urlArray.length)).map(function(x) {\n return null;\n });\n function onError(xhr, urlIndex) {\n settings.onError(xhr, urlArray[urlIndex], urlIndex);\n }\n function onSuccess(responseText, urlIndex) {\n var returnVal = settings.onSuccess(responseText, urlArray[urlIndex], urlIndex);\n responseText = returnVal === false ? \"\" : returnVal || responseText;\n urlQueue[urlIndex] = responseText;\n if (urlQueue.indexOf(null) === -1) {\n settings.onComplete(urlQueue);\n }\n }\n urlArray.forEach(function(url, i) {\n var parser = document.createElement(\"a\");\n parser.setAttribute(\"href\", url);\n parser.href = parser.href;\n var isCrossDomain = parser.host !== location.host;\n var isSameProtocol = parser.protocol === location.protocol;\n if (isCrossDomain && typeof XDomainRequest !== \"undefined\") {\n if (isSameProtocol) {\n var xdr = new XDomainRequest();\n xdr.open(\"GET\", url);\n xdr.timeout = 0;\n xdr.onprogress = Function.prototype;\n xdr.ontimeout = Function.prototype;\n xdr.onload = function() {\n onSuccess(xdr.responseText, i);\n };\n xdr.onerror = function(err) {\n onError(xdr, i);\n };\n setTimeout(function() {\n xdr.send();\n }, 0);\n } else {\n console.log(\"Internet Explorer 9 Cross-Origin (CORS) requests must use the same protocol\");\n onError(null, i);\n }\n } else {\n var xhr = new XMLHttpRequest();\n xhr.open(\"GET\", url);\n if (settings.mimeType && xhr.overrideMimeType) {\n xhr.overrideMimeType(settings.mimeType);\n }\n settings.onBeforeSend(xhr, url, i);\n xhr.onreadystatechange = function() {\n if (xhr.readyState === 4) {\n if (xhr.status === 200) {\n onSuccess(xhr.responseText, i);\n } else {\n onError(xhr, i);\n }\n }\n };\n xhr.send();\n }\n });\n}\n\n/**\n * Gets CSS data from <style> and <link> nodes (including @imports), then\n * returns data in order processed by DOM. Allows specifying nodes to\n * include/exclude and filtering CSS data using RegEx.\n *\n * @preserve\n * @param {object} [options] The options object\n * @param {string} [options.include] CSS selector matching <link> and <style>\n * nodes to include\n * @param {string} [options.exclude] CSS selector matching <link> and <style>\n * nodes to exclude\n * @param {object} [options.filter] Regular expression used to filter node CSS\n * data. Each block of CSS data is tested against the filter,\n * and only matching data is included.\n * @param {function} [options.onBeforeSend] Callback before XHR is sent. Passes\n * 1) the XHR object, 2) source node reference, and 3) the\n * source URL as arguments.\n * @param {function} [options.onSuccess] Callback on each CSS node read. Passes\n * 1) CSS text, 2) source node reference, and 3) the source\n * URL as arguments.\n * @param {function} [options.onError] Callback on each error. Passes 1) the XHR\n * object for inspection, 2) soure node reference, and 3) the\n * source URL that failed (either a <link> href or an @import)\n * as arguments\n * @param {function} [options.onComplete] Callback after all nodes have been\n * processed. Passes 1) concatenated CSS text, 2) an array of\n * CSS text in DOM order, and 3) an array of nodes in DOM\n * order as arguments.\n *\n * @example\n *\n * getCssData({\n * include: 'style,link[rel=\"stylesheet\"]', // default\n * exclude: '[href=\"skip.css\"]',\n * filter : /red/,\n * onBeforeSend(xhr, node, url) {\n * // ...\n * }\n * onSuccess(cssText, node, url) {\n * // ...\n * }\n * onError(xhr, node, url) {\n * // ...\n * },\n * onComplete(cssText, cssArray) {\n * // ...\n * },\n * });\n */ function getCssData(options) {\n var regex = {\n cssComments: /\\/\\*[\\s\\S]+?\\*\\//g,\n cssImports: /(?:@import\\s*)(?:url\\(\\s*)?(?:['\"])([^'\"]*)(?:['\"])(?:\\s*\\))?(?:[^;]*;)/g\n };\n var settings = {\n include: options.include || 'style,link[rel=\"stylesheet\"]',\n exclude: options.exclude || null,\n filter: options.filter || null,\n onBeforeSend: options.onBeforeSend || Function.prototype,\n onSuccess: options.onSuccess || Function.prototype,\n onError: options.onError || Function.prototype,\n onComplete: options.onComplete || Function.prototype\n };\n var sourceNodes = Array.apply(null, document.querySelectorAll(settings.include)).filter(function(node) {\n return !matchesSelector(node, settings.exclude);\n });\n var cssArray = Array.apply(null, Array(sourceNodes.length)).map(function(x) {\n return null;\n });\n function handleComplete() {\n var isComplete = cssArray.indexOf(null) === -1;\n if (isComplete) {\n var cssText = cssArray.join(\"\");\n settings.onComplete(cssText, cssArray, sourceNodes);\n }\n }\n function handleSuccess(cssText, cssIndex, node, sourceUrl) {\n var returnVal = settings.onSuccess(cssText, node, sourceUrl);\n cssText = returnVal === false ? \"\" : returnVal || cssText;\n resolveImports(cssText, node, sourceUrl, function(resolvedCssText, errorData) {\n if (cssArray[cssIndex] === null) {\n errorData.forEach(function(data) {\n return settings.onError(data.xhr, node, data.url);\n });\n if (!settings.filter || settings.filter.test(resolvedCssText)) {\n cssArray[cssIndex] = resolvedCssText;\n } else {\n cssArray[cssIndex] = \"\";\n }\n handleComplete();\n }\n });\n }\n function parseImportData(cssText, baseUrl) {\n var ignoreRules = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];\n var importData = {};\n importData.rules = (cssText.replace(regex.cssComments, \"\").match(regex.cssImports) || []).filter(function(rule) {\n return ignoreRules.indexOf(rule) === -1;\n });\n importData.urls = importData.rules.map(function(rule) {\n return rule.replace(regex.cssImports, \"$1\");\n });\n importData.absoluteUrls = importData.urls.map(function(url) {\n return getFullUrl(url, baseUrl);\n });\n importData.absoluteRules = importData.rules.map(function(rule, i) {\n var oldUrl = importData.urls[i];\n var newUrl = getFullUrl(importData.absoluteUrls[i], baseUrl);\n return rule.replace(oldUrl, newUrl);\n });\n return importData;\n }\n function resolveImports(cssText, node, baseUrl, callbackFn) {\n var __errorData = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];\n var __errorRules = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : [];\n var importData = parseImportData(cssText, baseUrl, __errorRules);\n if (importData.rules.length) {\n getUrls(importData.absoluteUrls, {\n onBeforeSend: function onBeforeSend(xhr, url, urlIndex) {\n settings.onBeforeSend(xhr, node, url);\n },\n onSuccess: function onSuccess(cssText, url, urlIndex) {\n var returnVal = settings.onSuccess(cssText, node, url);\n cssText = returnVal === false ? \"\" : returnVal || cssText;\n var responseImportData = parseImportData(cssText, url, __errorRules);\n responseImportData.rules.forEach(function(rule, i) {\n cssText = cssText.replace(rule, responseImportData.absoluteRules[i]);\n });\n return cssText;\n },\n onError: function onError(xhr, url, urlIndex) {\n __errorData.push({\n xhr: xhr,\n url: url\n });\n __errorRules.push(importData.rules[urlIndex]);\n resolveImports(cssText, node, baseUrl, callbackFn, __errorData, __errorRules);\n },\n onComplete: function onComplete(responseArray) {\n responseArray.forEach(function(importText, i) {\n cssText = cssText.replace(importData.rules[i], importText);\n });\n resolveImports(cssText, node, baseUrl, callbackFn, __errorData, __errorRules);\n }\n });\n } else {\n callbackFn(cssText, __errorData);\n }\n }\n if (sourceNodes.length) {\n sourceNodes.forEach(function(node, i) {\n var linkHref = node.getAttribute(\"href\");\n var linkRel = node.getAttribute(\"rel\");\n var isLink = node.nodeName === \"LINK\" && linkHref && linkRel && linkRel.toLowerCase() === \"stylesheet\";\n var isStyle = node.nodeName === \"STYLE\";\n if (isLink) {\n getUrls(linkHref, {\n mimeType: \"text/css\",\n onBeforeSend: function onBeforeSend(xhr, url, urlIndex) {\n settings.onBeforeSend(xhr, node, url);\n },\n onSuccess: function onSuccess(cssText, url, urlIndex) {\n var sourceUrl = getFullUrl(linkHref, location.href);\n handleSuccess(cssText, i, node, sourceUrl);\n },\n onError: function onError(xhr, url, urlIndex) {\n cssArray[i] = \"\";\n settings.onError(xhr, node, url);\n handleComplete();\n }\n });\n } else if (isStyle) {\n handleSuccess(node.textContent, i, node, location.href);\n } else {\n cssArray[i] = \"\";\n handleComplete();\n }\n });\n } else {\n settings.onComplete(\"\", []);\n }\n}\n\nfunction getFullUrl(url) {\n var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : location.href;\n var d = document.implementation.createHTMLDocument(\"\");\n var b = d.createElement(\"base\");\n var a = d.createElement(\"a\");\n d.head.appendChild(b);\n d.body.appendChild(a);\n b.href = base;\n a.href = url;\n return a.href;\n}\n\nfunction matchesSelector(elm, selector) {\n var matches = elm.matches || elm.matchesSelector || elm.webkitMatchesSelector || elm.mozMatchesSelector || elm.msMatchesSelector || elm.oMatchesSelector;\n return matches.call(elm, selector);\n}\n\nexport default getCssData;\n//# sourceMappingURL=get-css-data.esm.js.map\n","// Functions\n// =============================================================================\n/**\n * Performs a deep merge of objects and returns new object. Does not modify\n * objects (immutable) and merges arrays via concatenation.\n *\n * @param {...object} objects - Objects to merge\n * @returns {object} New object with merged key/values\n */\nfunction mergeDeep(...objects) {\n const isObject = obj => obj instanceof Object && obj.constructor === Object;\n\n return objects.reduce((prev, obj) => {\n Object.keys(obj).forEach(key => {\n const pVal = prev[key];\n const oVal = obj[key];\n\n // if (Array.isArray(pVal) && Array.isArray(oVal)) {\n // prev[key] = pVal.concat(...oVal);\n // }\n if (isObject(pVal) && isObject(oVal)) {\n prev[key] = mergeDeep(pVal, oVal);\n }\n else {\n prev[key] = oVal;\n }\n });\n\n return prev;\n }, {});\n}\n\n\n// Export\n// =============================================================================\nexport default mergeDeep;\n","'use strict';\nmodule.exports = balanced;\nfunction balanced(a, b, str) {\n if (a instanceof RegExp) a = maybeMatch(a, str);\n if (b instanceof RegExp) b = maybeMatch(b, str);\n\n var r = range(a, b, str);\n\n return r && {\n start: r[0],\n end: r[1],\n pre: str.slice(0, r[0]),\n body: str.slice(r[0] + a.length, r[1]),\n post: str.slice(r[1] + b.length)\n };\n}\n\nfunction maybeMatch(reg, str) {\n var m = str.match(reg);\n return m ? m[0] : null;\n}\n\nbalanced.range = range;\nfunction range(a, b, str) {\n var begs, beg, left, right, result;\n var ai = str.indexOf(a);\n var bi = str.indexOf(b, ai + 1);\n var i = ai;\n\n if (ai >= 0 && bi > 0) {\n begs = [];\n left = str.length;\n\n while (i >= 0 && !result) {\n if (i == ai) {\n begs.push(i);\n ai = str.indexOf(a, i + 1);\n } else if (begs.length == 1) {\n result = [ begs.pop(), bi ];\n } else {\n beg = begs.pop();\n if (beg < left) {\n left = beg;\n right = bi;\n }\n\n bi = str.indexOf(b, i + 1);\n }\n\n i = ai < bi && ai >= 0 ? ai : bi;\n }\n\n if (begs.length) {\n result = [ left, right ];\n }\n }\n\n return result;\n}\n","/**\n * Based on css parser/compiler by NxChg\n * https://github.com/NxtChg/pieces/tree/master/js/css_parser\n */\n\n\n// Functions\n// =============================================================================\n/**\n * Parses CSS string and generates AST object\n *\n * @param {string} css The CSS stringt to be converted to an AST\n * @returns {object}\n */\nfunction cssParse(css) {\n const errors = [];\n\n // Errors\n // -------------------------------------------------------------------------\n function error(msg) {\n throw new Error(`CSS parse error: ${msg}`);\n }\n\n // RegEx\n // -------------------------------------------------------------------------\n // Match regexp and return captures\n function match(re) {\n const m = re.exec(css);\n\n if (m) {\n css = css.slice(m[0].length);\n\n return m;\n }\n }\n\n function whitespace() {\n match(/^\\s*/);\n }\n function open() {\n return match(/^{\\s*/);\n }\n function close() {\n return match(/^}/);\n }\n\n // Comments\n // -------------------------------------------------------------------------\n function comment() {\n whitespace();\n\n if (css[0] !== '/' || css[1] !== '*') { return; }\n\n let i = 2;\n while (css[i] && (css[i] !== '*' || css[i + 1] !== '/')) { i++; }\n\n // FIXED\n if (!css[i]) { return error('end of comment is missing'); }\n\n const str = css.slice(2, i);\n css = css.slice(i + 2);\n\n return { type: 'comment', comment: str };\n }\n function comments() {\n const cmnts = [];\n\n let c;\n\n while ((c = comment())) {\n cmnts.push(c);\n }\n return cmnts;\n }\n\n // Selector\n // -------------------------------------------------------------------------\n function selector() {\n whitespace();\n while (css[0] === '}') {\n error('extra closing bracket');\n }\n\n const m = match(/^((\"(?:\\\\\"|[^\"])*\"|'(?:\\\\'|[^'])*'|[^{])+)/);\n\n if (m)\n { return m[0]\n .trim() // remove all comments from selectors\n .replace(/\\/\\*([^*]|[\\r\\n]|(\\*+([^*/]|[\\r\\n])))*\\*\\/+/g, '')\n .replace(/\"(?:\\\\\"|[^\"])*\"|'(?:\\\\'|[^'])*'/g, function(m) {\n return m.replace(/,/g, '\\u200C');\n })\n .split(/\\s*(?![^(]*\\)),\\s*/)\n .map(function(s) {\n return s.replace(/\\u200C/g, ',');\n }); }\n }\n\n // Declarations\n // -------------------------------------------------------------------------\n function declaration() {\n match(/^([;\\s]*)+/); // ignore empty declarations + whitespace\n\n const comment_regexp = /\\/\\*[^*]*\\*+([^/*][^*]*\\*+)*\\//g;\n\n let prop = match(/^(\\*?[-#/*\\\\\\w]+(\\[[0-9a-z_-]+\\])?)\\s*/);\n if (!prop) { return; }\n\n prop = prop[0].trim();\n\n if (!match(/^:\\s*/)) { return error('property missing \\':\\''); }\n\n // Quotes regex repeats verbatim inside and outside parentheses\n const val = match(/^((?:\\/\\*.*?\\*\\/|'(?:\\\\'|.)*?'|\"(?:\\\\\"|.)*?\"|\\((\\s*'(?:\\\\'|.)*?'|\"(?:\\\\\"|.)*?\"|[^)]*?)\\s*\\)|[^};])+)/);\n\n const ret = { type: 'declaration', property: prop.replace(comment_regexp, ''), value: val ? val[0].replace(comment_regexp, '').trim() : '' };\n\n match(/^[;\\s]*/);\n\n return ret;\n }\n function declarations() {\n if (!open()) { return error('missing \\'{\\''); }\n\n let d,\n decls = comments();\n\n while ((d = declaration())) {\n decls.push(d);\n decls = decls.concat(comments());\n }\n\n if (!close()) { return error('missing \\'}\\''); }\n\n return decls;\n }\n\n // Keyframes\n // -------------------------------------------------------------------------\n function keyframe() {\n whitespace();\n\n const vals = [];\n\n let m;\n\n while ((m = match(/^((\\d+\\.\\d+|\\.\\d+|\\d+)%?|[a-z]+)\\s*/))) {\n vals.push(m[1]);\n match(/^,\\s*/);\n }\n\n if (vals.length) { return { type: 'keyframe', values: vals, declarations: declarations() }; }\n }\n function at_keyframes() {\n let m = match(/^@([-\\w]+)?keyframes\\s*/);\n\n if (!m) { return; }\n\n const vendor = m[1];\n\n m = match(/^([-\\w]+)\\s*/);\n if (!m) { return error('@keyframes missing name'); } // identifier\n\n const name = m[1];\n\n if (!open()) { return error('@keyframes missing \\'{\\''); }\n\n let frame,\n frames = comments();\n while ((frame = keyframe())) {\n frames.push(frame);\n frames = frames.concat(comments());\n }\n\n if (!close()) { return error('@keyframes missing \\'}\\''); }\n\n return { type: 'keyframes', name: name, vendor: vendor, keyframes: frames };\n }\n\n // @ Rules\n // -------------------------------------------------------------------------\n function at_page() {\n const m = match(/^@page */);\n if (m) {\n const sel = selector() || [];\n return { type: 'page', selectors: sel, declarations: declarations() };\n }\n }\n function at_fontface() {\n const m = match(/^@font-face\\s*/);\n if (m) { return { type: 'font-face', declarations: declarations() }; }\n }\n function at_supports() {\n const m = match(/^@supports *([^{]+)/);\n if (m) { return { type: 'supports', supports: m[1].trim(), rules: rules() }; }\n }\n function at_host() {\n const m = match(/^@host\\s*/);\n if (m) { return { type: 'host', rules: rules() }; }\n }\n function at_media() {\n const m = match(/^@media *([^{]+)/);\n if (m) { return { type: 'media', media: m[1].trim(), rules: rules() }; }\n }\n function at_custom_m() {\n const m = match(/^@custom-media\\s+(--[^\\s]+)\\s*([^{;]+);/);\n if (m) { return { type: 'custom-media', name: m[1].trim(), media: m[2].trim() }; }\n }\n function at_document() {\n const m = match(/^@([-\\w]+)?document *([^{]+)/);\n // FIXED\n if (m) { return { type: 'document', document: m[2].trim(), vendor: m[1] ? m[1].trim() : null, rules: rules() }; }\n }\n function at_x() {\n const m = match(/^@(import|charset|namespace)\\s*([^;]+);/);\n if (m) { return { type: m[1], name: m[2].trim() }; }\n }\n function at_rule() {\n whitespace();\n if (css[0] === '@') { return at_keyframes() || at_supports() || at_host() || at_media() || at_custom_m() || at_page() || at_document() || at_fontface() || at_x(); }\n }\n\n // Rules\n // -------------------------------------------------------------------------\n function rule() {\n const sel = selector() || [];\n if (!sel.length) { error('selector missing'); }\n\n const decls = declarations();\n\n return { type: 'rule', selectors: sel, declarations: decls };\n }\n function rules(core) {\n if (!core && !open()) { return error('missing \\'{\\''); }\n\n let node,\n rules = comments();\n\n while (css.length && (core || css[0] !== '}') && (node = at_rule() || rule())) {\n rules.push(node);\n rules = rules.concat(comments());\n }\n\n if (!core && !close()) { return error('missing \\'}\\''); }\n\n return rules;\n }\n\n return { type: 'stylesheet', stylesheet: { rules: rules(true), errors: errors } };\n}\n\n\n// Exports\n// =============================================================================\nexport default cssParse;\n","/**\n * Based on rework-vars by reworkcss\n * https://github.com/reworkcss/rework-vars\n */\n\n\n// Dependencies\n// =============================================================================\nimport balanced from 'balanced-match';\nimport mergeDeep from './merge-deep';\nimport parseCss from './parse-css';\nimport stringifyCss from './stringify-css';\nimport walkCss from './walk-css';\n\n\n// Constants & Variables\n// =============================================================================\nconst persistStore = {};\nconst VAR_PROP_IDENTIFIER = '--';\nconst VAR_FUNC_IDENTIFIER = 'var';\n\n\n// Functions\n// =============================================================================\n/**\n * Transforms W3C-style CSS variables to static values and returns an updated\n * CSS string.\n *\n * @param {object} cssText CSS containing variable definitions and functions\n * @param {object} [options] Options object\n * @param {boolean} [options.fixNestedCalc=true] Removes nested 'calc' keywords\n * for legacy browser compatibility.\n * @param {boolean} [options.onlyVars=true] Remove declarations that do not\n * contain a CSS variable from the return value. Note that\n * @font-face and @keyframe rules require all declarations to\n * be returned if a CSS variable is used.\n * @param {boolean} [options.persist=false] Persists options.variables,\n * allowing variables set in previous calls to be applied in\n * subsequent calls.\n * @param {boolean} [options.preserve=false] Preserve CSS variable definitions\n * and functions in the return value, allowing \"live\" variable\n * updates via JavaScript to continue working in browsers with\n * native CSS variable support.\n * @param {object} [options.variables={}] CSS variable definitions to include\n * during transformation. Can be used to add new override\n * exisitng definitions.\n * @param {function} [options.onWarning] Callback on each transformation\n * warning. Passes 1) warningMessage as an argument.\n * @returns {string}\n */\nfunction transformVars(cssText, options = {}) {\n const defaults = {\n fixNestedCalc: true,\n onlyVars : true,\n persist : false,\n preserve : false,\n variables : {},\n onWarning() {}\n };\n const map = {};\n const settings = mergeDeep(defaults, options);\n const varSource = settings.persist ? persistStore : settings.variables;\n\n // Convert cssText to AST (this could throw errors)\n const cssTree = parseCss(cssText);\n\n // Remove non-vars\n if (settings.onlyVars) {\n cssTree.stylesheet.rules = filterVars(cssTree.stylesheet.rules);\n }\n\n // Define variables\n cssTree.stylesheet.rules.forEach(function(rule) {\n const varNameIndices = [];\n\n if (rule.type !== 'rule') {\n return;\n }\n\n // only variables declared for `:root` are supported\n if (rule.selectors.length !== 1 || rule.selectors[0] !== ':root') {\n return;\n }\n\n rule.declarations.forEach(function(decl, i) {\n const prop = decl.property;\n const value = decl.value;\n\n if (prop && prop.indexOf(VAR_PROP_IDENTIFIER) === 0) {\n map[prop] = value;\n varNameIndices.push(i);\n }\n });\n\n // optionally remove `--*` properties from the rule\n if (!settings.preserve) {\n for (let i = varNameIndices.length - 1; i >= 0; i--) {\n rule.declarations.splice(varNameIndices[i], 1);\n }\n }\n });\n\n // Handle variables defined in settings.variables\n Object.keys(settings.variables).forEach(key => {\n // Convert all property names to leading '--' style\n const prop = `--${key.replace(/^-+/, '')}`;\n const value = settings.variables[key];\n\n // Update settings.variables\n if (key !== prop) {\n settings.variables[prop] = value;\n delete settings.variables[key];\n }\n\n // Store variables so they can be reapplied on subsequent call. For\n // example, if '--myvar' is set on the first call it should continue to\n // be set on each call thereafter (otherwise each call removes the\n // previously set variables).\n if (settings.persist) {\n persistStore[prop] = value;\n }\n });\n\n if (Object.keys(varSource).length) {\n const newRule = {\n declarations: [],\n selectors : [':root'],\n type : 'rule'\n };\n\n Object.keys(varSource).forEach(function(key) {\n // Update internal map value with varSource value\n map[key] = varSource[key];\n\n // Add new declaration to newRule\n newRule.declarations.push({\n type : 'declaration',\n property: key,\n value : varSource[key]\n });\n\n // Add to persistent storage\n if (settings.persist) {\n persistStore[key] = varSource[key];\n }\n });\n\n // Append new :root ruleset\n if (settings.preserve) {\n cssTree.stylesheet.rules.push(newRule);\n }\n }\n\n // Resolve variables\n walkCss(cssTree.stylesheet, function(declarations, node) {\n let decl;\n let resolvedValue;\n let value;\n\n for (let i = 0; i < declarations.length; i++) {\n decl = declarations[i];\n value = decl.value;\n\n // skip comments\n if (decl.type !== 'declaration') {\n continue;\n }\n\n // skip values that don't contain variable functions\n if (!value || value.indexOf(VAR_FUNC_IDENTIFIER + '(') === -1) {\n continue;\n }\n\n resolvedValue = resolveValue(value, map, settings);\n\n if (resolvedValue !== 'undefined') {\n if (!settings.preserve) {\n decl.value = resolvedValue;\n }\n else {\n declarations.splice(i, 0, {\n type : decl.type,\n property: decl.property,\n value : resolvedValue\n });\n\n // skip ahead of preserved declaration\n i++;\n }\n }\n }\n });\n\n // Fix nested calc() values\n if (settings.fixNestedCalc) {\n fixNestedCalc(cssTree.stylesheet.rules);\n }\n\n // Return CSS string\n return stringifyCss(cssTree);\n}\n\n\n// Functions (Private)\n// =============================================================================\n/**\n * Filters rules recursively, retaining only declarations that contain either a\n * CSS variable definition (property) or function (value). Maintains all\n * declarations for @font-face and @keyframes rules that contain a CSS\n * definition or function.\n *\n * @param {array} rules\n * @returns {array}\n */\nfunction filterVars(rules) {\n return rules.filter(rule => {\n // Rule, @font-face, @host, @page\n if (rule.declarations) {\n const declArray = rule.declarations.filter(d => {\n const hasVarProp = d.property && d.property.indexOf(VAR_PROP_IDENTIFIER) === 0;\n const hasVarVal = d.value && d.value.indexOf(VAR_FUNC_IDENTIFIER + '(') > -1;\n\n return hasVarProp || hasVarVal;\n });\n\n // For most rule types the filtered declarations should be applied.\n // @font-face declaratons are unique and require all declarations to\n // be retained if any declaration contains a CSS variable definition\n // or value.\n if (rule.type !== 'font-face') {\n rule.declarations = declArray;\n }\n\n return Boolean(declArray.length);\n }\n // @keyframes\n else if (rule.keyframes) {\n // @keyframe rules require all declarations to be retained if any\n // declaration contains a CSS variable definition or value.\n return Boolean(rule.keyframes.filter(k =>\n Boolean(k.declarations.filter(d => {\n const hasVarProp = d.property && d.property.indexOf(VAR_PROP_IDENTIFIER) === 0;\n const hasVarVal = d.value && d.value.indexOf(VAR_FUNC_IDENTIFIER + '(') > -1;\n\n return hasVarProp || hasVarVal;\n }).length)\n ).length);\n }\n // @document, @media, @supports\n else if (rule.rules) {\n rule.rules = filterVars(rule.rules).filter(r => r.declarations && r.declarations.length);\n\n return Boolean(rule.rules.length);\n }\n\n return true;\n });\n}\n\n/**\n * Removes nested calc keywords for legacy browser compatibility.\n * Example: calc(1 + calc(2 + calc(3 + 3))) => calc(1 + (2 + (3 + 3)))\n *\n * @param {array} rules\n */\nfunction fixNestedCalc(rules) {\n const reCalcExp = /(-[a-z]+-)?calc\\(/; // Match \"calc(\" or \"-vendor-calc(\"\n\n rules.forEach(rule => {\n if (rule.declarations) {\n rule.declarations.forEach(decl => {\n let oldValue = decl.value;\n let newValue = '';\n\n while (reCalcExp.test(oldValue)) {\n const rootCalc = balanced('calc(', ')', oldValue || '');\n\n oldValue = oldValue.slice(rootCalc.end);\n\n while (reCalcExp.test(rootCalc.body)) {\n const nestedCalc = balanced(reCalcExp, ')', rootCalc.body);\n\n rootCalc.body = `${nestedCalc.pre}(${nestedCalc.body})${nestedCalc.post}`;\n }\n\n newValue += `${rootCalc.pre}calc(${rootCalc.body}`;\n newValue += !reCalcExp.test(oldValue) ? `)${rootCalc.post}` : '';\n }\n\n decl.value = newValue || decl.value;\n });\n }\n });\n}\n\n/**\n * Resolve CSS variables in a value\n *\n * The second argument to a CSS variable function, if provided, is a fallback\n * value, which is used as the substitution value when the referenced variable\n * is invalid.\n *\n * var(name[, fallback])\n *\n * @param {string} value A property value containing a CSS variable function\n * @param {object} map A map of variable names and values\n * @param {object} settings Settings object passed from transformVars()\n * @return {string} A new value with CSS variables substituted or using fallback\n */\nfunction resolveValue(value, map, settings) {\n // matches `name[, fallback]`, captures 'name' and 'fallback'\n const RE_VAR = /([\\w-]+)(?:\\s*,\\s*)?(.*)?/;\n const balancedParens = balanced('(', ')', value);\n const varStartIndex = value.indexOf('var(');\n const varRef = balanced('(', ')', value.substring(varStartIndex)).body;\n const warningIntro = 'CSS transform warning:';\n\n /* istanbul ignore next */\n if (!balancedParens) {\n settings.onWarning(`${warningIntro} missing closing \")\" in the value \"${value}\"`);\n }\n\n /* istanbul ignore next */\n if (varRef === '') {\n settings.onWarning(`${warningIntro} var() must contain a non-whitespace string`);\n }\n\n const varFunc = VAR_FUNC_IDENTIFIER + '(' + varRef + ')';\n\n const varResult = varRef.replace(RE_VAR, function(_, name, fallback) {\n const replacement = map[name];\n\n if (!replacement && !fallback) {\n settings.onWarning(`${warningIntro} variable \"${name}\" is undefined`);\n }\n\n if (!replacement && fallback) {\n return fallback;\n }\n\n return replacement;\n });\n\n // resolve the variable\n value = value.split(varFunc).join(varResult);\n\n // recursively resolve any remaining variables in the value\n if (value.indexOf(VAR_FUNC_IDENTIFIER + '(') !== -1) {\n value = resolveValue(value, map, settings);\n }\n\n return value;\n}\n\n\n// Exports\n// =============================================================================\nexport default transformVars;\n","/**\n * Based on rework-visit by reworkcss\n * https://github.com/reworkcss/rework-visit\n */\n\n\n// Functions\n// =============================================================================\n/**\n * Visit `node` declarations recursively and invoke `fn(declarations, node)`.\n *\n * @param {object} node\n * @param {function} fn\n */\nfunction walkCss(node, fn){\n node.rules.forEach(function(rule){\n // @media etc\n if (rule.rules) {\n walkCss(rule, fn);\n\n return;\n }\n\n // keyframes\n if (rule.keyframes) {\n rule.keyframes.forEach(function(keyframe){\n if (keyframe.type === 'keyframe') {\n fn(keyframe.declarations, rule);\n }\n });\n\n return;\n }\n\n // @charset, @import etc\n if (!rule.declarations) {\n return;\n }\n\n fn(rule.declarations, node);\n });\n}\n\n\n// Exports\n// =============================================================================\nexport default walkCss;\n","/**\n * Based on css parser/compiler by NxChg\n * https://github.com/NxtChg/pieces/tree/master/js/css_parser\n */\n\n\n// Functions\n// =============================================================================\n/**\n * Compiles CSS AST to string\n *\n * @param {object} tree CSS AST object\n * @param {string} [delim=''] CSS rule delimiter\n * @param {function} cb Function to be called before each node is processed\n * @returns {string}\n */\nfunction stringifyCss(tree, delim = '', cb) {\n const renderMethods = {\n charset(node) {\n return '@charset ' + node.name + ';';\n },\n comment(node) {\n // Preserve ponyfill marker comments\n return node.comment.indexOf('__CSSVARSPONYFILL') === 0 ? '/*' + node.comment + '*/' : '';\n },\n 'custom-media'(node) {\n return '@custom-media ' + node.name + ' ' + node.media + ';';\n },\n declaration(node) {\n return node.property + ':' + node.value + ';';\n },\n document(node) {\n return '@' + (node.vendor || '') + 'document ' + node.document + '{' + visit(node.rules) + '}';\n },\n 'font-face'(node) {\n return '@font-face' + '{' + visit(node.declarations) + '}';\n },\n host(node) {\n return '@host' + '{' + visit(node.rules) + '}';\n },\n import(node) {\n // FIXED\n return '@import ' + node.name + ';';\n },\n keyframe(node) {\n return node.values.join(',') + '{' + visit(node.declarations) + '}';\n },\n keyframes(node) {\n return '@' + (node.vendor || '') + 'keyframes ' + node.name + '{' + visit(node.keyframes) + '}';\n },\n media(node) {\n return '@media ' + node.media + '{' + visit(node.rules) + '}';\n },\n namespace(node) {\n return '@namespace ' + node.name + ';';\n },\n page(node) {\n return '@page ' + (node.selectors.length ? node.selectors.join(', ') : '') + '{' + visit(node.declarations) + '}';\n },\n rule(node) {\n const decls = node.declarations;\n\n if (decls.length) {\n return node.selectors.join(',') + '{' + visit(decls) + '}';\n }\n },\n supports(node) {\n // FIXED\n return '@supports ' + node.supports + '{' + visit(node.rules) + '}';\n }\n };\n\n function visit(nodes) {\n let buf = '';\n\n for (let i = 0; i < nodes.length; i++) {\n const n = nodes[i];\n\n if (cb) {\n cb(n);\n }\n\n const txt = renderMethods[n.type](n);\n\n if (txt) {\n buf += txt;\n\n if (txt.length && n.selectors) {\n buf += delim;\n }\n }\n }\n\n return buf;\n }\n\n return visit(tree.stylesheet.rules);\n}\n\n\n// Exports\n// =============================================================================\nexport default stringifyCss;\n","// Dependencies\n// =============================================================================\nimport getCssData from 'get-css-data';\nimport mergeDeep from './merge-deep';\nimport transformCss from './transform-css';\nimport { name as pkgName } from '../package.json';\n\n\n// Constants & Variables\n// =============================================================================\nconst defaults = {\n // Sources\n include : 'style,link[rel=stylesheet]',\n exclude : '',\n // Options\n fixNestedCalc: true, // transformCss\n onlyLegacy : true, // cssVars\n onlyVars : false, // cssVars, transformCss\n preserve : false, // transformCss\n silent : false, // cssVars\n updateDOM : true, // cssVars\n updateURLs : true, // cssVars\n variables : {}, // transformCss\n // Callbacks\n onBeforeSend() {}, // cssVars\n onSuccess() {}, // cssVars\n onWarning() {}, // transformCss\n onError() {}, // cssVars\n onComplete() {} // cssVars\n};\nconst regex = {\n // CSS comments\n cssComments: /\\/\\*[\\s\\S]+?\\*\\//g,\n // CSS url(...) values\n cssUrls: /url\\((?!['\"]?(?:data|http|\\/\\/):)['\"]?([^'\")]*)['\"]?\\)/g,\n // CSS variable :root declarations and var() function values\n cssVars: /(?:(?::root\\s*{\\s*[^;]*;*\\s*)|(?:var\\(\\s*))(--[^:)]+)(?:\\s*[:)])/\n};\n\n\n// Functions\n// =============================================================================\n/**\n * Fetches, parses, and transforms CSS custom properties from specified\n * <style> and <link> elements into static values, then appends a new <style>\n * element with static values to the DOM to provide CSS custom property\n * compatibility for legacy browsers. Also provides a single interface for\n * live updates of runtime values in both modern and legacy browsers.\n *\n * @preserve\n * @param {object} [options] Options object\n * @param {string} [options.include=\"style,link[rel=stylesheet]\"] CSS selector\n * matching <link re=\"stylesheet\"> and <style> nodes to\n * process\n * @param {string} [options.exclude] CSS selector matching <link\n * rel=\"stylehseet\"> and <style> nodes to exclude from those\n * matches by options.include\n * @param {boolean} [options.fixNestedCalc=true] Removes nested 'calc' keywords\n * for legacy browser compatibility.\n * @param {boolean} [options.onlyLegacy=true] Determines if the ponyfill will\n * only generate legacy-compatible CSS in browsers that lack\n * native support (i.e., legacy browsers)\n * @param {boolean} [options.onlyVars=false] Determines if CSS rulesets and\n * declarations without a custom property value should be\n * removed from the ponyfill-generated CSS\n * @param {boolean} [options.preserve=false] Determines if the original CSS\n * custom property declaration will be retained in the\n * ponyfill-generated CSS.\n * @param {boolean} [options.silent=false] Determines if warning and error\n * messages will be displayed on the console\n * @param {boolean} [options.updateDOM=true] Determines if the ponyfill will\n * update the DOM after processing CSS custom properties\n * @param {boolean} [options.updateURLs=true] Determines if the ponyfill will\n * convert relative url() paths to absolute urls.\n * @param {object} [options.variables] A map of custom property name/value\n * pairs. Property names can omit or include the leading\n * double-hyphen (—), and values specified will override\n * previous values.\n * @param {function} [options.onBeforeSend] Callback before XHR is sent. Passes\n * 1) the XHR object, 2) source node reference, and 3) the\n * source URL as arguments.\n * @param {function} [options.onSuccess] Callback after CSS data has been\n * collected from each node and before CSS custom properties\n * have been transformed. Allows modifying the CSS data before\n * it is transformed by returning any string value (or false\n * to skip). Passes 1) CSS text, 2) source node reference, and\n * 3) the source URL as arguments.\n * @param {function} [options.onWarning] Callback after each CSS parsing warning\n * has occurred. Passes 1) a warning message as an argument.\n * @param {function} [options.onError] Callback after a CSS parsing error has\n * occurred or an XHR request has failed. Passes 1) an error\n * message, and 2) source node reference, 3) xhr, and 4 url as\n * arguments.\n * @param {function} [options.onComplete] Callback after all CSS has been\n * processed, legacy-compatible CSS has been generated, and\n * (optionally) the DOM has been updated. Passes 1) a CSS\n * string with CSS variable values resolved, and 2) a\n * reference to the appended <style> node.\n *\n * @example\n *\n * cssVars({\n * include : 'style,link[rel=\"stylesheet\"]', // default\n * exclude : '',\n * fixNestedCalc: true, // default\n * onlyLegacy : true, // default\n * onlyVars : false, // default\n * preserve : false, // default\n * silent : false, // default\n * updateDOM : true, // default\n * updateURLs : true, // default\n * variables : {\n * // ...\n * },\n * onBeforeSend(xhr, node, url) {\n * // ...\n * }\n * onSuccess(cssText, node, url) {\n * // ...\n * },\n * onWarning(message) {\n * // ...\n * },\n * onError(message, node) {\n * // ...\n * },\n * onComplete(cssText, styleNode) {\n * // ...\n * }\n * });\n */\nfunction cssVars(options = {}) {\n const settings = mergeDeep(defaults, options);\n\n function handleError(message, sourceNode, xhr, url) {\n /* istanbul ignore next */\n if (!settings.silent) {\n // eslint-disable-next-line\n console.error(`${message}\\n`, sourceNode);\n }\n\n settings.onError(message, sourceNode, xhr, url);\n }\n\n function handleWarning(message) {\n /* istanbul ignore next */\n if (!settings.silent) {\n // eslint-disable-next-line\n console.warn(message);\n }\n\n settings.onWarning(message);\n }\n\n // Verify readyState to ensure all <link> and <style> nodes are available\n if (document.readyState !== 'loading') {\n const hasNativeSupport = window.CSS && window.CSS.supports && window.CSS.supports('(--a: 0)');\n\n // Lacks native support or onlyLegacy 'false'\n if (!hasNativeSupport || !settings.onlyLegacy) {\n const styleNodeId = pkgName;\n\n getCssData({\n include: settings.include,\n // Always exclude styleNodeId element, which is the generated\n // <style> node containing previously transformed CSS.\n exclude: `#${styleNodeId}` + (settings.exclude ? `,${settings.exclude}` : ''),\n // This filter does a test on each block of CSS. An additional\n // filter is used in the parser to remove individual\n // declarations.\n filter : settings.onlyVars ? regex.cssVars : null,\n onBeforeSend: settings.onBeforeSend,\n onSuccess(cssText, node, url) {\n const returnVal = settings.onSuccess(cssText, node, url);\n\n cssText = returnVal === false ? '' : returnVal || cssText;\n\n // Convert relative url(...) values to absolute\n if (settings.updateURLs) {\n const cssUrls = cssText\n // Remove comments to avoid processing @import in comments\n .replace(regex.cssComments, '')\n // Match url(...) values\n .match(regex.cssUrls) || [];\n\n cssUrls.forEach(cssUrl => {\n const oldUrl = cssUrl.replace(regex.cssUrls, '$1');\n const newUrl = getFullUrl(oldUrl, url);\n\n cssText = cssText.replace(cssUrl, cssUrl.replace(oldUrl, newUrl));\n });\n }\n\n return cssText;\n },\n onError(xhr, node, url) {\n const responseUrl = xhr.responseURL || getFullUrl(url, location.href);\n const statusText = xhr.statusText ? `(${xhr.statusText})` : 'Unspecified Error' + (xhr.status === 0 ? ' (possibly CORS related)' : '');\n const errorMsg = `CSS XHR Error: ${responseUrl} ${xhr.status} ${statusText}`;\n\n handleError(errorMsg, node, xhr, responseUrl);\n },\n onComplete(cssText, cssArray, nodeArray) {\n const cssMarker = /\\/\\*__CSSVARSPONYFILL-(\\d+)__\\*\\//g;\n let styleNode = null;\n\n // Concatenate cssArray items, replacing those that do not\n // contain a CSS custom property declaraion or function with\n // a temporary marker . After the CSS is transformed, the\n // markers will be replaced with the matching cssArray item.\n // This optimization is done to avoid processing CSS that\n // will not change as a results of the ponyfill.\n cssText = cssArray.map((css, i) => regex.cssVars.test(css) ? css : `/*__CSSVARSPONYFILL-${i}__*/`).join('');\n\n try {\n cssText = transformCss(cssText, {\n fixNestedCalc: settings.fixNestedCalc,\n onlyVars : settings.onlyVars,\n persist : settings.updateDOM,\n preserve : settings.preserve,\n variables : settings.variables,\n onWarning : handleWarning\n });\n\n let cssMarkerMatch = cssMarker.exec(cssText);\n\n // Replace markers with appropriate cssArray item\n while (cssMarkerMatch !== null) {\n const matchedText = cssMarkerMatch[0];\n const cssArrayIndex = cssMarkerMatch[1];\n\n cssText = cssText.replace(matchedText, cssArray[cssArrayIndex]);\n cssMarkerMatch = cssMarker.exec(cssText);\n }\n\n if (settings.updateDOM && nodeArray && nodeArray.length) {\n const lastNode = nodeArray[nodeArray.length - 1];\n\n styleNode = document.querySelector(`#${styleNodeId}`) || document.createElement('style');\n styleNode.setAttribute('id', styleNodeId);\n\n if (styleNode.textContent !== cssText) {\n styleNode.textContent = cssText;\n }\n\n // Insert <style> element after last nodeArray item\n if (lastNode.nextSibling !== styleNode) {\n lastNode.parentNode.insertBefore(styleNode, lastNode.nextSibling);\n }\n }\n }\n catch(err) {\n let errorThrown = false;\n\n // Iterate cssArray to detect CSS text and node(s)\n // responsibile for error.\n cssArray.forEach((cssText, i) => {\n try {\n cssText = transformCss(cssText, settings);\n }\n catch(err) {\n const errorNode = nodeArray[i - 0];\n\n errorThrown = true;\n handleError(err.message, errorNode);\n }\n });\n\n // In the event the error thrown was not due to\n // transformCss, handle the original error.\n /* istanbul ignore next */\n if (!errorThrown) {\n handleError(err.message || err);\n }\n }\n\n settings.onComplete(cssText, styleNode);\n }\n });\n }\n // Has native support\n else if (hasNativeSupport && settings.updateDOM) {\n // Set variables using native methods\n Object.keys(settings.variables).forEach(key => {\n // Convert all property names to leading '--' style\n const prop = `--${key.replace(/^-+/, '')}`;\n const value = settings.variables[key];\n\n document.documentElement.style.setProperty(prop, value);\n });\n }\n }\n // Delay function until DOMContentLoaded event is fired\n /* istanbul ignore next */\n else {\n document.addEventListener('DOMContentLoaded', function init(evt) {\n cssVars(options);\n\n document.removeEventListener('DOMContentLoaded', init);\n });\n }\n}\n\n\n// Functions (Private)\n// =============================================================================\n/**\n * Returns fully qualified URL from relative URL and (optional) base URL\n *\n * @param {any} url\n * @param {any} [base=location.href]\n * @returns\n */\nfunction getFullUrl(url, base = location.href) {\n const d = document.implementation.createHTMLDocument('');\n const b = d.createElement('base');\n const a = d.createElement('a');\n\n d.head.appendChild(b);\n d.body.appendChild(a);\n b.href = base;\n a.href = url;\n\n return a.href;\n}\n\n\n// Export\n// =============================================================================\nexport default cssVars;\n"],"names":["getUrls","urls","options","arguments","length","undefined","settings","mimeType","onBeforeSend","Function","prototype","onSuccess","onError","onComplete","urlArray","Array","isArray","urlQueue","apply","map","x","xhr","urlIndex","responseText","returnVal","indexOf","forEach","url","i","parser","document","createElement","setAttribute","href","isCrossDomain","host","location","isSameProtocol","protocol","XDomainRequest","xdr","open","timeout","onprogress","ontimeout","onload","onerror","err","setTimeout","send","console","log","XMLHttpRequest","overrideMimeType","onreadystatechange","readyState","status","getCssData","regex","cssComments","cssImports","include","exclude","filter","sourceNodes","querySelectorAll","node","elm","selector","matches","matchesSelector","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector","call","cssArray","handleComplete","cssText","join","handleSuccess","cssIndex","sourceUrl","resolveImports","baseUrl","callbackFn","__errorData","__errorRules","importData","parseImportData","rules","absoluteUrls","responseImportData","rule","replace","absoluteRules","push","responseArray","importText","resolvedCssText","errorData","data","test","ignoreRules","match","getFullUrl","oldUrl","newUrl","linkHref","getAttribute","linkRel","isLink","nodeName","toLowerCase","isStyle","textContent","base","d","implementation","createHTMLDocument","b","a","head","appendChild","body","mergeDeep","isObject","obj","Object","constructor","objects","reduce","prev","keys","pVal","key","oVal","balanced","str","RegExp","maybeMatch","r","range","start","end","pre","slice","post","reg","m","begs","beg","left","right","result","ai","bi","pop","cssParse","css","error","msg","Error","re","exec","whitespace","close","comment","type","comments","cmnts","c","trim","split","s","declaration","comment_regexp","prop","val","ret","property","value","declarations","decls","concat","keyframe","vals","values","at_rule","vendor","name","frame","frames","keyframes","at_keyframes","supports","at_supports","at_host","media","at_media","at_custom_m","selectors","at_page","at_document","at_fontface","at_x","core","sel","stylesheet","errors","persistStore","VAR_PROP_IDENTIFIER","VAR_FUNC_IDENTIFIER","transformVars","reCalcExp","varSource","persist","variables","cssTree","parseCss","onlyVars","filterVars","declArray","hasVarProp","hasVarVal","Boolean","k","varNameIndices","decl","preserve","splice","newRule","walkCss","fn","resolvedValue","resolveValue","fixNestedCalc","oldValue","newValue","rootCalc","nestedCalc","tree","delim","cb","renderMethods","visit","nodes","buf","n","txt","stringifyCss","balancedParens","varStartIndex","varRef","substring","warningIntro","onWarning","varFunc","varResult","_","fallback","replacement","defaults","cssVars","handleError","message","sourceNode","silent","handleWarning","warn","hasNativeSupport","window","CSS","onlyLegacy","updateDOM","documentElement","style","setProperty","styleNodeId","pkgName","updateURLs","cssUrls","cssUrl","responseUrl","responseURL","statusText","nodeArray","cssMarker","styleNode","transformCss","cssMarkerMatch","matchedText","cssArrayIndex","lastNode","querySelector","nextSibling","parentNode","insertBefore","errorThrown","errorNode","addEventListener","init","evt","removeEventListener"],"mappings":"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"} \ No newline at end of file
diff --git a/lib/private/legacy/template.php b/lib/private/legacy/template.php
index 7258eb90222..3cca8245af0 100644
--- a/lib/private/legacy/template.php
+++ b/lib/private/legacy/template.php
@@ -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('jquery-ui-fixes',null,true);
OC_Util::addVendorStyle('jquery-ui/themes/base/jquery-ui',null,true);
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index a6f93a3e95d..691b8c3f498 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -78,7 +78,7 @@ input {
transform: translate(-50%, -50%);
background: #fff;
color: #333;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
box-shadow: 0 0 7px #888;
padding: 15px;
.jcrop-holder {
@@ -130,11 +130,6 @@ input {
width: 100%;
}
}
-#personal-settings {
- .section {
- border: 0;
- }
-}
#personal-settings {
display: grid;
@@ -143,8 +138,11 @@ input {
grid-template-columns:1fr 2fr 1fr;
.section {
padding: 10px 10px;
+ border: 0;
+ h2 {
+ margin-bottom: 12px;
+ }
}
-
.personal-info {
margin-right: 10%;
margin-bottom: 20px;
@@ -223,7 +221,6 @@ input {
> div {
h2 {
position: relative;
- margin-bottom: 12px;
display: inline-flex;
flex-wrap: nowrap;
justify-content: flex-start;
@@ -328,7 +325,7 @@ input {
opacity: .75;
}
&.active {
- box-shadow: inset 2px 0 $color-primary;
+ box-shadow: inset 2px 0 var(--color-primary);
.menuitem-text {
font-weight: 600;
}
@@ -426,7 +423,7 @@ table.nostyle {
padding-top: 5px;
}
}
- border-top: 1px solid #DDD;
+ border-top: 1px solid var(--color-border);
text-overflow: ellipsis;
max-width: 200px;
white-space: nowrap;
@@ -482,7 +479,6 @@ table.nostyle {
#new-app-password {
width: 245px;
font-family: monospace;
- background-color: lightyellow;
}
.app-password-row {
@@ -556,14 +552,14 @@ table.grid {
th {
height: 2em;
color: #999;
- border-bottom: 1px solid $color-border;
+ border-bottom: 1px solid var(--color-border);
padding: 0 .5em;
padding-left: .8em;
text-align: left;
font-weight: normal;
}
td {
- border-bottom: 1px solid $color-border;
+ border-bottom: 1px solid var(--color-border);
padding: 0 .5em;
padding-left: .8em;
text-align: left;
@@ -639,7 +635,7 @@ span.usersLastLoginTooltip {
thead th,
thead tr {
z-index: 100;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
position: sticky;
// positional attribute is required for position to take affect.
top: 0;
@@ -734,7 +730,7 @@ span.version {
color: #555;
background-color: transparent;
border: 1px solid #555;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
padding: 3px 6px;
}
a {
@@ -804,7 +800,7 @@ span.version {
margin-bottom: 10px;
}
.app-author, .app-licence {
- color: $color-text-details;
+ color: var(--color-text-maxcontrast);
}
.app-dependencies {
margin: 10px 0;
@@ -819,7 +815,7 @@ span.version {
padding: 14px;
opacity: 0.5;
z-index: 1;
- }.
+ }
.actions {
display: flex;
}
@@ -885,7 +881,7 @@ span.version {
margin-bottom: 0;
/* use 2nd child since app-navigation-toggle is the first */
&:not(:nth-child(2)) {
- border-top: 1px solid $color-border;
+ border-top: 1px solid var(--color-border);
}
/* correctly display help icons next to headings */
@@ -980,12 +976,12 @@ span.version {
height: initial;
vertical-align: middle;
float: none;
- border-bottom: 1px solid $color-border;
+ border-bottom: 1px solid var(--color-border);
padding: 6px;
box-sizing: border-box;
}
&.selected {
- background-color: nc-darken($color-main-background, 3%);
+ background-color: var(--color-background-dark);
}
}
.groups-enable {
@@ -1126,13 +1122,13 @@ table.grid td.date {
border-radius: 50%;
}
&.icon-checkmark-white {
- background-color: $color-success;
+ background-color: var(--color-success);
}
&.icon-error-white {
- background-color: $color-warning;
+ background-color: var(--color-warning);
}
&.icon-close-white {
- background-color: $color-error;
+ background-color: var(--color-error);
}
}
}
@@ -1233,14 +1229,14 @@ table.grid td.date {
span {
&.success {
- background-color: $color-success;
- border-radius: $border-radius;
+ background-color: var(--color-success);
+ border-radius: var(--border-radius);
}
&.error {
- background-color: $color-error;
+ background-color: var(--color-error);
}
&.indeterminate {
- background-color: $color-warning;
+ background-color: var(--color-warning);
border-radius: 40% 0;
}
}
@@ -1303,10 +1299,10 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
background-position: left center;
}
.errors, .errors a {
- color: $color-error;
+ color: var(--color-error);
}
.warnings, .warnings a {
- color: $color-warning;
+ color: var(--color-warning);
}
.hint {
@@ -1351,21 +1347,6 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
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 -------------------------------------------------------------- */
#body-settings {
@@ -1402,7 +1383,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
what follows will be manually defined */
grid-template-columns: 44px;
grid-auto-columns: min-content;
- border-top: $color-border 1px solid;
+ border-top: var(--color-border) 1px solid;
&.disabled {
opacity: .5;
}
@@ -1438,11 +1419,11 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
&#new-user {
position: sticky;
align-self: normal;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
z-index: 55; /* above multiselect */
top: 0;
&.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 */
input#newgroups {
@@ -1458,12 +1439,12 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
top: $grid-row-height;
}
&#grid-header {
- color: nc-lighten($color-main-text, 60%);
+ color: var(--color-background-darker);
z-index: 60; /* above new-user */
}
&:hover {
input:not([type='submit']):not(:focus):not(:active) {
- border-color: nc-darken($color-main-background, 14%) !important;
+ border-color: var(--color-border) !important;
}
}
> div,
@@ -1471,7 +1452,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
grid-row: 1;
display: inline-flex;
align-items: center;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
position: relative;
> input:not(:focus):not(:active) {
border-color: transparent;
diff --git a/settings/templates/settings/frame.php b/settings/templates/settings/frame.php
index 57522ca7773..a4f44294ad0 100644
--- a/settings/templates/settings/frame.php
+++ b/settings/templates/settings/frame.php
@@ -30,7 +30,7 @@ script('files', 'jquery.fileupload');
<div id="app-navigation">
<ul>
- <li class="settings-caption"><?php p($l->t('Personal')); ?></li>
+ <li class="app-navigation-caption"><?php p($l->t('Personal')); ?></li>
<?php
foreach($_['forms']['personal'] as $form) {
if (isset($form['anchor'])) {
@@ -57,7 +57,7 @@ script('files', 'jquery.fileupload');
<?php
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
}
foreach($_['forms']['admin'] as $form) {
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index 087451d3040..f8268e199ee 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/settings/templates/settings/personal/personal.info.php
@@ -78,7 +78,7 @@ vendor_style('jcrop/css/jquery.Jcrop');
<div class="personal-settings-setting-box personal-settings-group-box section">
<h2><?php p($l->t('Details')); ?></h2>
<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">
<strong><?php p(implode(', ', $_['groups'])); ?></strong>
</p>
diff --git a/tests/acceptance/features/app-theming.feature b/tests/acceptance/features/app-theming.feature
index 375e2bc1cae..268b9a04a2f 100644
--- a/tests/acceptance/features/app-theming.feature
+++ b/tests/acceptance/features/app-theming.feature
@@ -5,10 +5,13 @@ Feature: app-theming
And I visit the settings page
And I open the "Theming" section
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"
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
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 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 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
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"
diff --git a/tests/acceptance/features/bootstrap/SettingsMenuContext.php b/tests/acceptance/features/bootstrap/SettingsMenuContext.php
index 6187d9f6c10..fd9b9424c9d 100644
--- a/tests/acceptance/features/bootstrap/SettingsMenuContext.php
+++ b/tests/acceptance/features/bootstrap/SettingsMenuContext.php
@@ -79,7 +79,7 @@ class SettingsMenuContext implements Context, ActorAwareInterface {
* @return Locator
*/
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");
}
diff --git a/tests/acceptance/features/bootstrap/ThemingAppContext.php b/tests/acceptance/features/bootstrap/ThemingAppContext.php
index e8a8a301ed7..4791a70e813 100644
--- a/tests/acceptance/features/bootstrap/ThemingAppContext.php
+++ b/tests/acceptance/features/bootstrap/ThemingAppContext.php
@@ -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) {
- $headerColor = $this->actor->getSession()->evaluateScript("return $('#header').css('background-color');");
- $headerColor = $this->getRGBArray($headerColor);
- $color = $this->getRGBArray($color);
- PHPUnit_Framework_Assert::assertEquals($color, $headerColor);
+ public function iSeeThatTheHeaderColorIsEventually($color) {
+ $headerColorMatchesCallback = function() use($color) {
+ $headerColor = $this->actor->getSession()->evaluateScript("return $('#header').css('background-color');");
+ $headerColor = $this->getRGBArray($headerColor);
+ $color = $this->getRGBArray($color);
+
+ 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");
+ }
}
/**