mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #6082 from nextcloud/theming-fix-white-element-color 

Use separate element color in theming
This commit is contained in:
Morris Jobke 2017-09-04 15:43:06 +02:00 committed by GitHub
parent 4fd3240b5f e0c92c2da3
commit 91fc25c28c
8 changed files with 45 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
apps/theming/css/theming.scss
View File

@ -10,7 +10,6 @@
color: $color-primary-text; color: $color-primary-text;
} }
/* invert header icons on bright background */
@if (lightness($color-primary) > 55) { @if (lightness($color-primary) > 55) {
.searchbox input[type="search"] { .searchbox input[type="search"] {
background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center; background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center;
@ -29,6 +28,31 @@
#appmenu .icon-more-white { #appmenu .icon-more-white {
background-image: url('../../../core/img/actions/more.svg'); 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 */ /* Colorized svg images */
@ -60,7 +84,8 @@
} }
input.primary { input.primary {
background-color: $color-primary; background-color: $color-primary-element;
border: 1px solid $color-primary-text;
color: $color-primary-text; color: $color-primary-text;
} }
@ -82,37 +107,6 @@ input.primary {
color: $color-primary-text !important; 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%);
}
}
} }
} }

1
apps/theming/lib/ThemingDefaults.php
View File

@ -238,6 +238,7 @@ class ThemingDefaults extends \OC_Defaults {
} }
$variables['color-primary'] = $this->getColorPrimary(); $variables['color-primary'] = $this->getColorPrimary();
$variables['color-primary-text'] = $colorPrimaryText; $variables['color-primary-text'] = $colorPrimaryText;
$variables['color-primary-element'] = $this->util->elementColor($this->getColorPrimary());
} }
if ($this->config->getAppValue('theming', 'backgroundMime', null) === 'backgroundColor') { if ($this->config->getAppValue('theming', 'backgroundMime', null) === 'backgroundColor') {

5
apps/theming/tests/ThemingDefaultsTest.php
View File

@ -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(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(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(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('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); $this->cache->expects($this->once())->method('get')->with('getScssVariables')->willReturn(null);
$folder = $this->createMock(ISimpleFolder::class); $folder = $this->createMock(ISimpleFolder::class);
$file = $this->createMock(ISimpleFile::class); $file = $this->createMock(ISimpleFile::class);
@ -538,7 +540,8 @@ class ThemingDefaultsTest extends TestCase {
'image-login-background' => "'absolute-custom-background?v=0'", 'image-login-background' => "'absolute-custom-background?v=0'",
'color-primary' => $this->defaults->getColorPrimary(), 'color-primary' => $this->defaults->getColorPrimary(),
'color-primary-text' => '#ffffff', 'color-primary-text' => '#ffffff',
'image-login-plain' => 'false' 'image-login-plain' => 'false',
'color-primary-element' => '#aaaaaa'
]; ];
$this->assertEquals($expected, $this->template->getScssVariables()); $this->assertEquals($expected, $this->template->getScssVariables());

18
core/css/inputs.scss
View File

@ -50,7 +50,7 @@ textarea,
&:focus, &:focus,
&.active { &.active {
/* active class used for multiselect */ /* active class used for multiselect */
border-color: $color-primary; border-color: $color-primary-element;
outline: none; outline: none;
} }
&:active { &:active {
@ -66,21 +66,21 @@ textarea,
} }
/* Primary action button, use sparingly */ /* Primary action button, use sparingly */
&.primary { &.primary {
border: 1px solid #fff; background-color: $color-primary-element;
background-color: $color-primary; border: 1px solid $color-primary-text;
color: $color-primary-text; color: $color-primary-text;
cursor: pointer; cursor: pointer;
&:not(:disabled) { &:not(:disabled) {
&:hover, &:hover,
&:focus { &:focus {
background-color: rgba($color-primary, .85); background-color: rgba($color-primary-element, .85);
} }
&:active { &:active {
background-color: rgba($color-primary, .7); background-color: rgba($color-primary-element, .7);
} }
} }
&:disabled { &:disabled {
background-color: rgba($color-primary, .7); background-color: rgba($color-primary-element, .7);
color: nc-lighten($color-main-text, 73%); color: nc-lighten($color-main-text, 73%);
} }
} }
@ -225,15 +225,15 @@ input {
} }
&:not(:disabled):not(:checked) + label:hover:before, &:not(:disabled):not(:checked) + label:hover:before,
&:focus + label:before { &:focus + label:before {
border-color: $color-primary; border-color: $color-primary-element;
} }
&:checked + label:before, &:checked + label:before,
&.checkbox:indeterminate + label:before { &.checkbox:indeterminate + label:before {
/* ^ :indeterminate have a strange behavior on radio, /* ^ :indeterminate have a strange behavior on radio,
so we respecified the checkbox class again to be safe */ so we respecified the checkbox class again to be safe */
box-shadow: inset 0px 0px 0px 2px $color-main-background; box-shadow: inset 0px 0px 0px 2px $color-main-background;
background-color: $color-primary; background-color: $color-primary-element;
border-color: $color-primary border-color: $color-primary-element;
} }
&:disabled + label:before { &:disabled + label:before {
border: 1px solid nc-lighten($color-main-text, 53%); border: 1px solid nc-lighten($color-main-text, 53%);

2
core/css/jquery-ui-fixes.scss
View File

@ -190,6 +190,6 @@
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
border: 1px solid transparent; border: 1px solid transparent;
background: inherit; background: inherit;
color: $color-primary; color: $color-primary-element;
} }
} }

1
core/css/variables.scss
View File

@ -5,6 +5,7 @@ $color-primary-text: #ffffff;
$color-error: #e9322d; $color-error: #e9322d;
$color-warning: #ffcc44; $color-warning: #ffcc44;
$color-success: #46ba61; $color-success: #46ba61;
$color-primary-element: $color-primary;
@function nc-darken($color, $value) { @function nc-darken($color, $value) {
@return darken($color, $value); @return darken($color, $value);

1
lib/composer/composer/autoload_classmap.php
View File

@ -385,6 +385,7 @@ return array(
'OC\\Command\\CallableJob' => $baseDir . '/lib/private/Command/CallableJob.php', 'OC\\Command\\CallableJob' => $baseDir . '/lib/private/Command/CallableJob.php',
'OC\\Command\\ClosureJob' => $baseDir . '/lib/private/Command/ClosureJob.php', 'OC\\Command\\ClosureJob' => $baseDir . '/lib/private/Command/ClosureJob.php',
'OC\\Command\\CommandJob' => $baseDir . '/lib/private/Command/CommandJob.php', 'OC\\Command\\CommandJob' => $baseDir . '/lib/private/Command/CommandJob.php',
'OC\\Command\\CronBus' => $baseDir . '/lib/private/Command/CronBus.php',
'OC\\Command\\FileAccess' => $baseDir . '/lib/private/Command/FileAccess.php', 'OC\\Command\\FileAccess' => $baseDir . '/lib/private/Command/FileAccess.php',
'OC\\Command\\QueueBus' => $baseDir . '/lib/private/Command/QueueBus.php', 'OC\\Command\\QueueBus' => $baseDir . '/lib/private/Command/QueueBus.php',
'OC\\Comments\\Comment' => $baseDir . '/lib/private/Comments/Comment.php', 'OC\\Comments\\Comment' => $baseDir . '/lib/private/Comments/Comment.php',

1
lib/composer/composer/autoload_static.php
View File

@ -415,6 +415,7 @@ class ComposerStaticInit53792487c5a8370acc0b06b1a864ff4c
'OC\\Command\\CallableJob' => __DIR__ . '/../../..' . '/lib/private/Command/CallableJob.php', 'OC\\Command\\CallableJob' => __DIR__ . '/../../..' . '/lib/private/Command/CallableJob.php',
'OC\\Command\\ClosureJob' => __DIR__ . '/../../..' . '/lib/private/Command/ClosureJob.php', 'OC\\Command\\ClosureJob' => __DIR__ . '/../../..' . '/lib/private/Command/ClosureJob.php',
'OC\\Command\\CommandJob' => __DIR__ . '/../../..' . '/lib/private/Command/CommandJob.php', 'OC\\Command\\CommandJob' => __DIR__ . '/../../..' . '/lib/private/Command/CommandJob.php',
'OC\\Command\\CronBus' => __DIR__ . '/../../..' . '/lib/private/Command/CronBus.php',
'OC\\Command\\FileAccess' => __DIR__ . '/../../..' . '/lib/private/Command/FileAccess.php', 'OC\\Command\\FileAccess' => __DIR__ . '/../../..' . '/lib/private/Command/FileAccess.php',
'OC\\Command\\QueueBus' => __DIR__ . '/../../..' . '/lib/private/Command/QueueBus.php', 'OC\\Command\\QueueBus' => __DIR__ . '/../../..' . '/lib/private/Command/QueueBus.php',
'OC\\Comments\\Comment' => __DIR__ . '/../../..' . '/lib/private/Comments/Comment.php', 'OC\\Comments\\Comment' => __DIR__ . '/../../..' . '/lib/private/Comments/Comment.php',