diff options
author | Morris Jobke <hey@morrisjobke.de> | 2017-09-12 10:41:10 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-09-12 10:41:10 +0300 |
commit | 5981027f82fdad3c13b4340fe498bbb4d82e0353 (patch) | |
tree | 06bb479054225d7811c58ead53ca6a5d41e54972 | |
parent | 3aae3a54e53086e06479af2579bf6c6107908b4a (diff) | |
parent | 9bcf90adc876c73e8a4f287bdab59ba1f271c01c (diff) |
Merge pull request #6359 from nextcloud/12-6082
[stable12] Use separate element color in theming
-rw-r--r-- | apps/theming/css/theming.scss | 59 | ||||
-rw-r--r-- | apps/theming/lib/ThemingDefaults.php | 1 | ||||
-rw-r--r-- | apps/theming/tests/ThemingDefaultsTest.php | 5 | ||||
-rw-r--r-- | core/css/inputs.scss | 19 | ||||
-rw-r--r-- | core/css/variables.scss | 1 |
5 files changed, 42 insertions, 43 deletions
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss index 0d4abb7fb67..c9c2e6c8c7e 100644 --- a/apps/theming/css/theming.scss +++ b/apps/theming/css/theming.scss @@ -10,7 +10,6 @@ color: $color-primary-text; } -/* invert header icons on bright background */ @if (lightness($color-primary) > 50) { .searchbox input[type="search"] { background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center; @@ -29,6 +28,31 @@ #appmenu .icon-more-white { background-image: url('../../../core/img/actions/more.svg'); } + + #body-login { + + input { + border: 1px solid nc-lighten($color-primary-text, 50%); + } + input.primary { + background-color: $color-primary; + } + a, label, p { + color: $color-primary-text !important; + } + input[type='checkbox'].checkbox--white + label:before { + border-color: nc-darken($color-primary-element, 40%) !important; + } + input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before, + input[type='checkbox'].checkbox--white:focus + label:before { + border-color: nc-darken($color-primary-element, 30%) !important; + } + input[type='checkbox'].checkbox--white:checked + label:before { + border-color: nc-darken($color-primary-element, 30%) !important; + background-image: url('../../../core/img/actions/checkbox-mark.svg'); + background-color: nc-darken($color-primary-element, 30%) !important; + } + } } /* Colorized svg images */ @@ -61,7 +85,7 @@ } input.primary { - background-color: nc-lighten($color-primary, .9); + background-color: $color-primary-element; border: 1px solid $color-primary; color: $color-primary-text; } @@ -84,37 +108,6 @@ input.primary { color: $color-primary-text !important; } - @if (lightness($color-primary) > 50) { - #submit { - border-color: nc-darken($color-primary, 20%); - background-color: nc-darken($color-primary, 20%); - } - #submit:hover { - border-color: nc-darken($color-primary, 10%); - background-color: nc-darken($color-primary, 10%); - } - input[type='checkbox'].checkbox--white + label:before { - border-color: nc-darken($color-primary, 40%) !important; - } - input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before, - input[type='checkbox'].checkbox--white:focus + label:before { - border-color: nc-darken($color-primary, 30%) !important; - } - input[type='checkbox'].checkbox--white:checked + label:before { - border-color: nc-darken($color-primary, 30%) !important; - background-image: url('../../../core/img/actions/checkbox-mark.svg'); - background-color: nc-darken($color-primary, 30%) !important; - } - } @else { - #submit { - border-color: nc-lighten($color-primary, 20%); - background-color: nc-lighten($color-primary, 20%); - } - #submit:hover { - border-color: nc-lighten($color-primary, 10%); - background-color: nc-lighten($color-primary, 10%); - } - } } } diff --git a/apps/theming/lib/ThemingDefaults.php b/apps/theming/lib/ThemingDefaults.php index dff24ee7960..6b166d897b0 100644 --- a/apps/theming/lib/ThemingDefaults.php +++ b/apps/theming/lib/ThemingDefaults.php @@ -238,6 +238,7 @@ class ThemingDefaults extends \OC_Defaults { } $variables['color-primary'] = $this->getColorPrimary(); $variables['color-primary-text'] = $colorPrimaryText; + $variables['color-primary-element'] = $this->util->elementColor($this->getColorPrimary()); } if ($this->config->getAppValue('theming', 'backgroundMime', null) === 'backgroundColor') { diff --git a/apps/theming/tests/ThemingDefaultsTest.php b/apps/theming/tests/ThemingDefaultsTest.php index 057229483e9..590ec7e1a91 100644 --- a/apps/theming/tests/ThemingDefaultsTest.php +++ b/apps/theming/tests/ThemingDefaultsTest.php @@ -507,8 +507,10 @@ class ThemingDefaultsTest extends TestCase { $this->config->expects($this->at(7))->method('getAppValue')->with('theming', 'color', null)->willReturn($this->defaults->getColorPrimary()); $this->config->expects($this->at(8))->method('getAppValue')->with('theming', 'color', $this->defaults->getColorPrimary())->willReturn($this->defaults->getColorPrimary()); $this->config->expects($this->at(9))->method('getAppValue')->with('theming', 'color', $this->defaults->getColorPrimary())->willReturn($this->defaults->getColorPrimary()); + $this->config->expects($this->at(10))->method('getAppValue')->with('theming', 'color', $this->defaults->getColorPrimary())->willReturn($this->defaults->getColorPrimary()); $this->util->expects($this->any())->method('invertTextColor')->with($this->defaults->getColorPrimary())->willReturn(false); + $this->util->expects($this->any())->method('elementColor')->with($this->defaults->getColorPrimary())->willReturn('#aaaaaa'); $this->cache->expects($this->once())->method('get')->with('getScssVariables')->willReturn(null); $folder = $this->createMock(ISimpleFolder::class); $file = $this->createMock(ISimpleFile::class); @@ -538,7 +540,8 @@ class ThemingDefaultsTest extends TestCase { 'image-login-background' => "'absolute-custom-background?v=0'", 'color-primary' => $this->defaults->getColorPrimary(), 'color-primary-text' => '#ffffff', - 'image-login-plain' => 'false' + 'image-login-plain' => 'false', + 'color-primary-element' => '#aaaaaa' ]; $this->assertEquals($expected, $this->template->getScssVariables()); diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 13a164e13f2..42b9f63b7e2 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -50,7 +50,7 @@ textarea, &:focus, &.active { /* active class used for multiselect */ - border-color: $color-primary; + border-color: $color-primary-element; outline: none; } &:active { @@ -66,21 +66,21 @@ textarea, } /* Primary action button, use sparingly */ &.primary { - border: 1px solid $color-primary; - background-color: rgba($color-primary, .7); + border: 1px solid $color-primary-text; + background-color: $color-primary-element; color: $color-primary-text; cursor: pointer; &:not(:disabled) { &:hover, &:focus { - background-color: rgba($color-primary, .85); + background-color: rgba($color-primary-element, .85); } &:active { - background-color: rgba($color-primary, .7); + background-color: rgba($color-primary-element, .7); } } &:disabled { - background-color: rgba($color-primary, .7); + background-color: rgba($color-primary-element, .7); color: nc-lighten($color-main-text, 73%); } } @@ -225,15 +225,15 @@ input { } &:not(:disabled):not(:checked) + label:hover:before, &:focus + label:before { - border-color: $color-primary; + border-color: $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; - border-color: $color-primary + background-color: $color-primary-element; + border-color: $color-primary-element; } &:disabled + label:before { border: 1px solid nc-lighten($color-main-text, 53%); @@ -494,6 +494,7 @@ input { .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: none; background: nc-darken($color-main-background, 3%); + color: $color-primary-element; } /* Animation */ diff --git a/core/css/variables.scss b/core/css/variables.scss index 47c8e1a27f8..d12109c5298 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -5,6 +5,7 @@ $color-primary-text: #ffffff; $color-error: #e9322d; $color-warning: #ffcc44; $color-success: #46ba61; +$color-primary-element: $color-primary; @function nc-darken($color, $value) { @return darken($color, $value); |