diff --git a/apps/comments/css/autocomplete.scss b/apps/comments/css/autocomplete.scss index 41695e0830..0837b38781 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 d2ed74adae..ae1f6d7172 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 334fc0c8fd..4a3336cdbc 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 ca2915a903..01703df5bf 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 5263a4b0e0..8d54c28eef 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 2a4225a7f1..2e788a06c4 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 7753540ccd..c67d48d46f 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 6b0566039d..4a32458d8a 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 96f8dfde9f..44f1ea51c0 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 d29eb69873..72286ece4b 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 360eb7083a..a2105264f1 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 ceaf2cc19d..87b2003ded 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 19447d6e41..822a27cc19 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 0000000000..b1b7df3115 --- /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 09ab9c1d24..2b93b2914c 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 f72aa2930c..441b48f385 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 d71ec5b713..1507a71163 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 86f416094b..23d35b3742 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 e6060d2c8c..a3ff713d81 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 0500e1b08c..8ee7412af3 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 24cb426b18..991ef8495e 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 239876223d..f3b89ddb48 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 6c8bd11806..6df137cc0f 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 cc2c6bd082..2ddca32c88 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 68b601bcb6..07489cd55a 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 5733368975..3affa3d709 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 fe9a96cf31..ad433185f1 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 4e2c1c396c..43e3c6b97b 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; -$image-logo: '../img/logo.svg?v=1'; -$image-login-background: '../img/background.png?v=2'; +$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75) !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; +// light border like file table or app-content list +$color-border: nc-darken($color-main-background, 7%) !default; +// darker border like inputs or very visible elements +$color-border-dark: nc-darken($color-main-background, 14%) !default; +$border-radius: 3px !default; + +$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default; diff --git a/core/js/core.json b/core/js/core.json index 9da91a7f63..41b927147b 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 47fe4c4be5..a7dba7981f 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 2c04d2e317..a74b7f89a3 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 0000000000..51e689fe04 --- /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 0000000000..f68b2e18b8 --- /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 + * 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=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())=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;i1&&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;s1&&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 0000000000..a14eaaf0ab --- /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 \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