Replace old color occurences with calculations
Signed-off-by: Julius Haertl <jus@bitgrid.net>
This commit is contained in:
Julius Haertl
Julius Härtl
parent
322ecdca63
commit
7381a2ec5c
|
|
@ -61,7 +61,7 @@ em {
|
|||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border-right: 1px solid $color-main-old-eeeeee;
|
||||
border-right: 1px solid nc-darken($color-main-background, 8%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> ul {
|
||||
|
|
@ -166,9 +166,9 @@ em {
|
|||
-ms-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
background-image: linear-gradient(top, $color-main-old-eeeeee 0%, $color-main-old-f8f8f8 100%);
|
||||
background-image: -webkit-linear-gradient(top, $color-main-old-eeeeee 0%, $color-main-old-f8f8f8 100%);
|
||||
background-image: -ms-linear-gradient(top, $color-main-old-eeeeee 0%, $color-main-old-f8f8f8 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%);
|
||||
}
|
||||
}
|
||||
> {
|
||||
|
|
@ -251,7 +251,7 @@ em {
|
|||
color: $color-error;
|
||||
}
|
||||
.app-navigation-separator {
|
||||
border-bottom: 1px solid $color-main-old-dddddd;
|
||||
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($color-main-old-bbbbbb, 0.9);
|
||||
border: 1px solid rgba(nc-lighten($color-main-text, 73%), 0.9);
|
||||
}
|
||||
button,
|
||||
input[type='submit'] {
|
||||
|
|
@ -378,7 +378,7 @@ em {
|
|||
min-width: 300px;
|
||||
display: block;
|
||||
background: $color-main-background;
|
||||
border-left: 1px solid $color-main-old-eeeeee;
|
||||
border-left: 1px solid nc-darken($color-main-background, 8%);
|
||||
-webkit-transition: margin-right 300ms;
|
||||
transition: margin-right 300ms;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -412,7 +412,7 @@ em {
|
|||
/* restrict height of settings and make scrollable */
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid $color-main-old-eeeeee;
|
||||
border-right: 1px solid nc-darken($color-main-background, 8%);
|
||||
width: 250px;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
|
@ -428,7 +428,7 @@ em {
|
|||
}
|
||||
|
||||
#app-settings-header {
|
||||
border-right: 1px solid $color-main-old-eeeeee;
|
||||
border-right: 1px solid nc-darken($color-main-background, 8%);
|
||||
width: 250px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -464,7 +464,7 @@ em {
|
|||
.section {
|
||||
display: block;
|
||||
padding: 30px;
|
||||
color: $color-main-old-555555;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
margin-bottom: 24px;
|
||||
&.hidden {
|
||||
display: none !important;
|
||||
|
|
@ -499,7 +499,7 @@ em {
|
|||
|
||||
/* DROPDOWN ----------------------------------------------------------------- */
|
||||
.dropdown {
|
||||
background: $color-main-old-eeeeee;
|
||||
background: nc-darken($color-main-background, 8%);
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
box-shadow: 0 1px 1px $color-box-shadow;
|
||||
|
|
@ -520,18 +520,18 @@ em {
|
|||
float: left;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
color: $color-main-old-555555;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
margin-bottom: 1px;
|
||||
a {
|
||||
color: $color-main-old-555555;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
&.selected {
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid $color-main-old-333333;
|
||||
border-bottom: 1px solid nc-lighten($color-main-text, 20%);
|
||||
}
|
||||
&:hover {
|
||||
border-bottom: 1px solid $color-main-old-333333;
|
||||
border-bottom: 1px solid nc-lighten($color-main-text, 20%);
|
||||
}
|
||||
&.selected, &:hover {
|
||||
margin-bottom: 0px;
|
||||
|
|
@ -557,7 +557,7 @@ em {
|
|||
.popovermenu, .popovermenu:after,
|
||||
#app-navigation .app-navigation-entry-menu,
|
||||
#app-navigation .app-navigation-entry-menu:after {
|
||||
border: 1px solid $color-main-old-eeeeee;
|
||||
border: 1px solid nc-darken($color-main-background, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -566,7 +566,7 @@ em {
|
|||
.popovermenu {
|
||||
position: absolute;
|
||||
background-color: $color-main-background;
|
||||
color: $color-main-old-333333;
|
||||
color: nc-lighten($color-main-text, 20%);
|
||||
border-radius: 3px;
|
||||
z-index: 110;
|
||||
margin: 5px;
|
||||
|
|
@ -643,7 +643,7 @@ em {
|
|||
margin: 0;
|
||||
font-weight: inherit;
|
||||
box-shadow: none;
|
||||
color: $color-main-old-333333 !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;
|
||||
|
|
|
|||
|
|
@ -40,8 +40,8 @@ textarea,
|
|||
padding: 7px 6px;
|
||||
font-size: 13px;
|
||||
background-color: $color-main-background;
|
||||
color: $color-main-old-333333;
|
||||
border: 1px solid $color-main-old-dddddd;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
border: 1px solid nc-lighten($color-main-text, 86%);
|
||||
outline: none;
|
||||
border-radius: 3px;
|
||||
&:not(:disabled):not(.primary) {
|
||||
|
|
@ -59,7 +59,7 @@ textarea,
|
|||
}
|
||||
}
|
||||
&:disabled {
|
||||
background-color: $color-main-old-eeeeee;
|
||||
background-color: nc-darken($color-main-background, 8%);
|
||||
color: rgba($color-main-text, 0.4);
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
|
|
@ -81,7 +81,7 @@ textarea,
|
|||
}
|
||||
&:disabled {
|
||||
background-color: rgba($color-primary, .7);
|
||||
color: $color-main-old-bbbbbb;
|
||||
color: nc-lighten($color-main-text, 73%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -128,7 +128,7 @@ input[type='reset'] {
|
|||
min-height: 34px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
background-color: $color-main-old-f8f8f8;
|
||||
background-color: nc-darken($color-main-background, 3%);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
|
@ -155,7 +155,7 @@ button, .button {
|
|||
}
|
||||
|
||||
textarea {
|
||||
color: $color-main-old-555555;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
cursor: text;
|
||||
font-family: inherit;
|
||||
height: auto;
|
||||
|
|
@ -163,7 +163,7 @@ textarea {
|
|||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $color-main-old-dddddd !important;
|
||||
border-color: nc-lighten($color-main-text, 86%) !important;
|
||||
background-color: $color-main-background !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -186,7 +186,7 @@ button img,
|
|||
cursor: pointer;
|
||||
}
|
||||
#quota {
|
||||
color: $color-main-old-555555;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
}
|
||||
select,
|
||||
.button.multiselect {
|
||||
|
|
@ -221,7 +221,7 @@ input {
|
|||
border-radius: 50%;
|
||||
margin: 3px;
|
||||
margin-top: 1px;
|
||||
border: 1px solid $color-main-old-888888;
|
||||
border: 1px solid nc-lighten($color-main-text, 53%);
|
||||
}
|
||||
&:not(:disabled):not(:checked) + label:hover:before,
|
||||
&:focus + label:before {
|
||||
|
|
@ -236,11 +236,11 @@ input {
|
|||
border-color: $color-primary
|
||||
}
|
||||
&:disabled + label:before {
|
||||
border: 1px solid $color-main-old-888888;
|
||||
background-color: $color-main-old-bbbbbb !important; /* override other status */
|
||||
border: 1px solid nc-lighten($color-main-text, 53%);
|
||||
background-color: nc-lighten($color-main-text, 73%) !important; /* override other status */
|
||||
}
|
||||
&:checked:disabled + label:before {
|
||||
background-color: $color-main-old-bbbbbb;
|
||||
background-color: nc-lighten($color-main-text, 73%);
|
||||
}
|
||||
}
|
||||
&.checkbox {
|
||||
|
|
@ -261,7 +261,7 @@ input {
|
|||
&.radio--white,
|
||||
&.checkbox--white {
|
||||
+ label:before {
|
||||
border-color: $color-main-old-dddddd;
|
||||
border-color: nc-lighten($color-main-text, 86%);
|
||||
}
|
||||
&:not(:disabled):not(:checked) + label:hover:before,
|
||||
&:focus + label:before {
|
||||
|
|
@ -269,17 +269,17 @@ input {
|
|||
}
|
||||
&:checked + label:before {
|
||||
box-shadow: inset 0px 0px 0px 2px $color-main-text;
|
||||
background-color: $color-main-old-eeeeee;
|
||||
border-color: $color-main-old-eeeeee
|
||||
background-color: nc-darken($color-main-background, 8%);
|
||||
border-color: nc-darken($color-main-background, 8%)
|
||||
}
|
||||
&:disabled + label:before {
|
||||
background-color: $color-main-old-555555 !important; /* override other status */
|
||||
background-color: nc-lighten($color-main-text, 33%) !important; /* override other status */
|
||||
border-color: rgba($color-main-text, 0.4) !important; /* override other status */
|
||||
}
|
||||
&:checked:disabled + label:before {
|
||||
box-shadow: inset 0px 0px 0px 2px $color-main-text;
|
||||
border-color: $color-main-old-555555;
|
||||
background-color: $color-main-old-333333;
|
||||
border-color: nc-lighten($color-main-text, 33%);
|
||||
background-color: nc-lighten($color-main-text, 33%);
|
||||
}
|
||||
}
|
||||
&.checkbox--white {
|
||||
|
|
@ -293,10 +293,10 @@ input {
|
|||
background-image: url('../img/actions/checkbox-mixed-white.svg');
|
||||
}
|
||||
&:checked:disabled + label:after {
|
||||
border-color: $color-main-old-bbbbbb;
|
||||
border-color: nc-lighten($color-main-text, 73%);
|
||||
}
|
||||
&:indeterminate:disabled + label:after {
|
||||
background-color: $color-main-old-bbbbbb;
|
||||
background-color: nc-lighten($color-main-text, 73%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -306,7 +306,7 @@ input {
|
|||
.select2-drop {
|
||||
margin-top: -2px;
|
||||
&.select2-drop-active {
|
||||
border-color: $color-main-old-dddddd;
|
||||
border-color: nc-lighten($color-main-text, 86%);
|
||||
}
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
|
|
@ -341,14 +341,14 @@ input {
|
|||
padding: 12px;
|
||||
background-color: $color-main-background;
|
||||
cursor: pointer;
|
||||
color: $color-main-old-333333;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
}
|
||||
.select2-result {
|
||||
&.select2-selected {
|
||||
background-color: $color-main-old-f8f8f8;
|
||||
background-color: nc-darken($color-main-background, 3%);
|
||||
}
|
||||
&.select2-highlighted {
|
||||
background-color: $color-main-old-f8f8f8;
|
||||
background-color: nc-darken($color-main-background, 3%);
|
||||
color: $color-main-text;
|
||||
}
|
||||
}
|
||||
|
|
@ -368,10 +368,10 @@ input {
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background: $color-main-background;
|
||||
color: $color-main-old-555555;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
box-sizing: content-box;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $color-main-old-dddddd;
|
||||
border: 1px solid nc-lighten($color-main-text, 86%);
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
min-height: auto;
|
||||
|
|
@ -384,8 +384,8 @@ input {
|
|||
& {
|
||||
background-image: none;
|
||||
background-color: $color-main-background;
|
||||
color: $color-main-old-333333;
|
||||
border: 1px solid $color-main-old-dddddd;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
border: 1px solid nc-lighten($color-main-text, 86%);
|
||||
}
|
||||
.select2-search-choice-close {
|
||||
display: none;
|
||||
|
|
@ -410,10 +410,10 @@ input {
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background: $color-main-background;
|
||||
color: $color-main-old-555555;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
box-sizing: content-box;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $color-main-old-dddddd;
|
||||
border: 1px solid nc-lighten($color-main-text, 86%);
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
padding-left: 6px;
|
||||
|
|
@ -422,15 +422,15 @@ input {
|
|||
line-height: 20px;
|
||||
padding-left: 5px;
|
||||
background-image: none;
|
||||
background-color: $color-main-old-f8f8f8;
|
||||
border-color: $color-main-old-f8f8f8;
|
||||
background-color: nc-darken($color-main-background, 3%);
|
||||
border-color: nc-darken($color-main-background, 3%);
|
||||
.select2-search-choice-close {
|
||||
display: none;
|
||||
}
|
||||
&.select2-search-choice-focus,
|
||||
&:hover {
|
||||
background-color: $color-main-old-eeeeee;
|
||||
border-color: $color-main-old-eeeeee;
|
||||
background-color: nc-darken($color-main-background, 8%);
|
||||
border-color: nc-darken($color-main-background, 8%);
|
||||
}
|
||||
}
|
||||
.select2-arrow {
|
||||
|
|
@ -478,7 +478,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: $color-main-old-f8f8f8;
|
||||
background: nc-darken($color-main-background, 3%);
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ a {
|
|||
}
|
||||
|
||||
#link {
|
||||
border-top: 1px solid $color-main-old-dddddd;
|
||||
border-top: 1px solid nc-lighten($color-main-text, 86%);
|
||||
padding-top: 8px;
|
||||
#showPassword img {
|
||||
padding-left: 5px;
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ body {
|
|||
color: $color-primary-text;
|
||||
border-bottom: 2px dotted $color-main-background;
|
||||
&:hover, &:focus {
|
||||
color: $color-main-old-dddddd;
|
||||
color: nc-lighten($color-main-text, 86%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -164,7 +164,7 @@ body {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $color-main-old-dddddd;
|
||||
background: nc-lighten($color-main-text, 86%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -298,7 +298,7 @@ body {
|
|||
}
|
||||
|
||||
#emptycontent, .emptycontent {
|
||||
color: $color-main-old-888888;
|
||||
color: nc-darken($color-main-background, 8%);
|
||||
text-align: center;
|
||||
margin-top: 30vh;
|
||||
width: 100%;
|
||||
|
|
@ -355,7 +355,7 @@ body {
|
|||
}
|
||||
a {
|
||||
color: $color-primary-text;
|
||||
border-bottom: 1px solid $color-main-old-bbbbbb;
|
||||
border-bottom: 1px solid nc-lighten($color-main-text, 73%);
|
||||
}
|
||||
}
|
||||
.infogroup {
|
||||
|
|
@ -620,17 +620,17 @@ label.infield {
|
|||
position: static;
|
||||
margin: 0 -3px 5px;
|
||||
font-size: 12px;
|
||||
background: $color-main-old-f8f8f8;
|
||||
color: $color-main-old-888888;
|
||||
background: nc-darken($color-main-background, 3%);
|
||||
color: nc-lighten($color-main-text, 53%);
|
||||
cursor: pointer;
|
||||
border: 1px solid $color-main-old-dddddd;
|
||||
border: 1px solid nc-lighten($color-main-text, 86%);
|
||||
span {
|
||||
cursor: pointer;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
&.ui-state-hover, &.ui-state-active {
|
||||
color: $color-main-text;
|
||||
background-color: $color-main-old-eeeeee;
|
||||
background-color: nc-darken($color-main-background, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -682,7 +682,7 @@ label.infield {
|
|||
color: $color-primary-text !important;
|
||||
font-weight: 600 !important;
|
||||
&.button {
|
||||
color: $color-main-old-555555 !important;
|
||||
color: nc-lighten($color-main-text, 33%) !important;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -899,7 +899,7 @@ tr {
|
|||
|
||||
tbody tr {
|
||||
&:hover, &:focus, &:active {
|
||||
background-color: $color-main-old-f8f8f8;
|
||||
background-color: nc-darken($color-main-background, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -956,7 +956,7 @@ code {
|
|||
}
|
||||
|
||||
.ui-datepicker-prev, .ui-datepicker-next {
|
||||
border: $color-main-old-dddddd;
|
||||
border: nc-lighten($color-main-text, 86%);
|
||||
background: $color-main-background;
|
||||
}
|
||||
|
||||
|
|
@ -995,7 +995,7 @@ code {
|
|||
width: 100%;
|
||||
}
|
||||
.emptycontent {
|
||||
color: $color-main-old-888888;
|
||||
color: nc-lighten($color-main-text, 53%);
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
width: 100%;
|
||||
|
|
@ -1013,7 +1013,7 @@ code {
|
|||
.filelist {
|
||||
td {
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid $color-main-old-eeeeee;
|
||||
border-bottom: 1px solid nc-darken($color-main-background, 8%);
|
||||
}
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
|
|
@ -1070,7 +1070,7 @@ span.ui-icon {
|
|||
}
|
||||
.scrollarea {
|
||||
overflow: auto;
|
||||
border: 1px solid $color-main-old-dddddd;
|
||||
border: 1px solid nc-lighten($color-main-text, 86%);
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
}
|
||||
|
|
@ -1082,7 +1082,7 @@ span.ui-icon {
|
|||
}
|
||||
}
|
||||
.taglist li {
|
||||
background: $color-main-old-f8f8f8;
|
||||
background: nc-darken($color-main-background, 3%);
|
||||
padding: .3em .8em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -1090,7 +1090,7 @@ span.ui-icon {
|
|||
-webkit-transition: background-color 500ms;
|
||||
transition: background-color 500ms;
|
||||
&:hover, &:active {
|
||||
background: $color-main-old-eeeeee;
|
||||
background: nc-darken($color-main-background, 8%);
|
||||
}
|
||||
}
|
||||
.addinput {
|
||||
|
|
@ -1105,7 +1105,7 @@ span.ui-icon {
|
|||
background-color: $color-main-background;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 10px $color-box-shadow;
|
||||
color: $color-main-old-333333;
|
||||
color: nc-lighten($color-main-text, 20%);
|
||||
padding: 10px;
|
||||
position: fixed !important;
|
||||
z-index: 100;
|
||||
|
|
@ -1174,7 +1174,7 @@ div.crumb {
|
|||
position: relative;
|
||||
top: 12px;
|
||||
padding: 14px 24px 14px 17px;
|
||||
color: $color-main-old-555555;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
}
|
||||
&.last a {
|
||||
padding-right: 0;
|
||||
|
|
@ -1222,12 +1222,12 @@ div.crumb {
|
|||
position: relative;
|
||||
text-align: center;
|
||||
.info {
|
||||
color: $color-main-old-555555;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
a {
|
||||
color: $color-main-old-555555;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
font-weight: 600;
|
||||
padding: 13px;
|
||||
margin: -13px;
|
||||
|
|
|
|||
|
|
@ -19,13 +19,4 @@ $image-login-background: '../img/background.jpg?v=1';
|
|||
|
||||
$color-loading: #969696;
|
||||
$color-loading-dark: #bbbbbb;
|
||||
|
||||
$color-main-old-f8f8f8: nc-darken($color-main-background, 3%);
|
||||
$color-main-old-eeeeee: nc-lighten($color-main-text, 93%);
|
||||
$color-main-old-dddddd: nc-lighten($color-main-text, 86%);
|
||||
$color-main-old-bbbbbb: nc-lighten($color-main-text, 73%);
|
||||
$color-main-old-888888: nc-lighten($color-main-text, 53%);
|
||||
$color-main-old-555555: nc-lighten($color-main-text, 33%);
|
||||
$color-main-old-333333: nc-lighten($color-main-text, 20%);
|
||||
|
||||
$color-box-shadow: rgba($color-main-old-333333, 0.75);
|
||||
$color-box-shadow: rgba(nc-lighten($color-main-text, 20%), 0.75);
|
||||
Loading…
Reference in New Issue