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

Use separate element color in theming 

This way we can use a grey color when the primary color is to bright

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2017-08-11 15:11:47 +02:00 committed by Morris Jobke
parent ebadf2f21d
commit 0f2f19c65f
No known key found for this signature in database
GPG Key ID: FE03C3A163FEDE68
4 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -61,8 +61,8 @@
}
input.primary {
background-color: nc-lighten($color-primary, .9);
border: 1px solid $color-primary;
background-color: $color-primary-element;
border: 1px solid $color-primary-text;
color: $color-primary-text;
}
@ -94,16 +94,16 @@ input.primary {
background-color: nc-darken($color-primary, 10%);
}
input[type='checkbox'].checkbox--white + label:before {
border-color: nc-darken($color-primary, 40%) !important;
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, 30%) !important;
border-color: nc-darken($color-primary-element, 30%) !important;
}
input[type='checkbox'].checkbox--white:checked + label:before {
border-color: nc-darken($color-primary, 30%) !important;
border-color: nc-darken($color-primary-element, 30%) !important;
background-image: url('../../../core/img/actions/checkbox-mark.svg');
background-color: nc-darken($color-primary, 30%) !important;
background-color: nc-darken($color-primary-element, 30%) !important;
}
} @else {
#submit {

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-text'] = $colorPrimaryText;
$variables['color-primary-element'] = $this->util->elementColor($this->getColorPrimary());
}
if ($this->config->getAppValue('theming', 'backgroundMime', null) === 'backgroundColor') {

19
core/css/inputs.scss
View File

@ -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 */

1
core/css/variables.scss
View File

@ -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);