summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--core/css/apps.scss4
-rw-r--r--core/css/css-variables.scss5
-rw-r--r--core/css/header.scss3
-rw-r--r--core/css/icons.scss6
-rw-r--r--core/css/inputs.scss31
-rw-r--r--core/css/mobile.scss2
-rw-r--r--core/css/share.scss3
-rw-r--r--core/css/styles.scss17
-rw-r--r--core/css/variables.scss10
9 files changed, 43 insertions, 38 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss
index a125331091e..ed582b02bb0 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -250,7 +250,7 @@ kbd {
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
- color: var(--color-error);
+ color: var(--color-main-text);
opacity: .57;
flex: 1 1 0px;
z-index: 100; /* above the bullet to allow click*/
@@ -644,7 +644,7 @@ kbd {
.info-text {
padding: 5px 0 7px 22px;
- color: rgba(var(--color-main-text), .4);
+ color: var(--color-text-lighter);
}
input {
&[type='checkbox'],
diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
index 00725f94e1e..0a12ac4b2a6 100644
--- a/core/css/css-variables.scss
+++ b/core/css/css-variables.scss
@@ -13,19 +13,20 @@
--color-primary-text: $color-primary-text;
--color-primary-text-dark: $color-primary-text-dark;
--color-primary-element: $color-primary-element;
+ --color-primary-element-light: $color-primary-element-light;
--color-error: $color-error;
--color-warning: $color-warning;
--color-success: $color-success;
--color-text-maxcontrast: $color-text-maxcontrast;
+ --color-text-light: $color-text-light;
--color-text-lighter: $color-text-lighter;
- --color-text-details: $color-text-details;
--image-logo: $image-logo;
--image-login-background: $image-login-background;
- --color-loading: $color-loading;
+ --color-loading-light: $color-loading-light;
--color-loading-dark: $color-loading-dark;
--color-box-shadow: $color-box-shadow;
diff --git a/core/css/header.scss b/core/css/header.scss
index cdc0ff45cb3..c4f7165fb5c 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -340,7 +340,6 @@ nav[role='navigation'] {
#settings {
display: inline-block;
height: 100%;
- color: rgba(var(--color-primary-text), 0.7);
cursor: pointer;
flex: 0 0 auto;
@@ -500,7 +499,7 @@ nav[role='navigation'] {
border-radius: var(--border-radius);
border-top-left-radius: 0;
border-top-right-radius: 0;
- color: rgba(var(--color-main-text), .7);
+ color: var(--color-text-lighter);
width: auto;
left: 50%;
top: 100%;
diff --git a/core/css/icons.scss b/core/css/icons.scss
index fc95efb6c45..c7c5bfe0c15 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -42,14 +42,14 @@
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
- border: 2px solid rgba(var(--color-loading), 0.5);
- border-top-color: var(--color-loading);
+ border: 2px solid var(--color-loading-dark);
+ border-top-color: var(--color-loading-light);
}
}
.icon-loading-dark:after,
.icon-loading-small-dark:after {
- border: 2px solid rgba(var(--color-loading-dark), 0.5);
+ border: 2px solid var(--color-loading-light);
border-top-color: var(--color-loading-dark);
}
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 887b32298c6..4d916e22f27 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -32,6 +32,13 @@ div[contenteditable=false] {
box-sizing: border-box;
}
+/**
+ * color-text-lighter normal state
+ * color-text-lighter active state
+ * color-text-maxcontrast disabled state
+ */
+
+
/* Default global values */
select,
button, .button,
@@ -59,11 +66,12 @@ div[contenteditable=true],
&:active {
outline: none;
background-color: var(--color-main-background);
+ color: var(--color-text-light);
}
}
&:disabled {
background-color: var(--color-background-dark);
- color: rgba(var(--color-main-text), 0.4);
+ color: var(--color-text-maxcontrast);
cursor: default;
opacity: 0.5;
}
@@ -82,15 +90,17 @@ div[contenteditable=true],
cursor: pointer;
&:not(:disabled) {
&:hover,
- &:focus {
- background-color: rgba(var(--color-primary-element), .85);
+ &:focus,
+ &:active {
+ background-color: var(--color-primary-element-light)
}
&:active {
- background-color: rgba(var(--color-primary-element), .7);
+ color: var(--color-primary-text-dark);
}
}
&:disabled {
- background-color: rgba(var(--color-primary-element), .7);
+ // opacity is already defined to .5 if disabled
+ background-color: var(--color-primary-element);
color: var(--color-primary-text-dark);
}
}
@@ -108,7 +118,7 @@ div[contenteditable=false] {
cursor: text;
background-color: var(--color-background-dark);
- color: rgba(var(--color-main-text), 0.4);
+ color: var(--color-text-lighter);
cursor: default;
opacity: 0.5;
}
@@ -349,7 +359,6 @@ input {
/* We do not use the nc-darken function as this is not supposed to be changed */
$color-checkbox-radio-white: #fff;
- --color-checkbox-radio-white: $color-checkbox-radio-white;
&.radio--white,
&.checkbox--white {
+ label:before,
@@ -357,7 +366,7 @@ input {
border-color: darken($color-checkbox-radio-white, 27%);
}
&:not(:disabled):not(:checked) + label:hover:before {
- border-color: var(--color-checkbox-radio-white);
+ border-color: $color-checkbox-radio-white;
}
&:checked + label:before {
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
@@ -366,11 +375,11 @@ input {
}
&:disabled + label:before {
background-color: darken($color-checkbox-radio-white, 27%) !important; /* override other status */
- border-color: rgba(var(--color-checkbox-radio-white), 0.4) !important; /* override other status */
+ border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
}
&:checked:disabled + label:before {
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
- border-color: rgba(var(--color-checkbox-radio-white), 0.4) !important; /* override other status */
+ border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
background-color: darken($color-checkbox-radio-white, 27%);
}
}
@@ -378,7 +387,7 @@ input {
&:checked + label:before,
&:indeterminate + label:before {
background-color: transparent !important; /* Override default checked */
- border-color: var(--color-checkbox-radio-white) !important; /* Override default checked */
+ border-color: $color-checkbox-radio-white !important; /* Override default checked */
background-image: url('../img/actions/checkbox-mark-white.svg');
}
&:indeterminate + label:before {
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index f4381dde88a..f3b89ddb48c 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -72,7 +72,7 @@
width: 44px;
height: 44px;
z-index: 149;
- background-color: rgba(var(--color-main-background), .7);
+ background-color: var(--color-main-background-darker);
cursor: pointer;
opacity: .6;
}
diff --git a/core/css/share.scss b/core/css/share.scss
index 97025676d10..07489cd55a3 100644
--- a/core/css/share.scss
+++ b/core/css/share.scss
@@ -61,7 +61,6 @@
.error {
color: var(--color-error);
border-color: var(--color-error);
- box-shadow: 0 0 6px rgba(var(--color-error), 0.35);
}
.mailView .icon-mail {
opacity: 0.5;
@@ -173,7 +172,7 @@
.notCreatable {
padding-left: 12px;
padding-top: 12px;
- color: rgba(var(--color-main-text), .4);
+ color: var(--color-text-lighter);
}
.contactsmenu-popover {
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 05725a967d4..1acae23a545 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -110,14 +110,14 @@ body {
width: 258px !important;
display: inline-block;
margin-bottom: 0 !important;
- background-color: rgba(var(--color-main-text), 0.3) !important;
+ background-color: var(--color-background-darker) !important;
border: none !important;
}
.two-factor-link {
display: inline-block;
padding: 12px;
- color: rgba(var(--color-main-background), 0.75);
+ color: var(--color-text-lighter);
}
.float-spinner {
@@ -138,7 +138,7 @@ body {
width: 100%;
z-index: 9000;
text-align: center;
- background-color: rgba(var(--color-main-text), 0.5);
+ background-color: var(--color-background-darker);
color: var(--color-primary-text);
line-height: 125%;
font-size: 24px;
@@ -200,7 +200,7 @@ body {
width: 155px;
cursor: text;
background-color: var(--color-primary) !important;
- border: 1px solid rgba(var(--color-primary-text), 0.5) !important;
+ border: 1px solid var(--color-primary-text-dark) !important;
}
&:hover, &:focus, &:active {
opacity: 1;
@@ -236,7 +236,7 @@ body {
height: 44px;
padding: 0;
margin: 0;
- background-color: rgba(var(--color-main-background), 0.95);
+ background-color: var(--color-main-background-light);
z-index: 60;
-webkit-user-select: none;
-moz-user-select: none;
@@ -488,7 +488,6 @@ body {
border-top: 0 !important;
border-bottom: 0 !important;
border-radius: 0 !important;
- box-shadow: 0 1px 0 rgba(var(--color-main-text), 0.1) inset !important;
}
#body-login .groupbottom input, .groupbottom input {
@@ -496,7 +495,6 @@ body {
border-top: 0 !important;
border-top-right-radius: 0 !important;
border-top-left-radius: 0 !important;
- box-shadow: 0 1px 0 rgba(var(--color-main-text), 0.1) inset !important;
}
#body-login .groupbottom input[type=submit] {
@@ -522,7 +520,6 @@ label.infield {
user-select: none;
}
.errors {
- background: rgba(var(--color-error), .35);
border: 1px solid var(--color-error);
list-style-indent: inside;
margin: 0 0 2em;
@@ -530,7 +527,6 @@ label.infield {
}
}
.success {
- background: rgba(var(--color-success), .35);
border: 1px solid var(--color-success);
width: 35%;
margin: 30px auto;
@@ -645,7 +641,7 @@ label.infield {
.warning, .update, .error {
display: block;
padding: 10px;
- background-color: rgba(var(--color-main-text), 0.3);
+ background-color: var(--color-background-darker);
color: var(--color-primary-text);
text-align: left;
border-radius: var(--border-radius);
@@ -674,7 +670,6 @@ label.infield {
#body-user .warning, #body-settings .warning {
margin-top: 8px;
padding: 5px;
- background: rgba(var(--color-error), .15);
border-radius: var(--border-radius);
}
diff --git a/core/css/variables.scss b/core/css/variables.scss
index d66faeca0d8..748ebd68725 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -8,8 +8,9 @@
}
// SCSS variables
-$color-main-text: #000000;
-$color-main-background: #ffffff;
+// DEPRECATED, please use CSS4 vars
+$color-main-text: #000;
+$color-main-background: #fff;
// used for different active/disabled states
$color-background-dark: nc-darken($color-main-background, 7%);
@@ -19,6 +20,7 @@ $color-primary: #0082c9;
$color-primary-text: #ffffff;
$color-primary-text-dark: nc-darken($color-primary-text, 7%);
$color-primary-element: $color-primary;
+$color-primary-element-light: nc-lighten($color-primary-element, 15%);
$color-error: #e9322d;
$color-warning: #eca700;
@@ -34,8 +36,8 @@ $color-text-lighter: nc-lighten($color-main-text, 30%);
$image-logo: url('../img/logo.svg?v=1');
$image-login-background: url('../img/background.png?v=2');
-$color-loading: #969696;
-$color-loading-dark: #bbbbbb;
+$color-loading-light: #777;
+$color-loading-dark: #ccc;
$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-01 05:34:00 +0000