summaryrefslogtreecommitdiffstats
path: root/core/css/apps.scss
diff options
context:
space:
mode:
Diffstat (limited to 'core/css/apps.scss')
-rw-r--r--core/css/apps.scss79
1 files changed, 39 insertions, 40 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 91805fe16b2..e9ed9f470cd 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -55,13 +55,13 @@ em {
height: 100%;
float: left;
box-sizing: border-box;
- background-color: #fff;
+ background-color: $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 #eee;
+ border-right: 1px solid nc-darken($color-main-background, 8%);
display: flex;
flex-direction: column;
> ul {
@@ -78,7 +78,7 @@ em {
&,
> a {
opacity: 1;
- box-shadow: inset 2px 0 #0082c9;
+ box-shadow: inset 2px 0 $color-primary;
}
}
}
@@ -115,7 +115,7 @@ em {
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
- color: #000;
+ color: $color-main-text;
opacity: .57;
}
li > a:first-child img {
@@ -166,9 +166,9 @@ em {
-ms-transform: rotate(0);
transform: rotate(0);
}
- background-image: linear-gradient(top, rgb(238, 238, 238) 0%, rgb(245, 245, 245) 100%);
- background-image: -webkit-linear-gradient(top, rgb(238, 238, 238) 0%, rgb(245, 245, 245) 100%);
- background-image: -ms-linear-gradient(top, rgb(238, 238, 238) 0%, rgb(245, 245, 245) 100%);
+ background-image: linear-gradient(top, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 100%);
+ background-image: -webkit-linear-gradient(top, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 100%);
+ background-image: -ms-linear-gradient(top, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 100%);
}
}
> {
@@ -190,7 +190,7 @@ em {
> ul .collapsible.open {
&:hover,
&:focus {
- box-shadow: inset 0 0 3px #ddd;
+ box-shadow: inset 0 0 3px $color-box-shadow;
}
ul {
display: block;
@@ -248,10 +248,10 @@ em {
padding-bottom: 40px;
}
.error {
- color: #dd1144;
+ color: $color-error;
}
.app-navigation-separator {
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid nc-lighten($color-main-text, 86%);
}
/**
@@ -324,7 +324,7 @@ em {
margin-right: 0;
height: 38px;
float: left;
- border: 1px solid rgba(190, 190, 190, 0.9);
+ border: 1px solid rgba(nc-lighten($color-main-text, 73%), 0.9);
}
button,
input[type='submit'] {
@@ -377,8 +377,8 @@ em {
width: 27%;
min-width: 300px;
display: block;
- background: #fff;
- border-left: 1px solid #eee;
+ background: $color-main-background;
+ border-left: 1px solid nc-darken($color-main-background, 8%);
-webkit-transition: margin-right 300ms;
transition: margin-right 300ms;
overflow-x: hidden;
@@ -408,11 +408,11 @@ em {
#app-settings-content {
display: none;
padding: 10px;
- background-color: #fff;
+ background-color: $color-main-background;
/* restrict height of settings and make scrollable */
max-height: 300px;
overflow-y: auto;
- border-right: 1px solid #eee;
+ border-right: 1px solid nc-darken($color-main-background, 8%);
width: 250px;
box-sizing: border-box;
@@ -423,12 +423,12 @@ em {
.info-text {
padding: 5px 0 7px 22px;
- color: #999;
+ color: rgba($color-main-text, .4);
}
}
#app-settings-header {
- border-right: 1px solid #eee;
+ border-right: 1px solid nc-darken($color-main-background, 8%);
width: 250px;
box-sizing: border-box;
}
@@ -439,7 +439,7 @@ em {
width: 100%;
padding: 0;
margin: 0;
- background-color: #fff;
+ background-color: $color-main-background;
background-image: url('../img/actions/settings.svg?v=1');
background-position: 14px center;
background-repeat: no-repeat;
@@ -451,11 +451,11 @@ em {
font-weight: normal;
&:hover,
&:focus {
- background-color: #fff;
+ background-color: $color-main-background;
}
&.opened {
&:hover, &:focus {
- background-color: #fff;
+ background-color: $color-main-background;
}
}
}
@@ -464,7 +464,7 @@ em {
.section {
display: block;
padding: 30px;
- color: #555;
+ color: nc-lighten($color-main-text, 33%);
margin-bottom: 24px;
&.hidden {
display: none !important;
@@ -499,10 +499,10 @@ em {
/* DROPDOWN ----------------------------------------------------------------- */
.dropdown {
- background: #eee;
+ background: nc-darken($color-main-background, 8%);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
- box-shadow: 0 1px 1px #777;
+ box-shadow: 0 1px 1px $color-box-shadow;
display: block;
margin-right: 0;
position: absolute;
@@ -520,25 +520,25 @@ em {
float: left;
padding: 5px;
cursor: pointer;
- color: #888;
+ color: nc-lighten($color-main-text, 33%);
margin-bottom: 1px;
a {
- color: #888;
+ color: nc-lighten($color-main-text, 33%);
margin-bottom: 1px;
}
&.selected {
font-weight: 600;
- border-bottom: 1px solid #333;
+ border-bottom: 1px solid nc-lighten($color-main-text, 20%);
}
&:hover {
- border-bottom: 1px solid #333;
+ border-bottom: 1px solid nc-lighten($color-main-text, 20%);
}
&.selected, &:hover {
margin-bottom: 0px;
- color: #000;
+ color: $color-main-text;
a {
margin-bottom: 0px;
- color: #000;
+ color: $color-main-text;
}
}
}
@@ -557,7 +557,7 @@ em {
.popovermenu, .popovermenu:after,
#app-navigation .app-navigation-entry-menu,
#app-navigation .app-navigation-entry-menu:after {
- border: 1px solid #eee;
+ border: 1px solid nc-darken($color-main-background, 8%);
}
}
@@ -565,18 +565,18 @@ em {
.app-navigation-entry-menu,
.popovermenu {
position: absolute;
- background-color: #fff;
- color: #333;
+ background-color: $color-main-background;
+ color: nc-lighten($color-main-text, 20%);
border-radius: 3px;
z-index: 110;
margin: 5px;
margin-top: -5px;
right: 0;
- -webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
- -moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
- -ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
- -o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
- filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+ -webkit-filter: drop-shadow(0 0 5px $color-box-shadow);
+ -moz-filter: drop-shadow(0 0 5px $color-box-shadow);
+ -ms-filter: drop-shadow(0 0 5px $color-box-shadow);
+ -o-filter: drop-shadow(0 0 5px $color-box-shadow);
+ filter: drop-shadow(0 0 5px $color-box-shadow);
display: none;
&:after {
@@ -591,8 +591,7 @@ em {
width: 0;
position: absolute;
pointer-events: none;
- border-color: rgba(238, 238, 238, 0);
- border-bottom-color: #fff;
+ border-bottom-color: $color-main-background;
border-width: 10px;
}
/* Center the popover */
@@ -644,7 +643,7 @@ em {
margin: 0;
font-weight: inherit;
box-shadow: none;
- color: #333 !important; /* Overwrite app-navigation li */
+ color: nc-lighten($color-main-text, 20%) !important; /* Overwrite app-navigation li */
/* prevent .action class to break the design */
&.action {
padding: inherit !important;
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-22 08:16:42 +0000