diff --git a/apps/accessibility/css/themedark.scss b/apps/accessibility/css/themedark.scss index 84f3d99c59..185b921fe6 100644 --- a/apps/accessibility/css/themedark.scss +++ b/apps/accessibility/css/themedark.scss @@ -74,3 +74,15 @@ $color-border-dark: lighten($color-main-background, 14%); filter: invert(100%); } } + +input[type=checkbox] { + &.checkbox { + &:checked + label:before { + background-image: url('../../../core/img/actions/checkbox-mark-dark.svg'); + } + + &:indeterminate + label:before { + background-image: url('../../../core/img/actions/checkbox-mixed-dark.svg'); + } + } +} diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss index 7db64924f3..928c54bc10 100644 --- a/apps/theming/css/theming.scss +++ b/apps/theming/css/theming.scss @@ -84,10 +84,6 @@ $invert: luma($color-primary) > 0.6; @include icon-color('checkbox-mark', 'actions', $color-white, 1, true); } } - /* Always give primary button a border for light primary colors */ - .primary { - border-color: $color-border !important; - } } @else { #appmenu:not(.inverted) svg { filter: none; @@ -203,6 +199,29 @@ input.primary, } } +/** Handle primary buttons for bright colors */ +@if (luma($color-primary) > 0.8) { + select, + button, .button, + input:not([type='range']), + textarea, + div[contenteditable=true], + .pager li a { + &.primary:not(:disabled) { + background-color: var(--color-background-dark); + color: var(--color-main-text); + border-color: var(--color-text-lighter); + + &:hover, &:focus, &:active { + background-color: var(--color-background-darker); + color: var(--color-main-text); + border-color: var(--color-text); + } + } + } + +} + @if ($color-primary == #ffffff) { /* show grey border below header */ #body-user #header, diff --git a/apps/theming/lib/Util.php b/apps/theming/lib/Util.php index 38b876f361..75abea142c 100644 --- a/apps/theming/lib/Util.php +++ b/apps/theming/lib/Util.php @@ -79,7 +79,7 @@ class Util { public function elementColor($color) { $l = $this->calculateLuminance($color); if($l>0.8) { - return '#dddddd'; + return '#aaaaaa'; } return $color; } diff --git a/apps/theming/tests/CapabilitiesTest.php b/apps/theming/tests/CapabilitiesTest.php index 775b588c78..332d755655 100644 --- a/apps/theming/tests/CapabilitiesTest.php +++ b/apps/theming/tests/CapabilitiesTest.php @@ -74,7 +74,7 @@ class CapabilitiesTest extends TestCase { 'slogan' => 'slogan', 'color' => '#FFFFFF', 'color-text' => '#000000', - 'color-element' => '#dddddd', + 'color-element' => '#aaaaaa', 'logo' => 'http://absolute/logo', 'background' => 'http://absolute/background', 'background-plain' => false, diff --git a/apps/theming/tests/UtilTest.php b/apps/theming/tests/UtilTest.php index d0263e1122..a36c733068 100644 --- a/apps/theming/tests/UtilTest.php +++ b/apps/theming/tests/UtilTest.php @@ -105,7 +105,7 @@ class UtilTest extends TestCase { public function testElementColorOnBrightBackground() { $elementColor = $this->util->elementColor('#ffffff'); - $this->assertEquals('#dddddd', $elementColor); + $this->assertEquals('#aaaaaa', $elementColor); } public function testGenerateRadioButtonWhite() { diff --git a/core/img/actions/checkbox-mark-dark.svg b/core/img/actions/checkbox-mark-dark.svg new file mode 100644 index 0000000000..dbd016163c --- /dev/null +++ b/core/img/actions/checkbox-mark-dark.svg @@ -0,0 +1 @@ + diff --git a/core/img/actions/checkbox-mixed-dark.svg b/core/img/actions/checkbox-mixed-dark.svg new file mode 100644 index 0000000000..22da18e04c --- /dev/null +++ b/core/img/actions/checkbox-mixed-dark.svg @@ -0,0 +1 @@ +