diff options
author | Morris Jobke <hey@morrisjobke.de> | 2018-06-20 19:54:10 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-06-20 19:54:10 +0200 |
commit | 9b6f235015032712c90767b996d60bbb6669fa48 (patch) | |
tree | ba5f9cfa0258c7bb72c74f7a7385dda962b50a99 | |
parent | 9d37c191a39e17434e68551cb5cde1307b8ed78c (diff) | |
parent | b188b2d133ebff3cd47f53eeb1de4111cf83ad27 (diff) | |
download | nextcloud-server-9b6f235015032712c90767b996d60bbb6669fa48.tar.gz nextcloud-server-9b6f235015032712c90767b996d60bbb6669fa48.zip |
Merge pull request #9723 from nextcloud/css4-variables
Css4 variables migration
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"); + } } /** |