diff options
| -rw-r--r-- | apps/theming/css/theming.scss | 4 | ||||
| -rw-r--r-- | core/css/css-variables.scss | 11 | ||||
| -rw-r--r-- | core/css/inputs.scss | 16 | ||||
| -rw-r--r-- | core/css/variables.scss | 11 |
4 files changed, 33 insertions, 9 deletions
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss index 2b9d12d2cd4..5117ff753c2 100644 --- a/apps/theming/css/theming.scss +++ b/apps/theming/css/theming.scss @@ -260,6 +260,9 @@ input.primary, /** Handle primary buttons for bright colors */ @if (luma($color-primary) > 0.8) { + :root { + --color-primary-light-text: var(--color-primary-text); + } select, button, .button, input:not([type='range']), @@ -278,7 +281,6 @@ input.primary, } } } - } @if ($color-primary == #ffffff) { diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss index 86f80611a6c..d475d6d2c66 100644 --- a/core/css/css-variables.scss +++ b/core/css/css-variables.scss @@ -18,15 +18,23 @@ --color-placeholder-dark: #{$color-placeholder-dark}; --color-primary: #{$color-primary}; + --color-primary-hover: #{$color-primary-hover}; --color-primary-light: #{$color-primary-light}; + --color-primary-light-hover: #{$color-primary-light-hover}; --color-primary-text: #{$color-primary-text}; + --color-primary-light-text: #{$color-primary-light-text}; --color-primary-text-dark: #{$color-primary-text-dark}; --color-primary-element: #{$color-primary-element}; + --color-primary-element-hover: #{$color-primary-element-hover}; --color-primary-element-light: #{$color-primary-element-light}; + --color-primary-element-lighter: #{$color-primary-element-lighter}; --color-error: #{$color-error}; + --color-error-hover: #{$color-error-hover}; --color-warning: #{$color-warning}; + --color-warning-hover: #{$color-warning-hover}; --color-success: #{$color-success}; + --color-success-hover: #{$color-success-hover}; --color-text-maxcontrast: #{$color-text-maxcontrast}; --color-text-light: #{$color-main-text}; @@ -44,6 +52,8 @@ --color-border: #{$color-border}; --color-border-dark: #{$color-border-dark}; + + --border-radius: #{$border-radius}; --border-radius-large: #{$border-radius-large}; --border-radius-pill: #{$border-radius-pill}; @@ -58,3 +68,4 @@ --header-height: #{$header-height}; } + diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 3ae0c3a270e..3b52ee8e635 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -24,7 +24,7 @@ $default-height: 34px; /* Simple selector to allow easy overriding */ select, -button, +button:not(.button-vue), input, textarea, div[contenteditable=true], @@ -43,7 +43,7 @@ div[contenteditable=false] { /* Default global values */ div.select2-drop .select2-search input, // TODO: REMOVE WHEN DROPPING SELECT2 select, -button, .button, +button:not(.button-vue), .button:not(.button-vue), input:not([type='range']), textarea, div[contenteditable=true], @@ -168,8 +168,8 @@ input { /* 'Click' inputs */ select, -button, .button, -input[type='button'], +button:not(.button-vue), .button:not(.button-vue), +input[type='button']:not(.button-vue), input[type='submit'], input[type='reset'] { padding: 6px 16px; @@ -184,7 +184,7 @@ input[type='reset'] { } } select, -button, .button { +button:not(.button-vue), .button:not(.button-vue) { * { cursor: pointer; } @@ -197,8 +197,8 @@ button, .button { } /* Buttons */ -button, .button, -input[type='button'], +button:not(.button-vue), .button:not(.button-vue), +input[type='button']:not(.button-vue), input[type='submit'], input[type='reset'] { font-weight: bold; @@ -215,7 +215,7 @@ input[type='reset'] { color: #fff !important; } } -button, .button { +button:not(.button-vue), .button:not(.button-vue) { > span { /* icon position inside buttons */ &[class^='icon-'], diff --git a/core/css/variables.scss b/core/css/variables.scss index cf7d919d72d..84646379ef1 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -44,17 +44,27 @@ $color-placeholder-light: nc-darken($color-main-background, 10%) !default; $color-placeholder-dark: nc-darken($color-main-background, 20%) !default; $color-primary: #0082c9 !default; +$color-primary-hover: mix($color-primary, $color-main-background, 80%) !default; + $color-primary-light: mix($color-primary, $color-main-background, 10%) !default; +$color-primary-light-text: $color-primary !default; +$color-primary-light-hover: mix($color-primary-light, $color-main-text, 95%) !default; + $color-primary-text: #ffffff !default; // 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-hover: mix($color-primary-element, $color-main-background, 80%) !default; $color-primary-element-light: lighten($color-primary-element, 15%) !default; +$color-primary-element-lighter: mix($color-primary-element, $color-main-background, 15%) !default; $color-error: #e9322d; +$color-error-hover: mix($color-error, $color-main-background, 80%) !default; $color-warning: #eca700; +$color-warning-hover: mix($color-warning, $color-main-background, 80%) !default; $color-success: #46ba61; +$color-success-hover: mix($color-success, $color-main-background, 80%) !default; // used for svg $color-white: #fff; $color-black: #000; @@ -81,6 +91,7 @@ $color-box-shadow: transparentize(nc-darken($color-main-background, 70%), 0.5) ! $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; $border-radius-large: 10px !default; // Pill-style button, value is large so big buttons also have correct roundness |