summaryrefslogtreecommitdiffstats
path: root/core/css
diff options
context:
space:
mode:
Diffstat (limited to 'core/css')
-rw-r--r--core/css/apps.scss102
-rw-r--r--core/css/css-variables.scss39
-rw-r--r--core/css/fixes.scss2
-rw-r--r--core/css/fonts.scss9
-rw-r--r--core/css/header.scss41
-rw-r--r--core/css/icons.scss58
-rw-r--r--core/css/inputs.scss208
-rw-r--r--core/css/jquery-ui-fixes.scss58
-rw-r--r--core/css/jquery.ocdialog.scss12
-rw-r--r--core/css/mobile.scss6
-rw-r--r--core/css/multiselect.scss10
-rw-r--r--core/css/public.scss4
-rw-r--r--core/css/share.scss9
-rw-r--r--core/css/styles.scss152
-rw-r--r--core/css/tooltip.scss16
-rw-r--r--core/css/variables.scss56
16 files changed, 438 insertions, 344 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 19447d6e41d..822a27cc197 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -58,7 +58,7 @@ kbd {
padding: 4px 10px;
border: 1px solid #ccc;
box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
display: inline-block;
white-space: nowrap;
}
@@ -83,13 +83,13 @@ kbd {
height: 100%;
float: left;
box-sizing: border-box;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
padding-bottom: 44px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
- border-right: 1px solid $color-border;
+ border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
@@ -152,7 +152,7 @@ kbd {
&,
> a {
opacity: 1;
- box-shadow: inset 4px 0 $color-primary;
+ box-shadow: inset 4px 0 var(--color-primary);
}
}
@@ -174,6 +174,23 @@ kbd {
}
}
+ &.app-navigation-caption {
+ font-weight: bold;
+ line-height: 44px;
+ padding: 0 44px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ // !important to overwrite specific hover and focus
+ opacity: .7;
+ box-shadow: none !important;
+ user-select: none;
+ pointer-events:none;
+
+ &:not(:first-child) {
+ margin-top: 22px;
+ }
+ }
+
/* Second level nesting for lists */
> ul {
flex: 0 1 auto;
@@ -198,7 +215,7 @@ kbd {
}
&.active {
- box-shadow: inset 4px 0 $color-primary;
+ box-shadow: inset 4px 0 var(--color-primary);
}
/* align loader */
@@ -250,7 +267,7 @@ kbd {
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
- color: $color-main-text;
+ color: var(--color-main-text);
opacity: .57;
flex: 1 1 0px;
z-index: 100; /* above the bullet to allow click*/
@@ -442,8 +459,8 @@ kbd {
span {
padding: 2px 5px;
border-radius: 10px;
- background-color: $color-primary;
- color: $color-primary-text;
+ background-color: var(--color-primary);
+ color: var(--color-primary-text);
}
}
}
@@ -460,7 +477,7 @@ kbd {
transition: opacity 250ms ease-in-out;
opacity: 0;
position: absolute;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
z-index: -1;
form,
div {
@@ -537,7 +554,7 @@ kbd {
z-index 250ms ease-in-out;
position: absolute;
left: 0;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
box-sizing: border-box;
}
@@ -551,10 +568,7 @@ kbd {
}
.error {
- color: $color-error;
- }
- .app-navigation-separator {
- border-bottom: 1px solid nc-lighten($color-main-text, 86%);
+ color: var(--color-error);
}
.app-navigation-entry-utils ul,
@@ -599,8 +613,8 @@ kbd {
width: 27%;
min-width: 300px;
display: block;
- background: $color-main-background;
- border-left: 1px solid $color-border;
+ background: var(--color-main-background);
+ border-left: 1px solid var(--color-border);
-webkit-transition: margin-right 300ms;
transition: margin-right 300ms;
overflow-x: hidden;
@@ -632,11 +646,11 @@ kbd {
#app-settings-content {
display: none;
padding: 10px;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
/* restrict height of settings and make scrollable */
max-height: 300px;
overflow-y: auto;
- border-right: 1px solid $color-border;
+ border-right: 1px solid var(--color-border);
width: 250px;
box-sizing: border-box;
@@ -647,7 +661,7 @@ kbd {
.info-text {
padding: 5px 0 7px 22px;
- color: rgba($color-main-text, .4);
+ color: var(--color-text-lighter);
}
input {
&[type='checkbox'],
@@ -665,10 +679,10 @@ kbd {
}
#app-settings-header {
- border-right: 1px solid $color-border;
+ border-right: 1px solid var(--color-border);
width: 250px;
box-sizing: border-box;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
}
.settings-button {
@@ -677,7 +691,7 @@ kbd {
width: 100%;
padding: 0;
margin: 0;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
background-image: url('../img/actions/settings-dark.svg?v=1');
background-position: 14px center;
background-repeat: no-repeat;
@@ -689,14 +703,14 @@ kbd {
font-weight: 400;
/* like app-navigation a */
- color: $color-main-text;
+ color: var(--color-main-text);
opacity: .57;
&.opened,
&:hover {
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
opacity: 1;
- box-shadow: inset 4px 0 $color-primary;
+ box-shadow: inset 4px 0 var(--color-primary);
}
}
@@ -704,7 +718,7 @@ kbd {
.section {
display: block;
padding: 30px;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
margin-bottom: 24px;
&.hidden {
display: none !important;
@@ -745,25 +759,25 @@ kbd {
float: left;
padding: 5px;
cursor: pointer;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
margin-bottom: 1px;
a {
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
margin-bottom: 1px;
}
&.selected {
font-weight: 600;
- border-bottom: 1px solid nc-lighten($color-main-text, 20%);
+ border-bottom: 1px solid var(--color-border);
}
&:hover {
- border-bottom: 1px solid nc-lighten($color-main-text, 20%);
+ border-bottom: 1px solid var(--color-border);
}
&.selected, &:hover {
margin-bottom: 0px;
- color: $color-main-text;
+ color: var(--color-main-text);
a {
margin-bottom: 0px;
- color: $color-main-text;
+ color: var(--color-main-text);
}
}
}
@@ -785,7 +799,7 @@ $popovericon-size: 16px;
.popovermenu, .popovermenu:after,
#app-navigation .app-navigation-entry-menu,
#app-navigation .app-navigation-entry-menu:after {
- border: 1px solid $color-border;
+ border: 1px solid var(--color-border);
}
}
@@ -793,14 +807,14 @@ $popovericon-size: 16px;
.app-navigation-entry-menu,
.popovermenu {
position: absolute;
- background-color: $color-main-background;
- color: $color-main-text;
- border-radius: $border-radius;
+ background-color: var(--color-main-background);
+ color: var(--color-main-text);
+ border-radius: var(--border-radius);
z-index: 110;
margin: 5px;
margin-top: -5px;
right: 0;
- filter: drop-shadow(0 1px 3px $color-box-shadow);
+ filter: drop-shadow(0 1px 3px var(--color-box-shadow));
display: none;
&:after {
@@ -815,7 +829,7 @@ $popovericon-size: 16px;
width: 0;
position: absolute;
pointer-events: none;
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
border-width: 10px;
}
/* Center the popover */
@@ -865,7 +879,7 @@ $popovericon-size: 16px;
font-weight: 300;
box-shadow: none;
width: 100%;
- color: $color-main-text;
+ color: var(--color-main-text);
/* Override the app-navigation li opacity */
opacity: .7 !important;
span[class^='icon-'],
@@ -1013,7 +1027,7 @@ $popovericon-size: 16px;
/* CONTENT LIST ------------------------------------------------------------- */
.app-content-list {
width: 300px;
- border-right: 1px solid nc-darken($color-main-background, 8%);
+ border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
transition: transform 250ms ease-in-out;
@@ -1022,7 +1036,7 @@ $popovericon-size: 16px;
.app-content-list-item {
position: relative;
height: 68px;
- border-top: 1px solid nc-darken($color-main-background, 8%);
+ border-top: 1px solid var(--color-border);
cursor: pointer;
padding: 10px 7px;
display: flex;
@@ -1061,7 +1075,7 @@ $popovericon-size: 16px;
&:hover, &:focus,
&.active {
- background-color: nc-darken($color-main-background, 6%);
+ background-color: var(--color-background-dark);
}
.app-content-list-item-checkbox.checkbox + label,
@@ -1177,14 +1191,14 @@ $popovericon-size: 16px;
/* full width for message list on mobile */
.app-content-list {
width: 100%;
- background: $color-main-background;
+ background: var(--color-main-background);
position: relative;
z-index: 100;
}
/* overlay message detail on top of message list */
.app-content-detail {
- background: $color-main-background;
+ background: var(--color-main-background);
width: 100%;
left: 0;
height: 100%;
diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
new file mode 100644
index 00000000000..b1b7df3115f
--- /dev/null
+++ b/core/css/css-variables.scss
@@ -0,0 +1,39 @@
+// CSS4 Variables
+// Remember, you cannot use scss functions with css4 variables
+// All css4 variables must be fixed! Scss is a PRE processor
+// css4 variables are processed after scss!
+:root {
+ --color-main-text: $color-main-text;
+ --color-main-background: $color-main-background;
+
+ --color-background-dark: $color-background-dark;
+ --color-background-darker: $color-background-darker;
+
+ --color-primary: $color-primary;
+ --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;
+
+ --image-logo: $image-logo;
+ --image-login-background: $image-login-background;
+
+ --color-loading-light: $color-loading-light;
+ --color-loading-dark: $color-loading-dark;
+
+ --color-box-shadow: $color-box-shadow;
+
+ --color-border: $color-border;
+ --color-border-dark: $color-border-dark;
+ --border-radius: $border-radius;
+
+ --font-face: $font-face;
+}
diff --git a/core/css/fixes.scss b/core/css/fixes.scss
index 09ab9c1d244..2b93b2914cd 100644
--- a/core/css/fixes.scss
+++ b/core/css/fixes.scss
@@ -22,5 +22,5 @@ select {
.ie .ui-timepicker.ui-widget,
.ie #appmenu li span,
.ie .tooltip-inner {
- box-shadow: 0 1px 10px $color-box-shadow;
+ box-shadow: 0 1px 10px var(--color-box-shadow);
}
diff --git a/core/css/fonts.scss b/core/css/fonts.scss
index f72aa2930cf..441b48f3856 100644
--- a/core/css/fonts.scss
+++ b/core/css/fonts.scss
@@ -4,7 +4,8 @@
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
- src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans-Regular.woff') format('woff');
+ src: local('Open Sans'), local('OpenSans'),
+ url('../fonts/OpenSans-Regular.woff') format('woff');
}
}
@@ -12,12 +13,14 @@
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
- src: local('Open Sans Light'), local('OpenSans-Light'), url('../fonts/OpenSans-Light.woff') format('woff');
+ src: local('Open Sans Light'), local('OpenSans-Light'),
+ url('../fonts/OpenSans-Light.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
- src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('../fonts/OpenSans-Semibold.woff') format('woff');
+ src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
+ url('../fonts/OpenSans-Semibold.woff') format('woff');
}
diff --git a/core/css/header.scss b/core/css/header.scss
index d71ec5b713a..1507a711636 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -33,7 +33,7 @@
&:focus {
left: 76px;
top: -9px;
- color: $color-primary-text;
+ color: var(--color-primary-text);
width: auto;
height: auto;
}
@@ -50,7 +50,7 @@
right: 0;
z-index: 2000;
height: 50px;
- background-color: $color-primary;
+ background-color: var(--color-primary);
box-sizing: border-box;
justify-content: space-between;
}
@@ -72,8 +72,8 @@
#header {
/* Header menu */
.menu {
- background-color: $color-main-background;
- filter: drop-shadow(0 1px 10px $color-box-shadow);
+ background-color: var(--color-main-background);
+ filter: drop-shadow(0 1px 5px var(--color-box-shadow));
border-radius: 0 0 3px 3px;
box-sizing: border-box;
z-index: 2000;
@@ -91,7 +91,7 @@
/* Dropdown arrow */
&:after {
border: 10px solid transparent;
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
bottom: 100%;
content: ' ';
height: 0;
@@ -103,7 +103,7 @@
}
.logo {
display: inline-flex;
- background-image: url($image-logo);
+ background-image: var(--image-logo);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
@@ -207,7 +207,7 @@
.header-appname {
display: inline-block;
position: relative;
- color: $color-primary-text;
+ color: var(--color-primary-text);
font-size: 16px;
font-weight: 300;
margin: 0;
@@ -239,8 +239,8 @@ nav[role='navigation'] {
.header-left #navigation,
.ui-datepicker,
.ui-timepicker.ui-widget {
- background-color: $color-main-background;
- filter: drop-shadow(0 1px 10px $color-box-shadow);
+ background-color: var(--color-main-background);
+ filter: drop-shadow(0 1px 10px var(--color-box-shadow));
&:after {
/* position of dropdown arrow */
left: 50%;
@@ -252,7 +252,7 @@ nav[role='navigation'] {
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
border-width: 10px;
margin-left: -10px; /* border width */
}
@@ -276,7 +276,7 @@ nav[role='navigation'] {
display: inline-block;
padding-bottom: 0;
padding-left: 10px;
- color: $color-main-text;
+ color: var(--color-main-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -340,7 +340,6 @@ nav[role='navigation'] {
#settings {
display: inline-block;
height: 100%;
- color: rgba($color-primary-text, 0.7);
cursor: pointer;
flex: 0 0 auto;
@@ -356,7 +355,7 @@ nav[role='navigation'] {
&:hover,
&:focus,
&:active {
- color: $color-primary-text;
+ color: var(--color-primary-text);
img, #expandDisplayName {
opacity: 1;
@@ -397,7 +396,7 @@ nav[role='navigation'] {
position: absolute;
pointer-events: none;
border: 0 solid transparent;
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
border-width: 10px;
bottom: 0;
z-index: 100;
@@ -414,7 +413,7 @@ nav[role='navigation'] {
display: inline-flex;
align-items: center;
height: 40px;
- color: $color-main-text;
+ color: var(--color-main-text);
padding: 12px;
box-sizing: border-box;
opacity: .7;
@@ -434,7 +433,7 @@ nav[role='navigation'] {
&:active,
&.active {
opacity: 1;
- box-shadow: inset 4px 0 $color-primary;
+ box-shadow: inset 4px 0 var(--color-primary);
}
}
}
@@ -494,19 +493,19 @@ nav[role='navigation'] {
display: none;
position: absolute;
overflow: visible;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
white-space: nowrap;
border: none;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
border-top-left-radius: 0;
border-top-right-radius: 0;
- color: rgba($color-main-text, .7);
+ color: var(--color-text-lighter);
width: auto;
left: 50%;
top: 100%;
transform: translateX(-50%);
padding: 4px 10px;
- filter: drop-shadow(0 1px 10px $color-box-shadow);
+ filter: drop-shadow(0 1px 10px var(--color-box-shadow));
z-index: 100;
}
@@ -523,7 +522,7 @@ nav[role='navigation'] {
position: absolute;
pointer-events: none;
border: 0 solid transparent;
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
border-width: 10px;
transform: translateX(-50%);
left: 50%;
diff --git a/core/css/icons.scss b/core/css/icons.scss
index 86f416094ba..23d35b3742f 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -25,7 +25,12 @@
}
/* LOADING ------------------------------------------------------------------ */
-.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark {
+.loading,
+.loading-small,
+.icon-loading,
+.icon-loading-dark,
+.icon-loading-small,
+.icon-loading-small-dark {
position: relative;
&:after {
z-index: 2;
@@ -42,15 +47,15 @@
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
- border: 2px solid rgba($color-loading, 0.5);
- border-top-color: $color-loading;
+ border: 2px solid var(--color-loading-light);
+ border-top-color: var(--color-loading-dark);
}
}
.icon-loading-dark:after,
.icon-loading-small-dark:after {
- border: 2px solid rgba($color-loading-dark, 0.5);
- border-top-color: $color-loading-dark;
+ border: 2px solid var(--color-loading-dark);
+ border-top-color: var(--color-loading-light);
}
.icon-loading-small:after,
@@ -61,7 +66,7 @@
}
/* Css replaced elements don't have ::after nor ::before */
-img, object, video, button, textarea, input, select, div[contenteditable=true] {
+img, object, video, button, textarea, input, select, div[contenteditable='true'] {
.icon-loading {
background-image: url('../img/loading.gif');
}
@@ -92,7 +97,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
.icon-white {
filter: invert(100%);
&.icon-shadow {
- filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
+ filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
}
@@ -112,7 +117,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-audio.icon-white.icon-shadow */
.icon-audio-white {
background-image: url('../img/actions/audio.svg?v=2');
- filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
+ filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-audio-off {
@@ -122,7 +127,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-audio-off.icon-white.icon-shadow */
.icon-audio-off-white {
background-image: url('../img/actions/audio-off.svg?v=1');
- filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
+ filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-caret {
@@ -176,11 +181,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
.icon-delete {
background-image: url('../img/actions/delete.svg?v=1');
&.no-permission {
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background-image: url('../img/actions/delete.svg?v=1');
}
}
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background-image: url('../img/actions/delete-hover.svg?v=1');
filter: initial;
}
@@ -189,11 +196,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
.icon-delete-white {
background-image: url('../img/actions/delete-white.svg?v=1');
&.no-permission {
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background-image: url('../img/actions/delete-white.svg?v=1');
}
}
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background-image: url('../img/actions/delete-hover.svg?v=1');
}
}
@@ -237,7 +246,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-fullscreen.icon-white.icon-shadow */
.icon-fullscreen-white {
background-image: url('../img/actions/fullscreen.svg?v=1');
- filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
+ filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-history {
@@ -315,7 +324,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-screen.icon-white.icon-shadow */
.icon-screen-white {
background-image: url('../img/actions/screen.svg?v=1');
- filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
+ filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-screen-off {
@@ -325,7 +334,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-screen-off.icon-white.icon-shadow */
.icon-screen-off-white {
background-image: url('../img/actions/screen-off.svg?v=1');
- filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
+ filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-search {
@@ -375,14 +384,16 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
}
.icon-starred {
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background-image: url('../img/actions/star.svg?v=1');
}
background-image: url('../img/actions/starred.svg?v=1');
}
.icon-star {
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background-image: url('../img/actions/starred.svg?v=1');
}
}
@@ -434,7 +445,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
.icon-video-white {
background-image: url('../img/actions/video.svg?v=2');
- filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
+ filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-video-off {
@@ -444,7 +455,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
.icon-video-off-white {
background-image: url('../img/actions/video-off.svg?v=1');
- filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
+ filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-video-switch {
@@ -500,11 +511,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/places/files-dark.svg?v=1');
}
-.icon-file, .icon-filetype-text {
+.icon-file,
+.icon-filetype-text {
background-image: url('../img/filetypes/text.svg?v=1');
}
-.icon-folder, .icon-filetype-folder {
+.icon-folder,
+.icon-filetype-folder {
background-image: url('../img/filetypes/folder.svg?v=1');
}
@@ -614,4 +627,3 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
.icon-category-search {
background-image: url('../img/actions/search.svg?v=1');
}
-
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index e6060d2c8c8..a3ff713d813 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -14,10 +14,10 @@
/* Specifically override browser styles */
input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
- font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
+ font-family: var(--font-face)
}
.select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
- font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !important;
+ font-family: var(--font-face) !important;
}
/* Simple selector to allow easy overriding */
@@ -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,
@@ -42,28 +49,29 @@ div[contenteditable=true],
margin: 3px 3px 3px 0;
padding: 7px 6px;
font-size: 13px;
- background-color: $color-main-background;
- color: nc-lighten($color-main-text, 33%);
- border: 1px solid nc-darken($color-main-background, 14%);
+ background-color: var(--color-main-background);
+ color: var(--color-text-lighter);
+ border: 1px solid var(--color-border-dark);
outline: none;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
cursor: text;
&:not(:disabled):not(.primary) {
&:hover,
&:focus,
&.active {
/* active class used for multiselect */
- border-color: $color-primary-element;
+ border-color: var(--color-primary-element);
outline: none;
}
&:active {
outline: none;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
+ color: var(--color-text-light);
}
}
&:disabled {
- background-color: nc-darken($color-main-background, 8%);
- color: rgba($color-main-text, 0.4);
+ background-color: var(--color-background-dark);
+ color: var(--color-text-maxcontrast);
cursor: default;
opacity: 0.5;
}
@@ -72,26 +80,28 @@ div[contenteditable=true],
}
&:invalid {
box-shadow: none !important;
- border-color: $color-error;
+ border-color: var(--color-error);
}
/* Primary action button, use sparingly */
&.primary {
- background-color: $color-primary-element;
- border: 1px solid $color-primary-text;
- color: $color-primary-text;
+ background-color: var(--color-primary-element);
+ border: 1px solid var(--color-primary-text);
+ color: var(--color-primary-text);
cursor: pointer;
&:not(:disabled) {
&:hover,
- &:focus {
- background-color: rgba($color-primary-element, .85);
+ &:focus,
+ &:active {
+ background-color: var(--color-primary-element-light)
}
&:active {
- background-color: rgba($color-primary-element, .7);
+ color: var(--color-primary-text-dark);
}
}
&:disabled {
- background-color: rgba($color-primary-element, .7);
- color: nc-lighten($color-main-text, 73%);
+ // opacity is already defined to .5 if disabled
+ background-color: var(--color-primary-element);
+ color: var(--color-primary-text-dark);
}
}
}
@@ -100,15 +110,15 @@ div[contenteditable=false] {
margin: 3px 3px 3px 0;
padding: 7px 6px;
font-size: 13px;
- background-color: $color-main-background;
- color: nc-lighten($color-main-text, 33%);
- border: 1px solid nc-darken($color-main-background, 14%);
+ background-color: var(--color-main-background);
+ color: var(--color-text-lighter);
+ border: 1px solid var(--color-background-darker);
outline: none;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
cursor: text;
- background-color: nc-darken($color-main-background, 8%);
- color: rgba($color-main-text, 0.4);
+ background-color: var(--color-background-dark);
+ color: var(--color-text-lighter);
cursor: default;
opacity: 0.5;
}
@@ -155,7 +165,7 @@ input[type='reset'] {
min-height: 34px;
cursor: pointer;
box-sizing: border-box;
- background-color: nc-darken($color-main-background, 3%);
+ background-color: var(--color-background-dark);
}
/* Buttons */
@@ -182,7 +192,7 @@ button, .button {
}
textarea, div[contenteditable=true] {
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
cursor: text;
font-family: inherit;
height: auto;
@@ -190,14 +200,14 @@ textarea, div[contenteditable=true] {
&:active,
&:hover,
&:focus {
- border-color: nc-darken($color-main-background, 14%) !important;
- background-color: $color-main-background !important;
+ border-color: var(--color-background-darker) !important;
+ background-color: var(--color-main-background) !important;
}
}
}
div[contenteditable=false] {
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
cursor: text;
font-family: inherit;
height: auto;
@@ -222,10 +232,10 @@ input {
+ .icon-confirm {
margin-left: -8px !important;
border-left-color: transparent !important;
- border-radius: 0 $border-radius $border-radius 0 !important;
+ border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
background-clip: padding-box;
/* Avoid background under border */
- background-color: $color-main-background !important;
+ background-color: var(--color-main-background) !important;
opacity: 1;
width: 34px;
padding: 7px 6px;
@@ -242,10 +252,10 @@ input {
&:active,
&:hover,
&:focus {
- border-color: $color-primary-element !important;
- border-radius: $border-radius !important;
+ border-color: var(--color-primary-element) !important;
+ border-radius: var(--border-radius) !important;
&:disabled {
- border-color: nc-darken($color-main-background, 14%) !important;
+ border-color: var(--color-background-darker) !important;
}
}
}
@@ -255,11 +265,11 @@ input {
&:focus {
&:invalid {
+ .icon-confirm {
- border-color: $color-error;
+ border-color: var(--color-error);
}
}
+ .icon-confirm {
- border-color: $color-primary-element !important;
+ border-color: var(--color-primary-element) !important;
border-left-color: transparent !important;
/* above previous input */
z-index: 2;
@@ -280,9 +290,11 @@ select,
}
/* Radio & Checkboxes */
+input, label {
+ --color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
+ --color-checkbox-radio-border: nc-darken($color-main-background, 47%);
+}
input {
- $color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
- $color-checkbox-radio-border: nc-darken($color-main-background, 47%);
&[type='checkbox'],
&[type='radio'] {
&.radio,
@@ -309,26 +321,26 @@ input {
border-radius: 50%;
margin: 3px;
margin-top: 1px;
- border: 1px solid $color-checkbox-radio-border;
+ border: 1px solid var(--color-checkbox-radio-border);
}
&:not(:disabled):not(:checked) + label:hover:before,
&:focus + label:before {
- border-color: $color-primary-element;
+ border-color: var(--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-element;
- border-color: $color-primary-element;
+ box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
+ background-color: var(--color-primary-element);
+ border-color: var(--color-primary-element);
}
&:disabled + label:before {
- border: 1px solid $color-checkbox-radio-border;
- background-color: $color-checkbox-radio-disabled !important; /* override other status */
+ border: 1px solid var(--color-checkbox-radio-border);
+ background-color: var(--color-checkbox-radio-disabled) !important; /* override other status */
}
&:checked:disabled + label:before {
- background-color: $color-checkbox-radio-disabled;
+ background-color: var(--color-checkbox-radio-disabled);
}
}
&.checkbox {
@@ -347,7 +359,7 @@ input {
}
}
- /* We do not use the nc-darken function as this si not supposed to be changed */
+ /* We do not use the nc-darken function as this is not supposed to be changed */
$color-checkbox-radio-white: #fff;
&.radio--white,
&.checkbox--white {
@@ -359,7 +371,7 @@ input {
border-color: $color-checkbox-radio-white;
}
&:checked + label:before {
- box-shadow: inset 0px 0px 0px 2px $color-main-background;
+ box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
background-color: darken($color-checkbox-radio-white, 14%);
border-color: darken($color-checkbox-radio-white, 14%);
}
@@ -368,7 +380,7 @@ input {
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
}
&:checked:disabled + label:before {
- box-shadow: inset 0px 0px 0px 2px $color-main-background;
+ box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
background-color: darken($color-checkbox-radio-white, 27%);
}
@@ -393,9 +405,9 @@ input {
/* Select2 overriding. Merged to core with vendor stylesheet */
.select2-drop {
margin-top: -2px;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
&.select2-drop-active {
- border-color: nc-darken($color-main-background, 14%);
+ border-color: var(--color-border-dark);
}
.avatar {
display: inline-block;
@@ -430,16 +442,16 @@ input {
padding: 12px;
background-color: transparent;
cursor: pointer;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
}
.select2-result {
&.select2-selected {
- background-color: nc-darken($color-main-background, 3%);
+ background-color: var(--color-background-dark);
}
}
.select2-highlighted {
- background-color: nc-darken($color-main-background, 3%);
- color: $color-main-text;
+ background-color: var(--color-background-dark);
+ color: var(--color-main-text);
}
}
}
@@ -456,11 +468,11 @@ input {
box-shadow: none;
white-space: nowrap;
text-overflow: ellipsis;
- background: $color-main-background;
- color: nc-lighten($color-main-text, 33%);
+ background: var(--color-main-background);
+ color: var(--color-text-lighter);
box-sizing: content-box;
- border-radius: $border-radius;
- border: 1px solid nc-darken($color-main-background, 14%);
+ border-radius: var(--border-radius);
+ border: 1px solid var(--color-border-dark);
margin: 0;
padding: 2px 0;
min-height: auto;
@@ -472,9 +484,9 @@ input {
&:active,
& {
background-image: none;
- background-color: $color-main-background;
- color: nc-lighten($color-main-text, 33%);
- border: 1px solid nc-darken($color-main-background, 14%);
+ background-color: var(--color-main-background);
+ color: var(--color-text-lighter);
+ border: 1px solid var(--color-border-dark);
}
.select2-search-choice-close {
display: none;
@@ -501,11 +513,11 @@ input {
box-shadow: none;
white-space: nowrap;
text-overflow: ellipsis;
- background: $color-main-background;
- color: nc-lighten($color-main-text, 33%);
+ background: var(--color-main-background);
+ color: var(--color-text-lighter);
box-sizing: content-box;
- border-radius: $border-radius;
- border: 1px solid nc-darken($color-main-background, 14%);
+ border-radius: var(--border-radius);
+ border: 1px solid var(--color-border-dark);
margin: 0;
padding: 2px 0;
padding-left: 6px;
@@ -514,15 +526,15 @@ input {
line-height: 20px;
padding-left: 5px;
background-image: none;
- background-color: nc-darken($color-main-background, 3%);
- border-color: nc-darken($color-main-background, 3%);
+ background-color: var(--color-background-dark);
+ border-color: var(--color-background-dark);
.select2-search-choice-close {
display: none;
}
&.select2-search-choice-focus,
&:hover {
- background-color: $color-border;
- border-color: $color-border;
+ background-color: var(--color-border);
+ border-color: var(--color-border);
}
}
.select2-arrow {
@@ -556,9 +568,9 @@ input {
line-height: 20px;
padding-left: 5px;
background-image: none;
- background-color: $color-main-background;
- color: nc-lighten($color-main-text, 33%);
- border: 1px solid nc-darken($color-main-background, 14%);
+ background-color: var(--color-main-background);
+ color: var(--color-text-lighter);
+ border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
.close {
@@ -574,7 +586,7 @@ input {
display: list-item;
background-color: transparent;
cursor: pointer;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
a {
white-space: nowrap;
overflow: hidden;
@@ -607,11 +619,11 @@ input {
}
}
&.highlight {
- color: $color-main-text;
+ color: var(--color-main-text);
}
&.active > a {
- background-color: nc-darken($color-main-background, 3%);
- color: $color-main-text;
+ background-color: var(--color-background-dark);
+ color: var(--color-main-text);
&::before {
visibility: visible;
}
@@ -628,7 +640,7 @@ input {
display: inline-block;
width: 160px;
position: relative;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
&.multiselect--active {
/* Opened: force display the input */
input.multiselect__input {
@@ -638,7 +650,7 @@ input {
}
&.multiselect--disabled,
&.multiselect--disabled .multiselect__single {
- background-color: nc-darken($color-main-background, 8%) !important;
+ background-color: var(--color-background-dark) !important;
}
.multiselect__tags {
/* space between tags and limit tag */
@@ -647,7 +659,7 @@ input {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
- border: 1px solid nc-darken($color-main-background, 14%);
+ border: 1px solid var(--color-border-dark);
cursor: pointer;
position: relative;
border-radius: 3px;
@@ -676,8 +688,8 @@ input {
line-height: 20px;
padding: 1px 5px;
background-image: none;
- color: nc-lighten($color-main-text, 33%);
- border: 1px solid nc-darken($color-main-background, 14%);
+ color: var(--color-text-lighter);
+ border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
border-radius: 3px;
@@ -709,7 +721,7 @@ input {
padding: 8px 10px;
flex: 0 0 100%;
z-index: 1; /* above input */
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
cursor: pointer;
}
/* displayed text if tag limit reached */
@@ -717,7 +729,7 @@ input {
.multiselect__limit {
flex: 0 0 auto;
line-height: 20px;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
display: inline-flex;
align-items: center;
opacity: .7;
@@ -745,8 +757,8 @@ input {
position: absolute;
width: 100%;
margin-top: -1px;
- border: 1px solid nc-darken($color-main-background, 14%);
- background: $color-main-background;
+ border: 1px solid var(--color-border-dark);
+ background: var(--color-main-background);
z-index: 50;
max-height: 250px;
overflow-y: auto;
@@ -779,7 +791,7 @@ input {
display: inline-flex;
align-items: center;
background-color: transparent !important;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
width: 100%;
/* selected checkmark icon */
&::before {
@@ -795,7 +807,7 @@ input {
visibility: hidden;
}
&.multiselect__option--disabled {
- background-color: nc-darken($color-main-background, 8%);
+ background-color: var(--color-background-dark);
opacity: .5;
}
/* add the prop tag-placeholder="create" to add the +
@@ -808,7 +820,7 @@ input {
}
}
&.multiselect__option--highlight {
- color: $color-main-text;
+ color: var(--color-main-text);
}
&:not(.multiselect__option--disabled):hover::before {
opacity: .3;
@@ -830,30 +842,30 @@ progress {
width: 100%;
padding: 0;
border: 0 none;
- background-color: nc-darken($color-main-background, 10%);
- border-radius: $border-radius;
+ background-color: var(--color-background-dark);
+ border-radius: var(--border-radius);
flex-basis: 100%;
height: 5px;
overflow: hidden;
&.warn {
&::-moz-progress-bar {
- background: $color-error;
+ background: var(--color-error);
}
&::-webkit-progress-value {
- background: $color-error;
+ background: var(--color-error);
}
}
&::-webkit-progress-bar {
background: transparent;
}
&::-moz-progress-bar {
- border-radius: $border-radius;
- background: $color-primary;
+ border-radius: var(--border-radius);
+ background: var(--color-primary);
transition: 250ms all ease-in-out;
}
&::-webkit-progress-value {
- border-radius: $border-radius;
- background: $color-primary;
+ border-radius: var(--border-radius);
+ background: var(--color-primary);
transition: 250ms all ease-in-out;
}
}
diff --git a/core/css/jquery-ui-fixes.scss b/core/css/jquery-ui-fixes.scss
index 0500e1b08c8..8ee7412af3c 100644
--- a/core/css/jquery-ui-fixes.scss
+++ b/core/css/jquery-ui-fixes.scss
@@ -1,20 +1,20 @@
/* Component containers
----------------------------------*/
.ui-widget-content {
- border: 1px solid nc-darken($color-main-background, 20%);
- background: $color-main-background none;
- color: $color-main-text;
+ border: 1px solid var(--color-border);
+ background: var(--color-main-background) none;
+ color: var(--color-main-text);
}
.ui-widget-content a {
- color: $color-main-text;
+ color: var(--color-main-text);
}
.ui-widget-header {
border: none;
- color: $color-main-text;
+ color: var(--color-main-text);
background-image: none;
}
.ui-widget-header a {
- color: $color-main-text;
+ color: var(--color-main-text);
}
/* Interaction states
@@ -22,8 +22,8 @@
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
- border: 1px solid nc-darken($color-main-background, 20%);
- background: $color-main-background none;
+ border: 1px solid var(--color-border);
+ background: var(--color-main-background) none;
font-weight: bold;
color: #555;
}
@@ -39,28 +39,28 @@
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border: 1px solid #ddd;
- background: $color-main-background none;
+ background: var(--color-main-background) none;
font-weight: bold;
- color: $color-main-text;
+ color: var(--color-main-text);
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
- color: $color-main-text;
+ color: var(--color-main-text);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
- border: 1px solid $color-primary;
- background: $color-main-background none;
+ border: 1px solid var(--color-primary);
+ background: var(--color-main-background) none;
font-weight: bold;
- color: $color-main-text;
+ color: var(--color-main-text);
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
- color: $color-main-text;
+ color: var(--color-main-text);
}
/* Interaction Cues
@@ -68,20 +68,20 @@
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
- border: 1px solid $color-main-background;
- background: $color-main-background none;
- color: nc-lighten($color-main-text, 30%);
+ border: 1px solid var(--color-main-background);
+ background: var(--color-main-background) none;
+ color: var(--color-text-lighter);
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
- color: nc-lighten($color-main-text, 30%);
+ color: var(--color-text-lighter);
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
- border: $color-error;
- background: $color-error none;
+ border: var(--color-error);
+ background: var(--color-error) none;
color: #ffffff;
}
.ui-state-error a,
@@ -154,10 +154,10 @@
.ui-state-hover,
.ui-state-active {
border: none;
- border-bottom: 1px solid $color-main-text;
- color: $color-main-text;
+ border-bottom: 1px solid var(--color-main-text);
+ color: var(--color-main-text);
a, a:link, a:hover, a:visited {
- color: $color-main-text;
+ color: var(--color-main-text);
}
}
.ui-state-active {
@@ -178,7 +178,7 @@
}
&.ui-widget-content {
- background: $color-main-background;
+ background: var(--color-main-background);
border-top: none;
}
@@ -191,13 +191,13 @@
.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;
background: inherit;
- color: $color-primary-element;
+ color: var(--color-primary-element);
}
}
.ui-button.primary {
- background-color: $color-primary;
- color: $color-primary-text;
- border: 1px solid $color-primary-text;
+ background-color: var(--color-primary);
+ color: var(--color-primary-text);
+ border: 1px solid var(--color-primary-text);
}
diff --git a/core/css/jquery.ocdialog.scss b/core/css/jquery.ocdialog.scss
index 24cb426b18d..991ef8495ea 100644
--- a/core/css/jquery.ocdialog.scss
+++ b/core/css/jquery.ocdialog.scss
@@ -1,8 +1,8 @@
.oc-dialog {
- background: $color-main-background;
- color: nc-darken($color-main-text, 20%);
- border-radius: $border-radius;
- box-shadow: 0 0 7px $color-box-shadow;
+ background: var(--color-main-background);
+ color: var(--color-text-light);
+ border-radius: var(--border-radius);
+ box-shadow: 0 0 7px var(--color-box-shadow);
padding: 15px;
z-index: 10000;
font-size: 100%;
@@ -16,7 +16,7 @@
overflow: auto;
}
.oc-dialog-title {
- background: $color-main-background;
+ background: var(--color-main-background);
margin-left: 12px;
}
.oc-dialog-buttonrow {
@@ -29,7 +29,7 @@
padding-bottom: 0;
box-sizing: border-box;
width: 100%;
- background-image: linear-gradient(rgba(255, 255, 255, 0.0), $color-main-background);
+ background-image: linear-gradient(rgba(255, 255, 255, 0.0), var(--color-main-background));
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index 239876223d5..f3b89ddb48c 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -53,7 +53,7 @@
#app-content {
width: 100% !important;
left: 0 !important;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
overflow-x: hidden !important;
z-index: 1000;
}
@@ -72,7 +72,7 @@
width: 44px;
height: 44px;
z-index: 149;
- background-color: rgba($color-main-background, .7);
+ background-color: var(--color-main-background-darker);
cursor: pointer;
opacity: .6;
}
@@ -149,7 +149,7 @@ table.multiselect thead {
}
&::after {
border: 10px solid transparent;
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
bottom: 0;
content: ' ';
height: 0;
diff --git a/core/css/multiselect.scss b/core/css/multiselect.scss
index 6c8bd118060..6df137cc0f9 100644
--- a/core/css/multiselect.scss
+++ b/core/css/multiselect.scss
@@ -17,10 +17,10 @@
*/
ul.multiselectoptions {
- background-color: $color-main-background;
- border: 1px solid $color-primary;
+ background-color: var(--color-main-background);
+ border: 1px solid var(--color-primary);
border-top: none;
- box-shadow: 0 1px 10px $color-box-shadow;
+ box-shadow: 0 1px 10px var(--color-box-shadow);
padding-top: 8px;
position: absolute;
max-height: 20em;
@@ -31,7 +31,7 @@ ul.multiselectoptions {
border-bottom-right-radius: 3px;
width: 100%;
/* do not cut off group names */
- box-shadow: 0 1px 10px $color-box-shadow;
+ box-shadow: 0 1px 10px var(--color-box-shadow);
}
&.up {
border-top-left-radius: 3px;
@@ -95,7 +95,7 @@ select.multiselect {
/* To make a select look like a multiselect until it's initialized */
div.multiselect {
&.active {
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
position: relative;
z-index: 150;
}
diff --git a/core/css/public.scss b/core/css/public.scss
index cc2c6bd0826..2ddca32c884 100644
--- a/core/css/public.scss
+++ b/core/css/public.scss
@@ -2,7 +2,7 @@
.header-right {
#header-primary-action a {
- color: $color-primary-text;
+ color: var(--color-primary-text);
}
.menutoggle,
@@ -10,7 +10,7 @@
padding: 14px;
padding-right: 40px;
background-position: right 15px center;
- color: $color-primary-text;
+ color: var(--color-primary-text);
cursor: pointer;
}
diff --git a/core/css/share.scss b/core/css/share.scss
index 68b601bcb65..07489cd55a3 100644
--- a/core/css/share.scss
+++ b/core/css/share.scss
@@ -59,9 +59,8 @@
margin-right: 0;
}
.error {
- color: $color-error;
- border-color: $color-error;
- box-shadow: 0 0 6px rgba($color-error, 0.35);
+ color: var(--color-error);
+ border-color: var(--color-error);
}
.mailView .icon-mail {
opacity: 0.5;
@@ -131,7 +130,7 @@
}
#link {
- border-top: 1px solid nc-darken($color-main-background, 14%);
+ border-top: 1px solid var(--color-border);
padding-top: 8px;
#showPassword img {
padding-left: 5px;
@@ -173,7 +172,7 @@
.notCreatable {
padding-left: 12px;
padding-top: 12px;
- color: rgba($color-main-text, .4);
+ color: var(--color-text-lighter);
}
.contactsmenu-popover {
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 57333689750..3affa3d7096 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -54,7 +54,7 @@ table, td, th {
a {
border: 0;
- color: $color-main-text;
+ color: var(--color-main-text);
text-decoration: none;
cursor: pointer;
* {
@@ -83,18 +83,18 @@ ul {
}
body {
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
font-weight: 400;
font-size: .8em;
line-height: 1.6em;
- font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
- color: $color-main-text;
+ font-family: var(--font-face);
+ color: var(--color-main-text);
height: auto;
}
#body-login {
text-align: center;
- background-color: $color-primary;
+ background-color: var(--color-primary);
background-image: url('../img/background.png?v=2');
background-position: 50% 50%;
background-repeat: no-repeat;
@@ -110,14 +110,14 @@ body {
width: 258px !important;
display: inline-block;
margin-bottom: 0 !important;
- background-color: rgba($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($color-main-background, 0.75);
+ color: var(--color-text-lighter);
}
.float-spinner {
@@ -138,8 +138,8 @@ body {
width: 100%;
z-index: 9000;
text-align: center;
- background-color: rgba($color-main-text, 0.5);
- color: $color-primary-text;
+ background-color: var(--color-background-darker);
+ color: var(--color-primary-text);
line-height: 125%;
font-size: 24px;
div {
@@ -150,10 +150,10 @@ body {
margin: 0px auto;
}
a {
- color: $color-primary-text;
- border-bottom: 2px dotted $color-main-background;
+ color: var(--color-primary-text);
+ border-bottom: 2px dotted var(--color-main-background);
&:hover, &:focus {
- color: nc-lighten($color-main-text, 86%);
+ color: var(--color-primary-text-dark);
}
}
}
@@ -170,8 +170,8 @@ body {
}
::-webkit-scrollbar-thumb {
- background: nc-darken($color-main-background, 14%);
- border-radius: $border-radius;
+ background: var(--color-background-darker);
+ border-radius: var(--border-radius);
}
/* Searchbox */
@@ -185,9 +185,9 @@ body {
padding-left: 25px;
padding-right: 20px;
background: transparent url('../img/actions/search-white.svg?v=1') no-repeat center center;
- color: $color-primary-text;
+ color: var(--color-primary-text);
border: 0;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
margin-top: 9px;
width: 0;
cursor: pointer;
@@ -196,11 +196,11 @@ body {
opacity: .6;
&:focus, &:active, &:valid {
background-position-x: 6px;
- color: $color-primary-text;
+ color: var(--color-primary-text);
width: 155px;
cursor: text;
- background-color: $color-primary !important;
- border: 1px solid rgba($color-primary-text, 0.5) !important;
+ background-color: var(--color-primary) !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($color-main-background, 0.95);
+ background-color: var(--color-main-background-light);
z-index: 60;
-webkit-user-select: none;
-moz-user-select: none;
@@ -303,7 +303,7 @@ body {
#emptycontent,
.emptycontent {
- color: nc-lighten($color-main-text, 53%);
+ color: var(--color-text-maxcontrast);
text-align: center;
margin-top: 30vh;
width: 100%;
@@ -344,16 +344,16 @@ body {
/* fix sticky footer */
p.info, form fieldset legend, #datadirContent label {
text-align: center;
- color: $color-primary-text;
+ color: var(--color-primary-text);
}
form {
fieldset .warning-info, input[type='checkbox'] + label {
text-align: center;
- color: $color-primary-text;
+ color: var(--color-primary-text);
}
.warning input[type='checkbox'] {
&:hover + label, &:focus + label, + label {
- color: $color-primary-text !important;
+ color: var(--color-primary-text) !important;
}
}
}
@@ -362,8 +362,8 @@ body {
margin: 0 0 20px;
}
a {
- color: $color-primary-text;
- border-bottom: 1px solid nc-darken($color-main-background, 27%);
+ color: var(--color-primary-text);
+ border-bottom: 1px solid var(--color-background-darker);
}
}
.infogroup {
@@ -488,7 +488,6 @@ body {
border-top: 0 !important;
border-bottom: 0 !important;
border-radius: 0 !important;
- box-shadow: 0 1px 0 rgba($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($color-main-text, 0.1) inset !important;
}
#body-login .groupbottom input[type=submit] {
@@ -522,16 +520,14 @@ label.infield {
user-select: none;
}
.errors {
- background: rgba($color-error, .35);
- border: 1px solid $color-error;
+ border: 1px solid var(--color-error);
list-style-indent: inside;
margin: 0 0 2em;
padding: 1em;
}
}
.success {
- background: rgba($color-success, .35);
- border: 1px solid $color-success;
+ border: 1px solid var(--color-success);
width: 35%;
margin: 30px auto;
padding: 1em;
@@ -542,7 +538,7 @@ label.infield {
box-sizing: border-box;
}
p.info a, #showAdvanced {
- color: $color-primary-text;
+ color: var(--color-primary-text);
}
#remember_login {
&:hover + label, &:focus + label {
@@ -616,7 +612,6 @@ label.infield {
}
/* Database selector */
-
#body-login {
form #selectDbType {
text-align: center;
@@ -629,27 +624,27 @@ label.infield {
position: static;
margin: 0 -3px 5px;
font-size: 12px;
- background: nc-darken($color-main-background, 3%);
- color: nc-lighten($color-main-text, 53%);
+ background: var(--color-background-dark);
+ color: var(--color-text-lighter);
cursor: pointer;
- border: 1px solid nc-darken($color-main-background, 14%);
+ border: 1px solid var(--color-border-dark);
span {
cursor: pointer;
padding: 10px 20px;
}
&.ui-state-hover, &.ui-state-active {
- color: $color-main-text;
- background-color: nc-darken($color-main-background, 8%);
+ color: var(--color-main-text);
+ background-color: var(--color-border);
}
}
}
.warning, .update, .error {
display: block;
padding: 10px;
- background-color: rgba($color-main-text, 0.3);
- color: $color-primary-text;
+ background-color: var(--color-background-darker);
+ color: var(--color-primary-text);
text-align: left;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
cursor: default;
}
.update {
@@ -675,23 +670,22 @@ label.infield {
#body-user .warning, #body-settings .warning {
margin-top: 8px;
padding: 5px;
- background: rgba($color-error, .15);
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
}
.warning {
legend, a {
- color: $color-primary-text !important;
+ color: var(--color-primary-text) !important;
font-weight: 600 !important;
}
}
.error {
a {
- color: $color-primary-text !important;
+ color: var(--color-primary-text) !important;
font-weight: 600 !important;
&.button {
- color: nc-lighten($color-main-text, 33%) !important;
+ color: var(--color-text-lighter) !important;
display: inline-block;
text-align: center;
}
@@ -711,7 +705,7 @@ label.infield {
}
.warning-input {
- border-color: $color-error !important;
+ border-color: var(--color-error) !important;
}
/* Fixes for log in page, TODO should be removed some time */
@@ -807,7 +801,7 @@ label.infield {
#forgot-password {
padding: 11px;
float: right;
- color: $color-primary-text;
+ color: var(--color-primary-text);
}
.wrapper {
min-height: 100%;
@@ -847,7 +841,7 @@ td.avatar {
margin: 0 auto;
max-width: 60%;
z-index: 8000;
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
border: 0;
padding: 1px 8px;
display: none;
@@ -922,7 +916,7 @@ tr {
tbody tr {
&:hover, &:focus, &:active {
- background-color: nc-darken($color-main-background, 3%);
+ background-color: var(--color-background-dark);
}
}
@@ -958,7 +952,7 @@ code {
margin-top: 10px;
padding: 4px 8px;
width: auto;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
border: none;
.ui-state-default,
@@ -971,8 +965,8 @@ code {
padding: 7px;
font-size: 13px;
border: none;
- background-color: $color-main-background;
- color: $color-main-text;
+ background-color: var(--color-main-background);
+ color: var(--color-main-text);
.ui-datepicker-title {
line-height: 1;
@@ -995,7 +989,7 @@ code {
.ui-datepicker-calendar {
th {
font-weight: normal;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
opacity: .8;
width: 26px;
padding: 2px;
@@ -1005,20 +999,20 @@ code {
}
td {
&.ui-datepicker-today a:not(.ui-state-hover) {
- background-color: nc-lighten($color-main-text, 86%);
+ background-color: var(--color-background-darker);
}
&.ui-datepicker-current-day a.ui-state-active,
.ui-state-hover,
.ui-state-focus {
- background-color: $color-primary;
- color: $color-primary-text;
+ background-color: var(--color-primary);
+ color: var(--color-primary-text);
font-weight: bold;
}
&.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
.ui-priority-secondary:not(.ui-state-hover) {
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
opacity: .8;
}
}
@@ -1026,8 +1020,8 @@ code {
}
.ui-datepicker-prev, .ui-datepicker-next {
- border: nc-darken($color-main-background, 14%);
- background: $color-main-background;
+ border: var(--color-border-dark);
+ background: var(--color-main-background);
}
@@ -1035,7 +1029,7 @@ code {
.ui-widget.ui-timepicker {
margin-top: 10px !important;
width: auto !important;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
.ui-widget-content {
border: none !important;
@@ -1051,8 +1045,8 @@ code {
padding: 7px;
font-size: 13px;
border: none;
- background-color: $color-main-background;
- color: $color-main-text;
+ background-color: var(--color-main-background);
+ color: var(--color-main-text);
.ui-timepicker-title {
line-height: 1;
@@ -1066,7 +1060,7 @@ code {
.ui-timepicker-table {
th {
font-weight: normal;
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
opacity: .8;
&.periods {
padding: 0;
@@ -1082,17 +1076,17 @@ code {
&.ui-timepicker-minute-cell a.ui-state-active,
.ui-state-hover,
.ui-state-focus {
- background-color: $color-primary;
- color: $color-primary-text;
+ background-color: var(--color-primary);
+ color: var(--color-primary-text);
font-weight: bold;
}
&.ui-timepicker-minutes:not(.ui-state-hover) {
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
}
&.ui-timepicker-hours {
- border-right: 1px solid $color-border;
+ border-right: 1px solid var(--color-border);
}
}
}
@@ -1118,7 +1112,7 @@ code {
border-radius: 50%;
text-align: center;
font-weight: normal;
- color: $color-main-text;
+ color: var(--color-main-text);
display: block;
line-height: 18px;
width: 18px;
@@ -1163,14 +1157,14 @@ code {
width: 100%;
}
.emptycontent {
- color: nc-lighten($color-main-text, 53%);
+ color: var(--color-text-details);
text-align: center;
margin-top: 80px;
width: 100%;
display: none;
}
.filelist {
- background-color: $color-main-background;
+ background-color: var(--color-main-background);
width: 100%;
}
#filestable.filelist {
@@ -1181,7 +1175,7 @@ code {
.filelist {
td {
padding: 14px;
- border-bottom: 1px solid $color-border;
+ border-bottom: 1px solid var(--color-border);
}
tr:last-child td {
border-bottom: none;
@@ -1270,7 +1264,7 @@ span.ui-icon {
position: relative;
align-items: center;
padding: 3px 3px 3px 10px;
- border-bottom: 1px solid $color-border;
+ border-bottom: 1px solid var(--color-border);
:last-of-type {
border-bottom: none;
@@ -1348,7 +1342,7 @@ span.ui-icon {
}
.scrollarea {
overflow: auto;
- border: 1px solid nc-darken($color-main-background, 14%);
+ border: 1px solid var(--color-background-darker);
width: 100%;
height: 240px;
}
@@ -1360,7 +1354,7 @@ span.ui-icon {
}
}
.taglist li {
- background: nc-darken($color-main-background, 3%);
+ background: var(--color-background-dark);
padding: .3em .8em;
white-space: nowrap;
overflow: hidden;
@@ -1368,7 +1362,7 @@ span.ui-icon {
-webkit-transition: background-color 500ms;
transition: background-color 500ms;
&:hover, &:active {
- background: nc-darken($color-main-background, 8%);
+ background: var(--color-background-darker);
}
}
.addinput {
@@ -1483,12 +1477,12 @@ div.crumb {
position: relative;
text-align: center;
.info {
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
text-align: center;
margin: 0 auto;
padding: 20px 0;
a {
- color: nc-lighten($color-main-text, 33%);
+ color: var(--color-text-lighter);
font-weight: 600;
padding: 13px;
margin: -13px;
diff --git a/core/css/tooltip.scss b/core/css/tooltip.scss
index fe9a96cf314..ad433185f1c 100644
--- a/core/css/tooltip.scss
+++ b/core/css/tooltip.scss
@@ -34,7 +34,7 @@
/* default to top */
margin-top: -3px;
padding: 10px 0;
- filter: drop-shadow(0 1px 10px $color-box-shadow);
+ filter: drop-shadow(0 1px 10px var(--color-box-shadow));
&.in,
&.tooltip[aria-hidden='false'] {
visibility: visible;
@@ -60,7 +60,7 @@
left: 0;
margin-top: -10px;
border-width: 10px 10px 10px 0;
- border-right-color: $color-main-background;
+ border-right-color: var(--color-main-background);
}
}
&.left,
@@ -72,7 +72,7 @@
right: 0;
margin-top: -10px;
border-width: 10px 0 10px 10px;
- border-left-color: $color-main-background;
+ border-left-color: var(--color-main-background);
}
}
/* TOP */
@@ -83,7 +83,7 @@
.tooltip-arrow {
bottom: 0;
border-width: 10px 10px 0;
- border-top-color: $color-main-background;
+ border-top-color: var(--color-main-background);
}
}
&.top-left .tooltip-arrow {
@@ -102,7 +102,7 @@
.tooltip-arrow {
top: 0;
border-width: 0 10px 10px;
- border-bottom-color: $color-main-background;
+ border-bottom-color: var(--color-main-background);
}
}
&[x-placement^='bottom'] .tooltip-arrow,
@@ -123,10 +123,10 @@
.tooltip-inner {
max-width: 350px;
padding: 5px 8px;
- background-color: $color-main-background;
- color: $color-main-text;
+ background-color: var(--color-main-background);
+ color: var(--color-main-text);
text-align: center;
- border-radius: $border-radius;
+ border-radius: var(--border-radius);
}
.tooltip-arrow {
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 4e2c1c396cb..43e3c6b97bb 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -1,30 +1,52 @@
-$color-main-text: #000000;
-$color-main-background: #ffffff;
+// SCSS darken/lighten function override
+@function nc-darken($color, $value) {
+ @return darken($color, $value);
+}
+
+@function nc-lighten($color, $value) {
+ @return lighten($color, $value);
+}
+
+// SCSS variables
+// DEPRECATED, please use CSS4 vars
+$color-main-text: #000 !default;
+$color-main-background: #fff !default;
+
+// used for different active/disabled states
+$color-background-dark: nc-darken($color-main-background, 7%) !default;
+$color-background-darker: nc-darken($color-main-background, 14%) !default;
+
$color-primary: #0082c9;
$color-primary-text: #ffffff;
+// 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-light: lighten($color-primary-element, 15%) !default;
+
$color-error: #e9322d;
$color-warning: #eca700;
$color-success: #46ba61;
-$color-primary-element: $color-primary;
// rgb(118, 118, 118) / #767676
// min. color contrast for normal text on white background according to WCAG AA
// (Works as well: color: #000; opacity: 0.57;)
-$color-text-details: #767676;
+$color-text-maxcontrast: nc-lighten($color-main-text, 46.2%) !default;
+$color-text-light: nc-lighten($color-main-text, 15%) !default;
+$color-text-lighter: nc-lighten($color-main-text, 30%) !default;
-@function nc-darken($color, $value) {
- @return darken($color, $value);
-}
+$image-logo: url('../img/logo.svg?v=1');
+$image-login-background: url('../img/background.png?v=2');
-@function nc-lighten($color, $value) {
- @return lighten($color, $value);
-}
+$color-loading-light: #ccc !default;
+$color-loading-dark: #777 !default;
+
+$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75) !default;
-$image-logo: '../img/logo.svg?v=1';
-$image-login-background: '../img/background.png?v=2';
+// light border like file table or app-content list
+$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;
-$color-loading: #969696;
-$color-loading-dark: #bbbbbb;
-$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
-$color-border: nc-darken($color-main-background, 8%);
-$border-radius: 3px;
+$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-09 15:29:46 +0000